学习页面渲染机制之前，首先要熟悉浏览器基础结构及功能，主要分为7部分：
1、用户界面：用户所看到并交互的功能组件，like 地址栏、返回、前进按钮。
2、浏览器引擎：负责控制和管理下一级渲染引擎。
3、渲染引擎：负责解析用户请求内容，like HTML、XML、CSS。
4、网络：负责处理网络相关的事务，like HTTP请求。
5、UI后端：负责绘制提示框等浏览器组件，其底层使用的是操作系统的用户接口。
6、JS解释器：负责解析和执行JS代码。
7、数据存储：负责持久存储，like cookie和缓存等应用数据。
主流浏览器内核：
Trident内核：IE
Webkit内核：Chrome，Safari
Grcko内核：FireFox
关键渲染路径：
1、构建DOM树（DOM tree）：解析HTML文档生成节点树。
2、构建CSSOM树（CSS object model）：加载解析样式生成CSSOM树。
3、执行JS：加载并执行JS代码。
4、构建渲染树（Render tree）：根据DOM树和CSSOM树，生成渲染树（不包括隐式元素：display:none;）。
5、布局(或回流)：根据渲染树将节点树的每个节点布局在屏幕的正确位置（对DOM进行修改）。
6、绘制(重绘)：遍历渲染树绘制所有节点，（依赖UI后端模块）为每个节点适用对应的样式（对样式进行修改），
解析文档：
1、顺序：从上到下。
2、脚本：
浏览器是以同步的方式解析、加载和执行脚本。在解析文档的过程中，遇到<script>标签时，就会解析脚本，立即执行，这个过程会阻塞文档解析，直到脚本执行完才会继续解析文档。
现在HTML5提供defer和async两个属性支持延迟和异步加载JS文件。
<script defer src="script.js">通常建议将<script>标签放在</body>标签前面，而不是放在<head>标签里。
优化：多开一个线程用来加载外部资源。
3、样式：
不会阻塞文档解析，因为其不会改变DOM结构。
FireFox：当样式文件未被加载和解析时，会阻塞所有脚本。
Webkit：当样式文件未被加载和解析时，只阻塞操作了该文件内声明了样式属性的脚本。
页面渲染优化
1、HTML文档结构层次尽量少，最好不深于6层。
2、脚本尽量后放，放在</body>前即可。
3、少量首屏样式内联放在<head>标签内。
4、样式结构层次尽量简单。
5、在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流。
6、减少统统JS代码修改元素样式，尽量使用修改class名方式操作样式或动画。
7、动画尽量使用在绝对定位或固定定位的元素上。
8、隐藏在屏幕外，或在页面滚动时，尽量停止动画。
9、尽量缓存DOM查找，查找器尽量简洁。
10、涉及多域名的网站，可以开启域名预解析。
在此感谢原作者熊建刚，这篇文章让我获益良多，以上是我的学习心得。
7535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
