网页制作学习:reflow的问题

　　对理论没兴趣的，可以只看红色标注的结论

　　mozilla的工程师dbaron发表过一篇演讲，提到reflow的问题。概念不难理解

　　mozilla系列浏览器构建网页的过程:

　　1、读取HTML文档，构建网页文档树——就是从body开始到结束，把每个table或者div记录下来

　　2、reflow——通过CSS或者其他因素计算文档树中每个对象的大小、布局等

　　3、把计算结果显示在屏幕上

　　简单言之浏览器的运算开销大多在reflow这一步，就是获取对象的布局、排版等样式，如果样式的定义有误则浏览器会重新运算，之后再展现在浏览器上。

　　另外通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。其中CSS方面，常用的JS切换display:none和display:block是个最好的例子

　　而HTML文档中，比较典型的是图片的宽高未定义，浏览器会自行计算，所以很多网页优化的文章都列入了这条，即可能的话，就把图片的宽度高度

　　从渲染过程上来讲，mozilla有过CSS的书写建议：

　　1.显示样式

　　display/position/float/clear

　　2.自身样式

　　width/height/margin/padding/border/background

　　3.内容样式

　　line-height/text-align/font系列(font-size/font-weight)/color/text-decoration/vitical-align

　　猜测这应该和mozilla系列浏览器本身渲染网页的优先级顺序切合。

　　我的书写顺序：

　　select{clear:both;display:block;float:left;margin:100px;padding:100px;width:100px;height:100px;line-height:100px;text-align:center;color:#000;font-size:12px;font-weight:400;background:#FFF;border:1px solid #F00;)

　　大致符合建议规则，同时因为书写样式时修改频率最高的就是背景和边框，所以放在最外面，取了规则和工作效率的平衡点。

评论总数：1 条 [ 查看全部 ] 网友评论