« 回到主页
浏览器加载、解析、渲染的过程
1 为什么要了解浏览器加载、解析、渲染的过程？
- 了解浏览器如何进行加载，可以在引用外部CSS文件、外部JS文件时，将它们放到合适的位置，使浏览器以最快的速度将文件加载完毕。
- 了解浏览器如何进行解析，可以在构建DOM结构，组织CSS选择器时，选择最优的写法，提高浏览器的解析速率。
- 了解浏览器如何进行渲染，可以在设置元素属性，编写JS文件时，减少reflow和repaint的消耗。
2 渲染引擎在取得HTML文件之后的基本流程
- 解析HTML以构建DOM Tree -> 构建Rendering Tree -> 布局Rendering Tree -> 绘制Rendering Tree
3 浏览器解析的三种文件
- HTML/SVG/XHTML文件：产生一棵DOM Tree。
- CSS文件：产生一棵CSS Rule Tree。
- JavaScript文件：主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
4 当浏览器获得一个HTML文件时，会自上而下加载，并在加载过程中进行解析和渲染
- 浏览器会将HTML解析成一棵DOM Tree，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点;
- 将CSS解析成一棵CSS Rule Tree；
- 根据DOM Tree和CSSOM来构造Rendering Tree，注意Rendering Tree并不等同于DOM Tree，如DOM Tree中display:none的就没必要放在渲染树中；
- Layout，顾名思义就是计算出每个节点在页面中的位置，因为有了Rendering Tree，浏览器已经知道页面中有哪些节点、各个节点的CSS样式及它们之间的关系；
- 绘制，即遍历Rendering Tree，并绘制每个节点。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早地将内容呈现到屏幕上，并不会等到所有的HTML都解析完成之后再去构建和布局Rendering Tree，而是解析完一部分内容就渲染一部分内容，同时可能还在加载其他资源。
5 HTML页面加载、解析、渲染的过程
- 用户输入URL，浏览器向服务器发出请求，服务器返回HTML文件；
- 浏览器开始加载和解析HTML代码，发现<head>标签内有一个标签引用外部CSS文件，于是又向服务器发出CSS文件的请求，解析过程中，停止渲染后面的代码，解析完成后，服务器返回CSS文件（注意：CSS文件是并行加载的，当所有CSS文件都加载完成后页面才开始一起解析CSS文件；CSS中如有重定义，后定义的将覆盖前定义的）；
- 浏览器继续加载和解析HTML中<body>部分的代码，等到CSS文件已经到手后，就可以开始渲染页面了；
- 浏览器在<body>中发现一个
![]()
标签引用了一张图片，于是向服务器发出图片文件请求，此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
- 服务器返回图片文件后，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要重新渲染这部分代码；
- 浏览器在<body>中发现一个
- 终于等到了</html>的到来；
- 若用户点了换肤按钮，浏览器更换了一下CSS文件的路径，浏览器召集了所有元素，向服务器请求了新的CSS文件，重新渲染页面。
« 回到主页