The tutor of HTML rendering process

时间 2019-12-05

标签 tutor html rendering process 栏目 HTML 繁體版

原文原文链接

转载自http://www.cnblogs.com/yuezk/archive/2013/01/11/2855698.html javascript

了解html页面的渲染过程

最近在学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。如下是我看到的一些东西，分享给你们。 css

参考：Understanding the renderer html

页面的渲染有如下特色：前端

单线程事件轮询
定义明确、连续、操做有序（HTML5）
分词和构建DOM树
请求资源并预加载
构建渲染树并绘制页面

具体来讲： java

当咱们从网络上获得HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到如下状况时，DOM树的构建会被阻塞：浏览器

HTML的响应流被阻塞在了网络中
有未加载完的脚本
遇到了script节点，可是此时还有未加载完的样式文件

渲染树构建自DOM树，而且会被样式文件阻塞。缓存

因为是基于单线程的事件轮询，即便没有脚本和样式的阻塞，当这些脚本或样式被解析、执行而且应用的时候，也会阻塞页面的渲染。性能优化

一些不会阻塞页面渲染的状况：网络

定义的defer属性和async属性的
没有匹配的媒体类型的样式文件
没有经过解析器插入script节点或样式节点

下面，经过一个例子来讲明一下（完整的代码）： app

 1 <html>  2 <body>  3 　　<link rel="stylesheet" href="example.css">  4 　　<div>Hi there!</div>  5 　　<script>  6 　　　　document.write('<script src="other.js"></scr' + 'ipt>');  7 　　</script>  8 　　<div>Hi again!</div>  9 　　<script src="last.js"></script> 10 </body> 11 </html>

代码很容易看明白，若是放在浏览器中打开会当即显示出想要的页面。下面，让咱们用慢镜头回放的方式来看看它到底是怎么渲染的。

1 <html> 2 <body> 3 　　<link rel="stylesheet" href="example.css"> 4 <div>Hi there!</div> 5 <script>...

首先，解析器遇到了example.css，并将它从网络中下载下来。下载样式表的过程是耗时的，可是解析器并无被阻塞，继续往下解析。接下来，解析器遇到script标签，可是因为样式文件没有加载下来，阻塞了该脚本的执行。解析器被阻塞住，不能继续往下解析。

渲染树也会被样式文件阻塞，因此这时候没有浏览器不会去渲染页面，换句话说，若是example.css文件下载不下来，Hi there! 是显示不出来的。

接下来，继续。。。

<html> <body> 　　<link rel="stylesheet" href="example.css"> <div>Hi there!</div> <script> 　　document.write('<script src="other.js"></scr' + 'ipt>'); </script>

一旦example.css文件加载完成，渲染树也就被构建好了。

内联的脚本执行完以后，解析器就会当即被other.js阻塞住。一旦解析器被阻塞，浏览器就会收到绘制请求，"Hi there!"也就显示在了页面上。

当other.js加载完成以后，解析器继续向下解析。。。

1 <html> 2 <body> 3 <link rel="stylesheet" href="example.css"> 4 　　<div>Hi there!</div> 5 　　<script> 6 　　　　document.write('<script src="other.js"></scr' + 'ipt>'); 7 　　</script> 8 　　<div>Hi again!</div> 9 　　<script src="last.js"></script>

解析器遇到last.js以后会被阻塞，而后浏览器收到了另外一个绘制请求，"Hi again!"就显示在了页面上。最后last.js会被加载，而且会被执行。

可是，为了减缓渲染被阻塞的状况，现代的浏览器都使用了猜想预加载（speculative loading）。

在上面这种状况下，脚本和样式文件会严重阻塞页面的渲染。猜想预加载的目的就是减小这种阻塞时间。当渲染被阻塞的时候，它会作如下一些事：

轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描
查找那些未来可能可以用到的资源文件的url
在渲染器使用它们以前将其下载下来

可是，猜想预加载不能发现经过javascript脚原本加载的资源文件（如，document.write()）。

注：全部的“现代”浏览器都支持这种方式。

回过来再看上面的例子，经过猜想预加载这种方式是怎么工做的。

1 <html> 2 <body> 3 　　<link rel="stylesheet" href="example.css"> 4 　　<div>Hi there!</div> 5 　　<script>...

解析器返现了example.css，并从网络获取，解析器没有被阻塞，继续解析，当遇到了内联的script节点时，被阻塞住，因为样式文件没有加载完成，阻塞了脚本的执行。渲染树一样也被样式文件阻塞住，因此浏览器没有收到渲染请求，看不到任何东西。到目前为止，和刚才提到的那种方式是同样的。可是接下来就由变化了。

预加载器（Speculative loader）继续“阅读”文档，发现了last.js并视图加载它。接下来：

1 <html> 2 <body> 3 　　<link rel="stylesheet" href="example.css"> 4 　　<div>Hi there!</div> 5 　　<script> 6 　　　　document.write('<script src="other.js"></scr' + 'ipt>'); 7 　　</script>

一旦example.css文件加载完成，渲染树也就完成了构建，内联的脚本也能够执行，以后解析器又被other.js阻塞住。解析器被阻塞住以后，浏览器会收到第一个渲染请求，“Hi there!” 会被现实在页面上。这个步骤和刚才那种状况是一致的。而后：

1 <html> 2 <body> 3 　　<link rel="stylesheet" href="example.css"> 4 　　<div>Hi there!</div> 5 　　<script> 6 　　　　document.write('<script src="other.js"></scr' + 'ipt>'); 7 　　</script> 8 　　<div>Hi again!</div> 9 　　<script src="last.js"></script>

解析器发现了last.js，可是因为预加载器刚才已经把它给加载下来了，放在了浏览器的缓存里，因此last.js会被当即执行。以后，浏览器会收到渲染请求“Hi again”也被显示在了页面上。

经过先后两种状况的对比，但愿你们能够对页面的渲染有必定的了解，而后再有针对性的作一些优化。晚安！