为什么要了解浏览器渲染页面机制？主要是还是性能的优化。
- 了解浏览器如何进行加载，我们可以在引用外部样式文件、外部JS时，将它们放到合适的位置，是浏览器以最快的速度，将文件加载完毕。
- 了解浏览器如何进行解析，我们可以在构建DOM结构，组织CSS选择器的时候，选择最优的写法，提高浏览器的解析速率。
- 了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写JS文件时，可以减少“重绘”、“重新布局”的消耗。
要了解清楚浏览器渲染机制，要先弄明白几个基本概念。
- DOM：Document Object Model，浏览器将HTML解析成树形的数据结构，简称DOM。
- CSSOM：CSS Object Model，浏览器将CSS解析成树形的数据结构，简称CSSOM。
- Render Tree：DOM和CSSOM合并后生成Render Tree。
- Layout：计算出Render Tree每个节点的具体位置。
- Painting：通过显卡，将Layout后的节点内容分别呈现到屏幕上。
流程机制如下图所示：
需要注意的地方
- 当浏览器获得HTML文件后，会自上而下的加载，并在加载过程中进行解析和渲染。
- 加载说的是获取资源文件的过程。如果在加载过程中遇到外部CSS文件和图片，浏览器会另外发送一个请求，去获取CSS文件和相应的图片，这个请求时异步的，并不会影响HTML文件的加载。
- 如果遇到JS文件，HTML文件会挂起渲染的进程，等待JS文件加载完毕后，在继续进行渲染。因为JS可能会修改DOM，导致后续HTML资源白白加载，所以HTML必须等待JS文件加载完毕后，再继续渲染，这也是为什么前端开发人员 常常 将JS文件写在底部body标签前的原因。
浏览器渲染的整个流程，如下图所示
转成文字描述的话，就是：
- 当用户输入一个URL时，浏览器就会向服务器发出一个请求，请求URL对应的资源。
- 接受到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一棵DOM树，DOM树的构建时一个深度遍历的过程，当前节点的所有子节点都构建完成以后，才会去构建当前节点的下一个兄弟节点。
- 将CSS解析成CSSOM树（CSS Rule Tree）
- 根据DOM树和CSSOM树，来构建Render Tree（渲染树），渲染树并不等于DOM树，因为一些像head或display：none的东西，不在渲染树中。
- 有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义，以及它们的从属关系，下一步操作就是Layout，就是计算出每个节点在屏幕中的位置。
- Layout后，浏览器已经知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中位置是哪里，就进入了最后一步painting。按照计算出来的规则，通过显卡，把内容画到屏幕上。
微信扫一扫 
支付宝扫一扫 