另外通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。其中CSS方面,常用的JS切换display:none和display:block是个最好的例子
而HTML文档中,比较典型的是图片的宽高未定义,浏览器会自行计算,所以很多网页优化的文章都列入了这条,即可能的话,就把图片的宽度高度写进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;)
大致符合建议规则,同时因为书写样式时修改频率最高的就是背景和边框,所以放在最外面,取了规则和工作效率的平衡点。