高性能 CSS

HTML 和 CSS 本身的性能问题并不突出, 在提高可读性和可维护性的前提下, 如果能让代码运行和解析的速度更快, 则是锦上添花.

使用高效的 CSS 选择器

首先要知道浏览器如何解析 CSS
以 .nav ul.list li div{} 为例
浏览器遍历 div, 然后从遍历结果中寻找父集为 li 的对象, 依次进行选择器搜索. 所以如果选择器层级过多, 会导致性能低下.
解决方法: 令第一次匹配时的数量最少, 并让整体的匹配查找次数更少.
具体做法:

避免使用通配符
避免使用标签选择器和单个属性选择器作为关键选择器
不要在 id 选择器前加标签名
不要设定过多层级, 降低 CSS 和 DOM 结构的耦合度

CSS 相关的图片处理

不给图片设置尺寸: 有时候同一张图会在页面不同低昂多次使用, 比如缩略图, 正常图, 大图等. 如果图片的原始尺寸与实际需求不同, 在使用时通过缩放会给 CPU 带来额外的计算过程, 增加了图片在浏览器中的渲染时间. 网络传输过程也会占用更多带宽, 增加下载时间. 最佳做法是为需要的部分单独做一套图片, 初始页面加载时就能更快显示.
使用雪碧图, 利用 css 进行背景定位, 好处是减少请求次数, 提高图片的整体的加载速度; 缺点是需要精确计算位置(现在有一些工具可用), 维护过程复杂, 要换图片比较复杂
```
*   在后期使用 CSS Sprite 技术, 因为在开发的时候会比较频繁修改图片
```
- 合理组织图片
- 控制雪碧图的尺寸, 推荐长宽相乘不超过 2500, 大小不超过 200kb
- 合理控制背景图单元之间的距离及背景图的位置
- 借助相关工具