掌握html网页页面的3D渲染全过程以备学习培训前

昨日夜里写了1篇有关访问器的3D渲染全过程的随笔,但只是根据1小段编码解释了1下,并沒有根据访问器检测,说动力不足,并且也有许多不健全的地区,今日在访问器中检测了1下,并把检测的結果共享给大伙儿,检测全过程将会有点乱,期待大伙儿了解。

检测访问器:Chrome v24.0.1312.52 m,Firefox v18.0,Opera v12.12。

在WebKit核心中,网页页面在显示信息的情况下会有1个分析器(Parser)去分析html文本文档,随后去转化成3D渲染树(Render Tree),最后3D渲染出网页页面。这是在1个进程中开展的,因此二者不容易另外开展。

我分成了下列两种状况,并各自在不一样的访问器中开展检测。

款式文档在head里,别的的连个脚本制作文档1个在body的刚开始一部分,1个在body的底部。款式文档在body的刚开始一部分,脚本制作文档的部位和上面的1样。

检测的結果是这样的,在chrome中,款式文档的部位会危害到照片的免费下载時间,而在此外两个访问器中这两种状况沒有差别。下面是详尽的检测全过程。

检测1:款式文档在head里,别的的连个脚本制作文档1个在body的刚开始一部分,1个在body的底部。

检测的编码:

拷贝编码
编码以下:

<!doctype html>
<html>
<head>
<title>检测网页页面</title>
<link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" />
</head>
<body>
<div>
Hi, there!</div>

<script type="text/javascript">
document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
</script>

<div>
Hi, again!</div>
<img src="images/marx.jpg" alt="Marx" />
<img src="images/engels.jpg" alt="Engels" />
<img src="images/Lenin.jpg" alt="Lenin" />

<script src="last.aspx" type="text/javascript"></script>

</body>
</html>

1、在Chrome中的检测状况

我在访问器中开启网页页面后,快速将网页页面截了1张图,以下所示(点一下能够查询大图,下同):

从上图中能够看出,test.htm 文本文档早已载入进行,网页页面上都还没显示信息任何物品,example.css处在pending情况,可是,坐落于最底部的last.js却载入进行了。这表明chrome开展了预载入,提早免费下载,放在了访问器的缓存文件里了。尽管last.js早已载入进行,可是都还没被实行,由于他前面的款式文档会堵塞脚本制作的实行。

接下来,当example.css载入进行后,Hi there!显示信息在了显示屏上,访问器的截图以下所示

根据互联网恳求能够看出,example.css早已载入进行,other.js处在pending情况,但此时script标识底下的3张照片早已免费下载下来了,这是由访问器的预先载入的作用引发。可是因为访问器的3D渲染被other.js脚本制作堵塞住,因此,这3张照片连同它上面的“Hi again”都不容易显示信息出来。此外,此时last.js中的编码都还没实行。

接下来,当other.js载入进行以后,访问器就会搭建出3D渲染树,显示信息出“Hi again”,并显示信息出照片。因为last.js先前早已被免费下载,因此last.js会马上实行。全部3D渲染全过程进行。以下图所示:

 

由此看出,Chrome会预先载入body中的脚本制作資源(款式文档沒有检测),由JavaScript脚本制作动态性载入的JS不容易危害照片文档的免费下载,可是会危害它下面照片的3D渲染。

 

2、Firefox中的检测結果

    在Firefox访问中开启网页页面后快速截图,以下所示:

和在Chrome中有很显著的不一样,"Hi there!",早已显示信息在了网页页面上,可是情况色是白色,表明此时款式文档都还没免费下载下来。而在Chrome中是不容易显示信息的,要直到款式文档载入进行。

接下来,当全部网页页面载入进行以后,截图以下所示:

从恳求的瀑布流中能够看出,和Chrome相近,访问器对last.js开展了预载入,和Chrome中不一样的是,火狐沒有对照片开展预载入,而是直到other.js载入进行以后再开展的载入。

火狐中,款式文档并沒有危害文本文档的3D渲染(最典型的状况便是,网页页面1刚开始显示信息的很乱,沒有款式,当款式文档免费下载下来以后就显示信息一切正常了),在body中,由JavaScript动态性载入的JS文档会堵塞它后边的照片的免费下载。

3、在Opera访问器中

历经在Opera中检测,发现Opera访问器较为“守规定”,全部的資源全是按序载入的,并沒有出現所谓的预先载入,下面是1张总的实际效果图:

Opera中,款式文档会堵塞网页页面的3D渲染,这和Chrome相近,可是,有Opera的恳求瀑布流能够看出,网页页面中的全部的資源全是循规蹈矩的载入的,other.js提早于last.js载入。沒有预载入。

检测2、款式文档在body的刚开始一部分,脚本制作文档的部位和检测1的1样。


拷贝编码
编码以下:

<!doctype html>
<html>
<head>
<title>检测网页页面</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" />
<div>
Hi, there!</div>

<script type="text/javascript">
document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
</script>

<div>
Hi, again!</div>
<img src="images/marx.jpg" alt="Marx" />
<img src="images/engels.jpg" alt="Engels" />
<img src="images/Lenin.jpg" alt="Lenin" />

<script src="last.aspx" type="text/javascript"></script>

</body>
</html>

历经检测,发如今火狐和Opera中,結果和检测1的1样,而在Chrome中略微一些不一样,在检测1中,照片要直到head中款式文档载入完以后才会免费下载,可是检测2中会和款式文档并行处理免费下载,以下图:

总结

预载入的确是存在的,可是在Opera中沒有发现;Chrome的照片能够和body中的款式文档并行处理免费下载,可是不可以和head中款式文档并行处理免费下载。脚本制作的实行要在它前面的款式文档载入完以后。Chrome和Opera中,未载入完的資源会堵塞它后边元素的3D渲染,而火狐不容易。检测結果将会和访问器版本号相关。

看完这些,大伙儿是否感觉一些乱了,我想尽量的表述搞清楚,可是限于我水平比较有限,只能保证这了,不当之处的地方期待大伙儿指出,大伙儿还可以亲身做1下实验看看。

(完)^_^