浏览器渲染机制和性能优化点

客户端从服务器获取到需要渲染页面的源代码后

1. 开辟一个GUI渲染线程，自上而下执行解析代码，最后绘制出对应的页面
2. 自上而下渲染解析代码的过程是 同步 的，但也有一些操作是异步的。

关于各种资源的加载

1. 关于CSS资源的加载
   • 遇到的是<style>内嵌样式， 同步渲染， 交给GUI渲染线程解析
   • 遇到<link>外链样式
     1.1 异步 开辟一个新的 http网络请求线程
     注意：同一个源下，浏览器最多只允许同事开启4-7个http线程
     1.2 不等资源请求回来，GUI 渲染线程继续向下渲染解析
     1.3 GUI渲染线程同步操作都处理完成后，再把HTTP网络线程请求回来的资源文件进行解析渲染
     1.4 css文件内遇到@import , 这个操作是同步,开辟一个新的http网络线程去请求资源文件，但是在资源文件没有请求回来之前，GUI渲染线程继续向下渲染

2. 遇到script把资源的请求
   • 默认都是 同步
   • 必须记忆和Http网络线程，把资源请求回来之后，并且交给 js渲染线程 渲染解析完成后，GUI渲染线程才能继续向下渲染，所以script默认也是阻止GUI渲染
   • async属性 首先也是开辟一个http网络线程去加载资源文件，于此同时GUI渲染线程向下渲染 把默认的同步改为异步，但是一旦资源请求后，会中断GUI的信号渲染，把先请求回来的js进行渲染解析
   • defer属性 也是开辟一个网络线程去加载资源文件，同时GUI渲染线程向下渲染，等GUI渲染完成，在检查script依赖的文件，根据顺序进行渲染执行。对比async defer 都是异步，但是defer会保证队列任务的正常。
3. img标签请求
   • src里面检测到是外链的情况下，也是开辟一个网络线程去加载图片，等GUI线程处理完毕后，再检查图片文件是否请求完成。如果完成，就渲染图片。

加载过程

1. dom tree
2. cssdom tree
3. render tree
4. layout
5. painting

未完。。。