写在前面
浏览器在从服务器端获得 html、css、js 文件后要进行页面的渲染，浏览器中有两个引擎非常重要，一个是渲染引擎，负责 html 和 css 文件的解析和渲染，另个一是 js 引擎，负责处理 js 文件逻辑。
浏览器渲染页面的整个流程到底是怎么样的呢？
1. 根据HTML构建HTML树(DOM)
首先，浏览器会根据 HTML 文件进行 DOM 树的构建，以数据结构中树的概念来描述各 DOM 节点间的关系。
2. 根据CSS构建CSS树(CSSDOM)
同样的，浏览器也会根据 CSS 文件来构建一颗 CSS DOM 树，这颗树可能比 HTML 树要小一些，因为一般 head 标签节点都没有样式。
3. 将两棵树合成一棵渲染树(render tree)
在 HTML树 和 CSS树 构建完成后，浏览器会将这两棵树进行合并，合并成一个带有样式的 DOM 树，就是最终的渲染树，浏览器会根据渲染树进行页面最终的渲染。
4. layout确定布局定位
layout 布局会根据渲染树对树中节点进行轮廓的计算，根据文档流、盒模型、计算大小和位置等等，来确定各DOM节点的大致位置，类似于美术考试中给定一个场景，开始用速写绘制出其大致轮廓。
5. Paint绘制上色
Paint 绘制是会对页面元素进行更细致的绘制，把页面元素的边框颜色、文字颜色、阴影等绘制出来，类似于美术中速写绘制完轮廓后开始填色。
6. 根据层叠上下文进行Composite合成
浏览器中 DOM 元素之间是有层叠关系的，在每一层都完成上色后，需要将各层叠元素之间进行合成拍平，以便于最终更方便的渲染页面，防止浏览器渲染时渲染出一些被遮挡的没必要的部分。
写在后面
上述浏览器的渲染方式是从头开始的完整渲染方式，但是我们知道，js 也可以操作 DOM 进行 DOM 布局和样式的改变，那么 js 操作 DOM 改变了 style 后肯定要再次进行渲染，但这次的渲染就不再是从头开始构建 DOM 树了，而是在已有 DOM 树的基础上进行局部的渲染。
比如 js 添加或删除了 DOM ，那么就会引起整个页面中局部布局的改变，因此，浏览器会从 layout -> Paint -> Composite 重新走一遍。
如果 js 只改变了 DOM 的背景色或边框色等，不会引起页面布局的改变，因此，浏览器会从 Paint -> Composite 走一遍。
如果 js 只是改变了 DOM 元素的 transform 等，既不会引起布局的改变，又不会引起色彩的改变，浏览器就只会重新执行 Composite 。
不同 css 属性的改变会触发什么渲染流程呢？这个只能一一地试了，但是有程序员试过后总结了下来，具体可访问 CSS Triggers