web前端高级JavaScript - 浏览器底层渲染机制及性能优化

浏览器遇到各种资源的加载机制

客户端从服务器获取到需要渲染页面的源代码后，会开辟一个“GUI渲染线程”，自上而下解析代码，最后绘制出对应的页面。
自上而下渲染解析代码的过程是【同步】的，但是有些操作也是异步的：

• 1.关于CSS资源的加载
  • 遇到的是【style】"内嵌样式”，则“同步”交给GUI渲染线程解析
  • 遇到的是【link】“外链样式”， 则会异步开辟一个新的HTTP网络请求线程，不等资源信息请求回来，而是GUI渲染线程继续往下渲染；等GUI渲染线程同步操作都处理完后，再把基于HTTP网络请求回来的资源文件进行解析渲染（注意：同一个源下，根据不同浏览器，最多只允许同时开辟4~7个HTTP线程“HTTP的并发数”）
  • 遇到@import“导入式样式”，则是“同步”开辟一个新的HTTP网络请求线程去请求资源，但是在资源文件没有请求回来之前，GUI渲染线程会被“阻塞”，不允许其继续向下渲染
• 2.遇到【script】资源的请求
  • 默认都是同步的，必须基于HTTP网络请求线程，把资源请求回来之后，并且交给“JS渲染线程”渲染解析完成后，GUI渲染线程才能继续向下渲染，所以【script】默认也是“阻塞”GUI渲染的。
  • async属性：遇到【script async】首先也是开辟一个HTTP网络请求线程去请求加载资源文件，但是与此同时GUI渲染线程继续向下渲染[把默认的同步改为异步了]，但是一旦当资源请求回来之后，会中断GUI的渲染，先把请求回来的JS进行渲染解析
  • defer属性：遇到【script defer】和async类似，都是新开辟HTTP网络请求线程去请求加载资源文件，与此同时GUI渲染线程还会继续渲染【异步】，但是不一样的是：defer和link类似，是在GUI同步的代码渲染完成后，才会渲染解析请求回来的JS代码
• 3.遇到【img】或者音频资源