浅谈浏览器渲染页面的过程

来源：互联网发布：sol数据修改器编辑：程序博客网时间：2024/04/29 06:22

1、以HTML页面为例描述HTML页面渲染的过程

1) 用户输入网址，浏览器向服务器发出请求，服务器返回HTML文件；

2) 浏览器开始载入HTML代码，若<head>标签内有一个<link>标签引用外部CSS文件，则浏览器又发出CSS文件的请求。解析过程中，停止页面所有往下元素的下载，阻塞加载；解析完成后，服务器返回CSS文件（注意：CSS是并行下载的，当所有样式表都下载完成以后页面才开始一起解析CSS文件开始渲染文件。CSS中如有重定义，后定义函数将覆盖前定义函数）；

3) 浏览器继续载入HTML中<body>部分的代码，CSS文件已经到手后，可以开始渲染页面了；

4) 浏览器发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

5) 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要重新渲染这部分代码；

6) 浏览器发现了一个<script>标签，运行其中的代码，JavaScript脚本执行某条语句，可能会使得页面突然多了或少了某些元素，浏览器不得不重新渲染这部分代码（注意：如果有多个JS文件被引入，那么对于浏览器来说，这些JS文件被被串行地载入，并依次执行。解析过程中，停止页面所有往下元素的下载，阻塞加载。因为JavaScript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载CSS文件并行下载JS文件，因为这是JS文件的特殊性造成的。因为浏览器的加载是从上到下一行一行的加载的，所以CSS中如有重定义，后定义函数将覆盖前定义函数）；

7) 若用户点了“换肤”按钮，JavaScript让浏览器换了一下<link>标签的CSS路径，则浏览器向服务器请求了新的CSS文件，重新渲染页面。

2、重绘和重排（repaints and reflows）

任何对渲染树的修改都有可能会导致下面两种操作：

1) 重排

渲染树的一部分必须要更新且节点的尺寸发生了变化，会触发重排操作。每个页面至少在初始化的时候会有一次重排操作。

2) 重绘

部分节点需要更新，但没有改变其形状，如改变了背景颜色，会触发重绘操作。

3、会触发重绘或重排的操作

1) 增加或删除DOM节点。

2) 设置 display: none;（重排并重绘）或者 visibility: hidden（只有重排）。

3) 移动页面中的元素。

4) 增加或者修改样式。

5) 改变窗口大小，滚动页面等。

1 0