彻底搞清楚浏览器渲染过程

一、概述

---

在分析浏览器的渲染过程之前，我们先了解一下什么是进程和线程：

（1）什么是进程？

进程是CPU进行资源分配的基本单位。

（2）什么是线程？

线程是CPU调度的最小单位，是建立在进程的基础上运行的单位，共享进程的内存空间。

那么我们可以得出结论：

1、进程是会占用系统资源；

2、一个进程内可以存在一个或者多个线程，这就是单线程和多线程；

3、无论是单线程还是多线程都是在一个进程内。

 

二、多进程

---

从上图中可知：

1、浏览器是多进程

2、不同类型的标签页都会开启一个新的进程

3、相同类型的标签页是会合并到一个进程

上图中浏览器的各个进程的主要作用：

1、浏览器进程

（1）负责管理各个标签页的创建和销毁

（2）负责浏览器的页面显示和功能（前进，后退，收藏等）

（3）负责资源的管理与下载

2、第三方插件进程

（1）负责每个第三方插件的使用，每个第三方插件使用时候都会创建一个对应的进程

3、GPU进程

（1）负责3D绘制和硬件加速

4、浏览器渲染进程（咱们这回主要分析的）

1、浏览器内核，主要负责HTML，CSS，JS等文件的解析和执行

 

三、浏览器内核

---

浏览器内核就是浏览器渲染进程，从接收下载文件后再到呈现整个页面的过程，由浏览器渲染进程负责，主要流程如下：

1、解析HTML文件和CSS文件，加载图片等资源文件，渲染成用户看到的页面

2、执行解析js文件脚本代码

这里主要讲浏览器页面渲染过程，js脚本解析执行过程，可以看这篇文章：Javascript引擎执行的过程的理解--执行阶段 ，所以本文的js解析的内容会省略

在该过程中浏览器渲染进程会开启多个线程协作完成，主要的线程以及作用如下：

1、GUI渲染线程

（1）负责解析HTML文件构建DOM树，解析CSS，结合DOM树渲染成RenderObject树，然后布局和绘制页面

（2）当RenderObject树需要更新样式属性时，即发生重绘（Repaint）；当RenderObject树中的元素规则尺寸，布局或显示隐藏等发生变化，即发生回流（reflow）。

2、JS引擎线程

3、时间出发线程

4、定时器触发线程

5、异步Http请求线程

注：GUI渲染线程与JS引擎线程是相互排斥的，因为JS引擎线程在执行的过程中可能会发生重绘和回流，所以GUI渲染线程执行时候，JS引擎线程会被挂起，等待GUI渲染线程执行完毕之后，JS引擎线程执行时候同理。

 

3.1GUI渲染线程

首先看一张图，图如下

接下来我们主要分析GUI渲染线程执行的详细过程：

1、解析HTML文件，构建DOM树，同时浏览器主进程负责下载CSS文件

2、CSS文件下载完成，解析CSS文件成树形的数据结构，然后结合DOM树合并成RenderObject树

3、布局RenderObject树，负责RenderObject树中的元素的尺寸，位置等计算

4、绘制RenderObject树，绘制页面的像素信息

5、浏览器主进程将默认的图层和复合图层交给GPU进程，GPU进程再将各个图层合成（conposite），最后显示出页面

注意：

1、默认图层指的是出于普通文档流的元素

2、复合图层一般指的使用动画执行或者<video><iframe><canvas><webgl>等元素，也可以使用z-index将层级高的元素变成复合图层，使用复合图层可以进行硬件加速，其原理是避免了默认图层的重绘和回流，想了解更深入介意自行研究

 

了解GUI渲染线程的执行过程，我们可以根据原理进行渲染优化：

1、尽可能早的提前引入css文件，例如在头部引入css文件。

2、尽可能早的加载css文件中的引入的资源，例如自定义字体文件，可以使用预加载，在link标签中加入rel=“preload” as = “font”该元素属性，不会造成渲染阻塞。

3、在DOM和CSS渲染之后加载js文件，例如在尾部加载js文件，或者使用该元素属性defer和async，进行js问价异步加载，但是不同的浏览器会有兼容性问题。

 

四、总结

---

主要是介绍浏览器的渲染过程，但是没有分析js脚本文件解析过程。

（一）浏览器渲染进程包含

1、解析HTML文件和CSS文件，加载图片等资源文件，渲染成用户看到的页面；

2、执行解析js文件脚本代码。

（二）整个过程浏览器会开启多个线程协作完成，包括：GUI渲染线程，JS引擎线程，事件触发线程，定时器触发线程，异步HTTP请求线程。

（三）其中GUI渲染线程和JS引擎线程是相互排斥的，因为JS引擎线程在执行的时候有可能会发生重绘和回流。

 

业余时间赚点零花钱点这里