html5教程-HTML的渲染过程

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

页面的渲染有以下特点：

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

具体来说：

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

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

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

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

一些不会阻塞页面渲染的情况：

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

下面，通过一个例子来说明一下（完整的代码）：

  1 

4 　　

Hi there!

5 　　<script> 6 　　　　document.wr IT e('<script src="other.js"> '); 7 　　</script>8 　　

Hi ag ai n!

9 　　<script src="last.js"></script>10 11

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

 1 

4

Hi there!

5 <script> .. .

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

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

接下来，继续。。。

    　　     
Hi there!
    <script>    　　document.write('<script src="other.js"> ');    </script> 
一旦example.css文件加载完成，渲染树也就被构建好了。
 
内联的脚本执行完之后，解析器就会立即被other.js阻塞住。一旦解析器被阻塞，浏览器就会收到绘制请求，"Hi there!"也就显示在了页面上。
 
当other.js加载完成之后，解析器继续向下解析。。。
 
 1 
 4 　　 
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script>8 　　 
Hi again!
 9 　　<script src="last.js"></script> 
解析器遇到last.js之后会被阻塞，然后浏览器收到了另一个绘制请求，"Hi again!"就显示在了页面上。最后last.js会被加载，并且会被执行。
 
但是，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载（s PE culative loading）。
 
在上面这种情况下，脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候，它会做以下一些事：
    轻量级的HTML（或 CSS ）扫描器（scanner）继续在文档中扫描   查找那些将来可能能够用到的资源文件的url   在渲染器使用它们之前将其下载下来    
但是，猜测预加载不能发现通过javascript脚本来加载的资源文件（如，document.write()）。
 
注：所有的[现代]浏览器都支持这种方式。这句话有待商榷，具体请看我 下一篇 随笔（正在整理中。。。）。
 
回过来再看上面的例子，通过猜测预加载这种方式是怎么工作的。
 
 1 
 4 　　 
Hi there!
 5 　　<script>...

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

预加载器（Speculative loader）继续“阅读”文档，发现了last.js并试图加载它，（注：此时，如果example.css没有加载下来，last.js是不会加载的，一直处于pending状态）。接下来：

1   2   3 　　  4 　　
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script> 
一旦example.css文件加载完成，渲染树也就完成了构建，内联的脚本也可以执行，之后解析器又被other.js阻塞住。解析器被阻塞住之后，浏览器会收到第一个渲染请求，[Hi there!] 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后：
 
 1 
 4 　　 
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script>8 　　 
Hi again!
 9 　　<script src="last.js"></script> 
解析器发现了last.js，但是由于预加载器刚才已经把它给加载下来了，放在了浏览器的缓存里，所以last.js会被立即执行。之后，浏览器会收到渲染请求[Hi again]也被显示在了页面上。
 
通过前后两种情况的对比，希望大家可以对页面的渲染有一定的 了解 ，然后再有针对性的做一些优化。晚安！
       
    
页面的渲染有以下特点：
 23 　　   23 　　   23   23 　　   23 　　      单线程事件轮询   定义明确、连续、操作有序（HTML5）   分词和构建DOM树   请求资源并预加载   构建渲染树并绘制页面    
具体来说：
 
当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻塞：
    HTML的响应流被阻塞在了网络中   有未加载完的脚本   遇到了script节点，但是此时还有未加载完的样式文件    
渲染树构建自DOM树，并且会被样式文件阻塞。
 
由于是基于单线程的事件轮询，即使没有脚本和样式的阻塞，当这些脚本或样式被解析、执行并且应用的时候，也会阻塞页面的渲染。
 
一些不会阻塞页面渲染的情况：
    定义的defer属性和async属性的   没有匹配的媒体类型的样式文件   没有通过解析器插入script节点或样式节点    
下面，通过一个例子来说明一下（完整的代码）：
 
  1 
 4 　　 
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script>8 　　 
Hi again!
 9 　　<script src="last.js"></script>10 11 
代码很容易看明白，如果放在浏览器中打开会立即显示出想要的页面。下面，让我们用慢镜头回放的方式来看看它究竟是怎么渲染的。
 
 1 
 4 
Hi there!
 5 <script>...

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

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

接下来，继续。。。

    　　     
Hi there!
    <script>    　　document.write('<script src="other.js"> ');    </script> 
一旦example.css文件加载完成，渲染树也就被构建好了。
 
内联的脚本执行完之后，解析器就会立即被other.js阻塞住。一旦解析器被阻塞，浏览器就会收到绘制请求，"Hi there!"也就显示在了页面上。
 
当other.js加载完成之后，解析器继续向下解析。。。
 
 1 
 4 　　 
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script>8 　　 
Hi again!
 9 　　<script src="last.js"></script> 
解析器遇到last.js之后会被阻塞，然后浏览器收到了另一个绘制请求，"Hi again!"就显示在了页面上。最后last.js会被加载，并且会被执行。
 
但是，为了减缓渲染被阻塞的情况，现代的浏览器都使用了猜测预加载（speculative loading）。
 
在上面这种情况下，脚本和样式文件会严重阻塞页面的渲染。猜测预加载的目的就是减少这种阻塞时间。当渲染被阻塞的时候，它会做以下一些事：
    轻量级的HTML（或CSS）扫描器（scanner）继续在文档中扫描   查找那些将来可能能够用到的资源文件的url   在渲染器使用它们之前将其下载下来    
但是，猜测预加载不能发现通过javascript脚本来加载的资源文件（如，document.write()）。
 
注：所有的[现代]浏览器都支持这种方式。这句话有待商榷，具体请看我下一篇随笔（正在整理中。。。）。
 
回过来再看上面的例子，通过猜测预加载这种方式是怎么工作的。
 
 1 
 4 　　 
Hi there!
 5 　　<script>...

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

预加载器（Speculative loader）继续“阅读”文档，发现了last.js并试图加载它，（注：此时，如果example.css没有加载下来，last.js是不会加载的，一直处于pending状态）。接下来：

1   2   3 　　  4 　　
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script> 
一旦example.css文件加载完成，渲染树也就完成了构建，内联的脚本也可以执行，之后解析器又被other.js阻塞住。解析器被阻塞住之后，浏览器会收到第一个渲染请求，[Hi there!] 会被现实在页面上。这个步骤和刚才那种情况是一致的。然后：
 
 1 
 4 　　 
Hi there!
 5 　　<script> 6 　　　　document.write('<script src="other.js"> '); 7 　　</script>8 　　 
Hi again!
 9 　　<script src="last.js"></script> 
解析器发现了last.js，但是由于预加载器刚才已经把它给加载下来了，放在了浏览器的缓存里，所以last.js会被立即执行。之后，浏览器会收到渲染请求[Hi again]也被显示在了页面上。
 
通过前后两种情况的对比，希望大家可以对页面的渲染有一定的了解，然后再有针对性的做一些优化。晚安！
       
 觉得 可用，就经常来吧！  欢迎评论哦！&nbs p;  html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
       
以上是  为你收集整理的 html5教程-HTML的渲染过程 全部内容，希望文章能够帮你解决 html5教程-HTML的渲染过程 所遇到的问题。
		
如果觉得  网站内容还不错，  推荐好友。

      
查看更多关于html5教程-HTML的渲染过程的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219207