打开页面时浏览器渲染页面的过程

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) 改变窗口大小,滚动页面等。


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/430.html