醉里乾坤大,壶中日月长
浏览器加载和渲染原理分析(转)
上一篇 /
下一篇 2010-05-31 18:02:04
/ 个人分类:细节思考
转自:http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html/cmtid/cac51e6d16cef4f64316940a
浏览器加载和渲染原理分析
为了更清楚的显示页面元素的加载顺序,动手写了一个程序,程序对页面中
的每个元素都延迟10
秒。程序的位置在见附件。首先查看TestHtmlOrder.aspx
这个页面,使用HttpWatcher
来检测页面元素的加载。从下面的图中可以看到加载顺序。IE
首先加载了主页面TestHtmlOrder.aspx
,下载了主页面后,页面首先显示的是“红色剑灵”、“蓝色剑灵”几个字,但此时显示的是只是黑色字体,没有样式,因为样式
还没有下载下来。接下来页面中的标签是JS
标签,属于嵌入文件,因此IE
需要将其下载下来。这有两个文件,虽然IE
同时能够和WebServer
建立两个链接,但是此时并没有使用两个连接,而是使用一个连接,在下载完成后,接下来才下载另外一个文件。
究其原因,是因为JS包含了语法定义,在第二个文
件里面的函数可能用到了第一个文件里面的变量和函数,IE没有办法判断,或者需要很耗时的判断,才能判断文件下载的先后顺序。而在解释方面,IE对JS文件是下载一个,解释一个
(可以执行文件TestJsOrder2.aspx)。如果先下载的是第二个文件,此时就会发生解释错误。因此需要开发者自己在放置JS文件位置时,按先后顺序放
好,IE依次下载进行解释。后面的函数覆盖前面的函数定义在下载完成后,我们看到helloWorld
,helloworld2
,开始顺序执行。而此时字体的样式表和图片仍然没有下载下来。在helloWorld
,helloWorld2
执行过程时,此时页面停留在函数执行的中断点(alert
部分)。此时IE
并没有去下载CSS
的文件。由此说明JS
函数的执行会阻塞IE
的下载。接下来我们看到CSS
文件的下载也是使用了一个连接,也是串行下载。其
串行下载的原因和JS
串行下载原因是一样的。在两个CSS
文件下载过程中,我们看到“红色剑灵”,“蓝色剑灵”依次
变为红色和蓝色,两者颜色的转换时间相差在10
秒,说明样式文件和JS
文件一样是下载完一个解析一个的。现在转到TestCssOrder.aspx
看一下,可以看到开始时“红色剑灵”,“红色强壮剑灵”,显示为红色,过了10
秒“蓝
色剑灵”显示为蓝色,再过10
秒,“红色强壮剑灵”字体变粗了,同时“红色强壮剑灵2
”开始出现。在刚开始“红色剑灵”,“红色强壮剑灵”显示红色时,第三个样式还没有下载下来,此时IE
使用已经下载到样式对上面的元素渲染了一遍,此时虽然“红色剑灵”,“红色强壮剑灵”样式定义不同,但是显示效果一样。第三个文件下
载后,此时IE
又重新对“红色强壮剑灵”渲染了一遍,此时其变为加粗,以上所有的文件加载并且渲染完成
后,开始渲染下面的标签“红色强壮剑灵2
”有一点需要证明:在IE使用样式对标签进行渲染时,是不
是停止了其他页面元素的下载?原来我想通过加长渲染时间(利用滤镜,将标签元素数目增大)来检测,不过没有验证成功。只是从JS函数的执行推断CSS的渲染也是如此。接下来看到的是图片文件下载,此时看到的是两个图片同时开始下载,而且是下载完成后,立即在页面上开始显示,直到所有的
图片下载完成。经过以上的分析,推测IE
下载或者渲染顺序可能如下:IE
下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。在渲染到页面的某一部分时,其上面的所有
部分都已经下载完成(但并不是说所有相关联的元素都已经下载完。)在下载过程中,如果遇到某一标签是嵌入文件,并且文件是具有语义解释性的(例如:JS
脚本,CSS
样式),那么此时IE
的下载过程会启用单独连接进行下载。并且在下载后进行解析,
解析(JS
、CSS
中如有重定义,后定义函数将覆盖前定
义函数)过程中,停止页面所有往下元素的下载。样式表文件比较特殊,在其下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元
素(含以前已经渲染的)重新进行样式渲染。并以此方式一直渲染下去,直到整个页面渲染完成。Firefox
处理下载和渲染顺序大体相同,只是在细微之处有些差别,例如:iframe
的渲染注:一个测试文件在网络传输上所花费时间的办法。首先需要明白检测中w ait
值的意义:wait =
服务器所花时间+
网络时间服务器所花时间我们可以用Thread.Sleep(10000);
来
让其休息10s
,比如这个:由此大概可以计算出10.002-10 = 0.002
秒,这就是大
概在网络上所花的时间。
收藏
举报
TAG: