浏览器
渲染引擎
世界五大浏览器，在自身发展时都使用了一种或多种渲染引擎作为自身的渲染引擎。
- Google Chrome：
Webkit(前期)、Blink(后期) - Apple Safari：
Webkit - Mozilla Firefox：
Gecko - ASA Opera：
Presto(前期)、Blink(后期) - Microsoft IExplorer：
Trident - Microsoft Edge：
Trident(前期)、Blink(后期)
关键渲染路径
关键渲染路径指浏览器从最初接收请求得到HTML、CSS、JS等资源，然后解析、构建、渲染、布局、绘制和合成，到最后呈现在用户眼前的整个过程。
将关键渲染路径划分理解，那网页的渲染过程可分为以下部分。
解析文件
-
DOM树：将html文件转换为DOM树 -
CSSOM树：将css文件转换为CSSOM树 -
渲染树：将DOM树与CSSOM树合并生成渲染树
绘制图层
-
回流：根据渲染树生成布局渲染树 -
重绘：根据布局渲染树生成绘制渲染树 - 合成图层：根据绘制渲染树合成图层显示在屏幕中
解析文件
HTML文档描述网页的结构，浏览器通过HTML解析器将HTML解析为DOM树结构。HTML文档中所有内容皆为节点，各节点间拥有层级关系，彼此相连，组成DOM树。
构建DOM树的过程：读取HTML文档的字节(Bytes)，将字节转换成字符(Chars)，根据字符确定标签(Tokens)，将标签转换成节点(Nodes)，以节点为基准构建DOM树。
CSS文档描述网页的表现，浏览器通过CSS解析器将CSS解析为CSSOM树结构，与DOM树结构较像。CSS文档中所有内容皆为节点，与HTML文档中的节点一一相应，各节点间拥有层级关系，彼此相连，组成CSSOM树。
构建CSSOM树的过程：读取CSS文档的字节(Bytes)，将字节转换成字符(Chars)，根据字符确定标签(Tokens)，将标签转换成节点(Nodes)，以节点为基准构建CSSOM树。与DOM树的构建过程完全一样。
在构建
DOM树时，当HTML解析器遇到<script>时会立即阻塞DOM树的构建，将控制权移交给浏览器的JS引擎，等到JS引擎运行完毕，浏览器才会从中断的地方恢复DOM树的构建。
浏览器的渲染引擎将DOM树与CSSOM树合并生成渲染树，只渲染需显示的节点及其样式。DOM树、CSSOM树和渲染树三者的构建并无先后条件与先后顺序，非完全独立而是存在交叉并行构建的情况，因此会形成一边加载，一边解析，一边渲染的工作现象。
绘制图层
进入绘制阶段，遍历渲染树，调用渲染器的paint()在屏幕中绘制内容。根据渲染树布局计算样式，即每个节点在网页中的布局、尺寸等几何属性。HTML默认是流式布局，CSS与JS会打破这种布局，改变DOM的几何属性与外观属性。在绘制时根据渲染树布局，再根据布局绘制，这就是回流重绘。
在此涉及两个核心概念：回流、重绘。我用两句精简的话概括它们。
- 回流：改变几何属性的渲染
- 重绘：改变外观属性而不影响几何属性的渲染
当生成渲染树后，至少会渲染一次，在后续交互时还会不断地重新渲染。这时只会回流重绘或只有重绘，因此引出一个定向法则：回流必定引发重绘，重绘不一定引发回流。
合成图层
将回流重绘生成的图层逐张合并并显示在屏幕中。上述几个步骤并非一次性顺序完成，若改动DOM/CSSOM，上述过程会被重新执行，实际上CSS与JS往往会多次改动DOM/CSSOM。简而言之，用户的交互操作引发了网页的重渲染。
加入浏览器私有属性
通常编写CSS都会在一些CSS3属性前加入-webkit-、-moz-、-ms-或-o-，这些奇形怪状写到手软的东西就是浏览器私有属性。
对于编写私有属性的顺序需特别注意：兼容性写法放到前面，标准性写法放到最后。在浏览器解析CSS时，若标准属性无法使用则使用当前浏览器相应私有属性。
当然不是所有CSS3属性都需补齐-webkit-、-moz-、-ms-或-o-，上述代码只是一个示例，真正的transform私有属性只有-webkit-与-ms-。这些私有属性需查看Caniuse以确保编写正确，若想偷懒也可全部写上。
每个CSS3属性都编写这么一堆兼容性代码，无疑是对生命最大的浪费。在使用webpack打包代码时，可接入postcss-loader与postcss-preset-env，postcss-preset-env内置了autoprefixer，它会根据Caniuse提供的数据对代码中的CSS3属性批量加入私有属性。
Can I use... Support tables for HTML5, CSS3, etc
