昨天晚上写了一篇关于浏览器的渲染过程的随笔,但只是通过一小段代码解释了一下,并没有通过浏览器测试,说服力不够,而且还有很多不完善的地方,今天在浏览器中测试了一下,并把测试的结果分享给大家,测试过程可能有点乱,希望大家理解。
测试浏览器: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的底部。
测试的代码:
新闻热点
疑难解答