浏览器渲染机制和性能优化点
客户端从服务器获取到需要渲染页面的源代码后
- 开辟一个GUI渲染线程，自上而下执行解析代码，最后绘制出对应的页面
- 自上而下渲染解析代码的过程是 同步 的，但也有一些操作是异步的。
关于各种资源的加载
- 关于CSS资源的加载
- 遇到的是<style>内嵌样式， 同步渲染， 交给GUI渲染线程解析
- 遇到<link>外链样式
1.1 异步 开辟一个新的 http网络请求线程
注意：同一个源下，浏览器最多只允许同事开启4-7个http线程
1.2 不等资源请求回来，GUI 渲染线程继续向下渲染解析
1.3 GUI渲染线程同步操作都处理完成后，再把HTTP网络线程请求回来的资源文件进行解析渲染
1.4 css文件内遇到@import , 这个操作是同步,开辟一个新的http网络线程去请求资源文件，但是在资源文件没有请求回来之前，GUI渲染线程继续向下渲染
- 遇到script把资源的请求
- 默认都是 同步
- 必须记忆和Http网络线程，把资源请求回来之后，并且交给 js渲染线程 渲染解析完成后，GUI渲染线程才能继续向下渲染，所以script默认也是阻止GUI渲染
- async属性 首先也是开辟一个http网络线程去加载资源文件，于此同时GUI渲染线程向下渲染 把默认的同步改为异步，但是一旦资源请求后，会中断GUI的信号渲染，把先请求回来的js进行渲染解析
- defer属性 也是开辟一个网络线程去加载资源文件，同时GUI渲染线程向下渲染，等GUI渲染完成，在检查script依赖的文件，根据顺序进行渲染执行。对比async defer 都是异步，但是defer会保证队列任务的正常。
- img标签请求
- src里面检测到是外链的情况下，也是开辟一个网络线程去加载图片，等GUI线程处理完毕后，再检查图片文件是否请求完成。如果完成，就渲染图片。
加载过程
- dom tree
- cssdom tree
- render tree
- layout
- painting
未完。。。
