web前端中CSS代码样式优化作用与意义

浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完成，这样一来，用户看到页面的时间会更晚。

5. 避免使用 CSS Expressions

padding: 0px; margin: 0px; line-height: 26px; color: rgb(51, 51, 51); “>Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

6. 避免使用 Filter

IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。针对这种情况，最好的解决办法就是使用 PNG8。

7、尽可能少的使用css images

能通过代码或字符实现的，就不用图片去解决。比如“可能感兴趣的人”展开气泡上下三角、返回顶部的箭头、“更多”后面的?0?3符号等。既减小CSS图片请求，又不会面临若干套皮肤升级困难的问题，仅通过对CSS的color、backgroud等属性的控制，就可以换色了。

8、尽量使用CSS3等新技术

尽量使用CSS3实现功能，即非图片类的元素效果图，如圆角、阴影、渐变、半透等效果，可以通过样式控制，而无需切图的元素，在得到设计师认可后，不用图片，只做样式控制。满足高级浏览器的视觉，IE系列不能显示的，有原则的放弃。不仅为速度助力，还在放弃低级浏览器的大方向前进一步。

三、十句CSS学习顺口溜

1、IE边框若显若无，须注意，定是高度设置已忘记；

2、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

3、三像素文本慢移不必慌，高度设置帮你忙；

4、兼容各个浏览须注意，默认设置行高可能是杀手；

5、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

6、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

7、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

8、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

9、IE浮动双边距，请用display：inline拘。

10、列表横向排版，列表代码须紧靠，空隙自消须铭记。

未经允许不得转载：爱前端网 » web前端中CSS代码样式优化作用与意义