摘要： 昨天晚上写了一篇关于浏览器的渲染过程的随笔，但只是通过一小段代码解释了一下，并没有通过浏览器测试，说服力不够，而且还有很多不完善的地方，今天在浏览器中测试了一下，并把测试的结果分享给大家，测试过程可能有点乱，希望大家理解。测试浏览器：Chrome v24.0.1312.52 m，Firefox v18.0，Opera v12.12。在WebKit内核中，网页在显示的时候会有一个解析器（Parser）去解析html文档，然后去生成渲染树（Render Tree），最终渲染出页面。这是在一个线程中进行的，所以两者不会同时进行。我分为了以下两种情况，并分别在不同的浏览器中进行测试。样式文件在head 阅读全文

摘要： 最近在学习前端的性能优化，有必要了解一下页面的渲染流程，以便对症下药，找出性能的瓶颈所在。以下是我看到的一些东西，分享给大家。参考：Understanding the renderer页面的渲染有以下特点：单线程事件轮询定义明确、连续、操作有序（HTML5）分词和构建DOM树请求资源并预加载构建渲染树并绘制页面具体来说：当我们从网络上得到HTML的相应字节时，DOM树就开始构建了。由浏览器更新UI的线程负责。当遇到以下情况时，DOM树的构建会被阻塞：HTML的响应流被阻塞在了网络中有未加载完的脚本遇到了script节点，但是此时还有未加载完的样式文件渲染树构建自DOM树，并且会被样式文件阻塞。 阅读全文