一眼看穿浏览器渲染全过程

前段时间有很多同学通过不同渠道问我关于浏览器渲染的问题。今天，小郭在这里用简单的一张图概括出浏览器渲染的全过程。

废话不多说，直接上图

浏览器流程图.png

1. 渲染进程收到HTML 文档后，遍历文档节点并转换为能够读懂的DOM 树结构；
2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets对象，每一个对象都包含CSS规则。根据CSS规则对象计算出 DOM 节点的样式；
3. 创建渲染树，并计算元素的布局信息。布局阶段会从渲染树的根节点开始遍历，然后确定每个节点对象在页面上的确切大小与位置，布局阶段的输出是一个盒子模型，它会精确地捕获每个元素在屏幕内的确切位置与大小。对渲染树进行分层，并生成分层树。
4. 为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。合成线程发送绘制图块命令DrawQuad给浏览器进程。
5. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

写到这里一定有很不少人好奇，为什么我们写页面时要把script标签放在页面最低部呢？

别着急，答案就在下面。

这就是前端小伙伴经常遇到的一个问题：渲染阻塞

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。

所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源；
JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。

现在终于知道我们使用script的时候经常将它置于页面最底部的原因了。

另外，这一点也是经常在前端面试题中看到它的身影。

到这里浏览器渲染的全部流程已经讲述完毕，如果还有疑问可以在下方留言，大家一起讨论。

有任何前端问题可以私信我，想了解更多前端知识关注公众号“一郭鲜”，小郭等着你的到来