对理论没兴趣的,可以只看红色标注的结论
mozilla的工程师发表过一篇演讲,提到reflow的问题。概念不难理解
mozilla系列浏览器构建网页的过程:1、读取HTML文档,构建网页文档树就是从body开始到结束,把每个table或者div记录下来 2、reflow通过CSS或者其他因素计算文档树中每个对象的大小、布局等 3、把计算结果显示在屏幕上简单言之浏览器的运算开销大多在reflow这一步,就是获取对象的布局、排版等样式,如果样式的定义有误则浏览器会重新运算,之后再展现在浏览器上。
另外通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。其中CSS方面,常用的JS切换display:none和display:block是个最好的例子
而HTML文档中,比较典型的是图片的宽高未定义,浏览器会自行计算,所以很多网页优化的文章都列入了这条,即可能的话,就把图片的宽度高度写进HTML文档...[ 查看全文 ]