浏览器加载和渲染原理分析（转载）

浏览器加载和渲染原理分析

为了更清楚的显示页面元素的加载顺序，动手写了一个程序，程序对页面中的每个元素都延迟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秒，这就是大概在网络上所花的时间。

转载自：http://hi.baidu.com/seosky/blog/item/78d3394c130f86ffd72afc56.html