浏览器加载、解析、渲染以及优化

发表于   |   分类于   |     |  

为什么要了解浏览器加载、解析、渲染这个过程？

  • 了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。
  • 了解浏览器如何进行解析，我们可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
  • 了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写js文件时，可以减少”重绘“”重新布局“的消耗。
    这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一边解析，一边渲染的工作现象。

[TOC]

举例

  1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
  2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
  3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
  4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
  5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
  6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
  8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
  9. 终于等到了</html>的到来，浏览器泪流满面……
  10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
  11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

一、浏览器加载(获取资源的过程)

  • 关于加载顺序：当浏览器获得一个html文件时，会”自上而下“加载，并在加载过程中进行解析渲染
  • 加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。
    遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。这是异步请求，并不会影响html文档进行加载，但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。
  • 虽然css文件的加载不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。

二、浏览器解析

过程:DOM树构建和CSSOM构建是同步进行的，直到CSSOM构建完才开始构建渲染树，这中间会存在一些阻塞

  • 默认情况下，CSS 被视为阻塞渲染的资源(不阻塞DOM树构建)，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕
  • 存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建
  • CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪
  • 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行

无论是外链CSS还是内联CSS都会阻塞DOM渲染（Rendering），不会阻塞DOM构建，DOM解析（Parsing）会正常进行。
不论是内联还是外链JavaScript都会阻塞后续DOM解析（Parsing），当然后续DOM的渲染（Rendering）也被阻塞了。

1、DOM树构建

  • 外链JS情况下，DOM树是增量构建的，虽然DOM被阻塞了，但是JS外链前的DOM可以正常解析和渲染
  • 内联JS代码块会阻塞渲染线程，直到JS执行完才开始渲染
    例子：

    【JS外链】结果是立即显示hello，外链JS加载并执行后显示world

    1
    2
    3
    4
    5
    <body>
    	hello
    	<script src="./a.js"> 
    	world
    </body>

【内联JS块】一直白屏，执行完js后显示hello world

1
2
3
4
5
6
7
<body>
	hello
	<script>
			//js代码
	</script>
	world
</body>

2、CSSOM树构建

要等到CSSOM树构建完后才能渲染

3、render树构建

【未完待续】找了网上很多博客，感觉没有讲的全面的，整个过程各种阻塞情况的都有考虑的暂时没看到

【注】部分转自：https://www.jianshu.com/p/e141d1543143
http://www.cnblogs.com/lhb25/p/how-browsers-work.html#Webkit_CSS_parser
https://blog.csdn.net/liaozhongping/article/details/51028705
https://harttle.land/2016/11/26/static-dom-render-blocking.html

热评文章