web性能优化-浏览器渲染原理

在web性能优化-浏览器工做原理中讲到，浏览器渲染是在renderer process中完成的。

那咱们来看下renderer process究竟干了什么？

Renderer Process包含的线程有：

1.主线程 main thread

2. 工做线程 workder thread

3. 合成器线程 compositor thread

4. 光栅线程 raster thread

渲染进程的流程

构建DOM

　　当渲染进程接受到导航的确认信息后，开始接受html数据，main thread 会解析文本字符串为DOM。

　　渲染HTML为DOM的方法，由HTML standard定义

加载次级资源

　　网页中经常包含图片，css, js等额外的资源，这些资源须要从网络或者cache中获取。

　　Main thread会在构建DOM的过程当中逐一请求他们。为了加速preloa scanner会同事运行，入股偶在HTML中<img><link>等标签，preload scanner会把这些请求传递给Browser process中network thread进行相关资源的下载

JS的下载和执行

　　当遇到<script>标签时，renderer process会中止解析，而去加载，解析和执行js代码，阻塞渲染。不过有不少方法能够防止阻塞，这里不介绍了

样式的计算

　　仅仅渲染DOM还不足获知页面的具体样式，main thread还会基于css选择器解析CSS获取每个节点的最终的计算样式。

获取布局

　　想要渲染一个完整的页面，除了获知每一个节点的具体样式，还须要获取每一个节点在页面上的位置，布局其实就是找到全部远的的几何欢喜的过程。

绘制各元素

　　即便知道了DOM和CSSDOM，咱们还须要知道不一样元素的绘制前后顺序。在绘制阶段，主线程会遍历lauout tree建立绘制记录。

合成帧（合成帧不是很懂，将就看）

　　main thread会遍历layout tree来建立层树layer tree，添加will-change css属性的元素，会被当作单独的一个层

　　一旦层树被建立，渲染顺序被肯定，主线程会把这些消息通知给合成器线程。合成器线程会栅格化每个层

　　栅格线程会栅格化每个磁铁并存储在GPU显存中

　　一旦磁铁被光栅化，合成器线程会建立合成帧

　　合成帧后会经过IPC消息传递给browser process，这些合成帧会被传递给GPU process，而后显示在屏幕上。

　　若是发生滚动，合成器线程会建立另一个合成帧发送GPU。

那咱们能够从如下几个方面去优化：

• 顺序执行，并发加载
• 是否阻塞
• 依赖关系
• 依赖方式
• 重绘和重流

这些在以后的文章中会作详细的讲解

本文参照：https://developers.google.com/web/updates/2018/09/inside-browser-part3