CSS优化的认识一二......

CSS优化

一、CSS优化概述

1、CSS优化的作用

- 减轻服务器压力

- 缩短服务器响应时间

- 提高用户的体验度

二、CSS优化原则

1、尽量减少HTTP请求个数

- CSS sprites：合并多个背景图像到一个单独图像，然后通过background-image和background-position进行调整

- Image maps，结合对各图像到一个单独图像。其总体现规模大致是相当的，但是减少HTTP请求的数量，从而加快页面显示速度

2、页面顶部引入CSS

- 可以提高页面加载速度

- 样式表放在头部，允许页面逐步呈现

3、将CSS和JS放到外部文件中

- 页面引入外部文件，将由浏览器缓存

  - 后续页面会使用缓存

三、CSS代码优化

1、合并样式

- 提前定义统一的样式

- 利用CSS继承

2、缩小样式文件

- 尽量使用简写属性

3、选择更优的样式属性值

- 比如，border:none;

4、减少样式重写

- 使用Reset，但并非全局Reset，比如针对性的清除边距。

5、代码压缩

- 使用工具压缩CSS代码

- 比如yuicompressor

6、不要在HTML中缩放图像

- 图像在网络传输时仍然保持原来图像的字节数

7、避免空的src和href