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

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

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

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

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

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

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

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

测试的代码：

查看更多关于了解html页面的渲染过程以备学习前端的性能优化(续)_HTML/Xhtml_网页制作的详细内容...