div+css提高执行效率的几点建议

今天在改版一个中型网站时，老板总觉得打的不流畅，再一个图片显示的顺序不一样，其它的图片都显示出来了，定义在css里的还没有显示出来：
1、当打开一个站点时，先执行html里的图片，然后在执行css里的背景图片。
2、在布局时常用div，而很少直接放内容。
3、最好把css里的小图写成一个文件图片，一次性出去出来。
4、div是按顺序读取的。如果是三排div布局想先显示中间的要用padding-left把第左div和右div排其后。
5、如果总觉得自己的排版时，在定义字体后总觉得不够漂亮，不妨试试letter-spacing:0.5px。
6、在布局时尽量在html中用图片，而不要把过多的写在css做背景。
7、改可能少的div多层嵌套或大div嵌套小div，这样会先执行里面小的执行外面大的，最后才显示出来，会加长显示时间。


所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些我们常见的写CSS犯一些低效错误：

1、不要在ID选择器前使用标签名
一般写法：DIV#divBox
更好写法：#divBox
解释：因为ID选择器是唯一的，加上div反而增加不必要的CSS匹配。
2、不要在class选择器前使用标签名
一般写法：span.red
更好写法：.red
解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉，比如你css文件中定义如下：
p.red{color:red;}
span.red{color:#ff00ff}
如果是这样定义的就不要去掉，去掉后就会混淆，不过建议最好不要这样写
3、尽量少使用层级关系
一般写法：#divBoxp.red{color:red;}
更好写法：.red{..}
4、使用class代替层级关系
一般写法：#divBoxullia{display:block;}
更好写法：.block{display:block;}
5、在css渲染效率中id和class的效率是基本相当的
class最在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。


所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE6 专用 *height: 100px;

IE7 专用 *+height: 100px;

IE7、FF 共用 height: 100px !important;


DIV+CSS的设计中有几点误区，尤其应该澄清：

1、DIV+CSS的合理之处在于可以进行网页的统一设计管理，通过一个样式表，牵一发而动全身，只要修改样式表，就可以统一全站的风格，如果为一 个页面单独做一个样式表，或者一个div就做一个样式表，没有全局设计观念，那么这个div+CSS的设计方式就完全没有必要，甚至成了累赘;

2、像Table一样用DIV+CSS，无穷尽的嵌套，其效果与Table设计没有两样，并不会带来搜索引擎的优化效果，反而会增加页面的负担;

3、推崇Div+CSS，却不考虑兼容性，TABLE设计由来已久，得到浏览器的广泛支持，所以显示效果很好，不会出现错位情况，但是 DIV+CSS却在部分浏览器中会发生页面错位的情况，因此在进行设计的时候也要考虑到不同浏览器的情况，进行更改和调试。

当然DIV+CSS有其固有的优点：

1、标准化的页面结构;

2、有利于统一设计管理;

3、可以得到搜索引擎良好的支持