了解html页面的渲染过程以备学习前端的性能优化(续)_HTML/Xhtml_网页制作

昨天晚上写了一篇关于浏览器的渲染过程的随笔，但只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，测试过程可能有点乱，希望大家理解。

测试浏览器：Chrome v24.0.1312.52 m，Firefox v18.0，Opera v12.12。

在WebKit内核中，网页在显示的时候会有一个解析器（Parser）去解析html文档，然后去生成渲染树（Render Tree），最终渲染出页面。这是在一个线程中进行的，所以两者不会同时进行。

我分为了以下两种情况，并分别在不同的浏览器中进行测试。

样式文件在head里，其他的连个脚本文件一个在body的开始部分，一个在body的底部。样式文件在body的开始部分，脚本文件的位置和上面的一样。

测试的结果是这样的，在chrome中，样式文件的位置会影响到图片的下载时间，而在另外两个浏览器中这两种情况没有区别。下面是详细的测试过程。

测试一：样式文件在head里，其他的连个脚本文件一个在body的开始部分，一个在body的底部。

测试的代码：

总结：

预加载确实是存在的，但是在Opera中没有发现；Chrome的图片可以和body中的样式文件并行下载，但是不能和head中样式文件并行下载。脚本的执行要在它前面的样式文件加载完之后。Chrome和Opera中，未加载完的资源会阻塞它后面元素的渲染，而火狐不会。测试结果可能和浏览器版本有关。

看完这些，大家是不是觉得有些乱了，我想尽可能的表达明白，但是限于我水平有限，只能做到这了，不妥之处希望大家指出，大家也可以亲自做一下试验看看。

（完）^_^