关于网页渲染的文章很多，但是相关信息比较分散，且论述并不是很完整。如果要想对这个主题有个大致的了解，我们还得学习很多知识。因此，Web 开发者 Alexander Skutin 决定写一篇文章。他相信，这篇文章不仅能帮助初学者，也能对那些想要刷新知识结构的高级前端开发者有所裨益。
译文如下
网页渲染必须在很早的阶段进行，可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧，从而避免在实践的过程中遇到性能问题。
这篇文章不会研究浏览器内部的详细机制，而是提出一些通用的规则。毕竟，不同浏览器引擎的工作机制各不相同，这无疑会让开发者对浏览器特性的研究变得更加复杂。
浏览器是如何完成网页渲染？
首先，我们回顾一下网页渲染时，浏览器的动作：
根据来自服务器端的 HTML 代码形成文档对象模型（DOM）
加载并解析样式，形成 CSS 对象模型。
在文档对象模型和 CSS 对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树（在 Webkit 中这些对象被称为渲染器或渲染对象，而在 Gecko 中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如
标签或含有display:none属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的 DOM 对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。
当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。
重绘
当改变那些不会影响元素在网页中的位置的元素样式时，譬如 background-color (背景色)， border-color (边框色)， visibility (可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。
重排
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。这些改变通常由以下事件触发：
DOM 操作（元素添加，删除，修改，或者元素顺序的改变）;
内容变化，包括表单域内的文本改变;
CSS 属性的计算或改变;
添加或删除样式表;
更改“类”的属性;
浏览器窗口的操作（缩放，滚动）;
伪类激活（：悬停）。
浏览器如何优化渲染？
浏览器尽可能将重绘/重构 限制在被改变元素的区域内。比如，对于位置固定或绝对的元素，其大小改变只影响元素本身及其子元素，然而，静态定位元素的大小改变会触发后续所有元素的重流。
另一种优化技巧是，在运行几段 JavaScript 代码时，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用
