前端基础知识——浏览器渲染一个页面的全过程总结

前言：

如果你在研究“浏览器如何渲染页面”这个老生常谈的话题，并且看了一部分相关文章，那么不妨花5分钟看一下我的理解，或许对你有所帮助。

（最近事情有点多，乱糟糟的，学习也浮躁，文章是我好一段时间前写的了，本还想基于理论再整点优化的实践，也没落实，不过可以放心下面文字的质量我是有信心的）

关键渲染路径（一个概念）

定义：就是我们的浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。

个人理解：这个过程中包含文档对象模型（DOM）的构建，CSS对象模型（CSSOM）的构建，渲染树的构建以及布局、绘制等具体的步骤。感觉关键渲染路径就是在描述页面首屏渲染的流程，所以优化关键渲染路径可以提高渲染性能（首屏渲染优化）。

浏览器渲染流程概图

浏览器渲染流程图.png

一、HTML解析细节（& 思考）

浏览器渲染首先就是解析HTML文件，以构建DOM（document object module）树以及CSSOM树

这里需要一点关于浏览器线程与进程的基础知识：浏览器是多进程模型，其中每个tab页都有一个渲染进程，渲染进程里的常驻线程有：GUI渲染线程，负责解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等都是这个线程去做的；还有就是JS引擎线程，也就是常说的主线程，负责js代码的执行，GUI渲染线程与JS引擎线程是互斥的。

Webkit 和 Firefox浏览器都进行了预解析优化，也就是说在GUI渲染线程去解析HTML之前，可以理解为开启一个预解析行为，具体就是扫描html文件中外链的js脚本（<script src=xxx>）和css样式文件（<link href=xxx>），然后开启网络请求线程去请求这些资源，相当于提前准备这些资源，以便在GUI渲染线程解析到js脚本以及css文件时可以直接使用。
然后就是GUI线程在解析HTML过程中遇到<link>的外链css时如何处理，首先css文件加载完成与否并不会影响GUI线程的继续解析，也就是说如果css文件还没准备好，那么GUI就继续向下解析html来构建DOM树，等待css文件准备好了，那么GUI渲染线程可能就会停止DOM的构建然后来处理CSSOM的构建（由上面基础知识我们知道DOM与CSSOM的构建都是由GUI渲染线程去做的）

这里补充一个浏览器处理的具体细节：GUI渲染线程处理到<link>时就会触发一次渲染，当<link>里的样式解析完毕，生成CSSOM进而合成render tree、布局等等操作之后还会进行一次渲染。

这也就可以解释为什么 “css要放在上面” ，因为css放在上面，比如放在<head>里面，根据上面的理论，GUI线程解析html文档时第一次遇到外链css进行渲染尝试，因为此时压根没有DOM（需要渲染的dom结构），自然也没有render tree，所以就不会渲染，等到这个外链css加载并且解析完毕了之后，GUI渲染线程再次进行渲染，这样就保证了页面首次渲染即为有样式的。对比css放在下面，GUI线程遇到<link>时DOM树已经存在了，但是此时还没有CSSOM树，所以导致render tree没有样式，所以就会造成初次渲染的无样式，当css文件处理完毕，GUI线程进行第二次渲染，必然发生重绘甚至回流（重排），并且样式从有到无出现扇动，对用户体验来说应该也是不好的。理论的实践依据可参考这篇文章对于解析css浏览器行为的探索。
GUI线程解析HTML过程中如果遇到<script>，把握住一个原则：GUI渲染线程与JS引擎线程是互斥的，所以js的执行一定会阻塞GUI渲染线程对html的继续解析，也就是说GUI渲染线程停止执行，切换为js引擎线程来工作。

我们可以思考一下为什么要设计GUI渲染线程与js引擎线程互斥，其实非常好理解，因为js完全有能力去影响DOM以及CSSOM，所以一旦js执行，GUI线程对于DOM和CSSOM的构建就该停止了，不然两者就会发生冲突。

上面提到，js不止有能力影响DOM，也有能力影响CSSOM（js修改样式基本操作罢了），所以还有一个HTML解析的具体细节就是：<link>后面有js代码时，那么只有<link>下载并解析完毕，js代码才能执行（保证js正确访问css）。所以从这个角度来说， <link>也阻塞了后续DOM的解析（<link>阻塞后面的<script>，<script>会阻塞dom解析）。

所以这里我们也可以分析一下为什么js要放在下面了，非常简单直接，就是因为不想让js的执行阻塞GUI渲染线程的工作。
特殊情况：上面所说的<script>都是最普通的情景，<script>标签有两个属性defer和async，HTML解析时的具体特点如下图，简单概括一下就是拥有defer或者async属性的<script>的下载都不会阻塞HTML的解析，defer的js内容会在HTML解析完毕后执行，async的js内容会在<script>下载准备完毕之后立即抢占GUI渲染线程来执行，也就是说啥时候执行成为了一个未知数（全看网络状况）

总而言之，为了让<script>不影响HTML的解析，我们一般都会给<script>添加defer属性（去看一下vue或者react的打包产物，都是defer<script>），这样<script>的位置也就不那么重要了。

多说一句，这里牵扯一个DOMContentLoaded事件执行时机的问题，添加了defer属性的<script>脚本执行完毕之后才会触发DCL事件，换句话说，DCL事件触发之前执行defer脚本。

async与defer.png

二、构建render tree

通过上面的HTML解析，我们拿到了DOM与CSSOM，并将其合称为render tree，说白了就是给DOM树的每个节点添加上样式属性，当然这个过程中display: none的元素会被删除，不会出现在render tree中。合成过程中还会将一些css属性进行转换，比如：red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如em会变成`px。