CSS性能优化 收藏

了解CSS的查找匹配原理，让CSS更简洁、高效

匹配原理：

     浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;}，浏览器的查找顺序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。

    浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

 优化方法：

  1.不要在ID选择器前使用标签名

  2.不要再class选择器前使用标签名

  3.尽量少使用层级关系

  4.使用class代替层级关系 

 

优化浏览器渲染 

1. 使用高效率的CSS选择器
2. 避免CSS expressions
3. 将样式表放在页面顶部
4. 指定图像尺寸

 

如何使CSS渲染更高效

从右到左

ID's 是最有效率的，通用符是最慢的

不要用标签修饰

一个选择器渲染失败比这个选择器被渲染更高效

不要为了高效的CSS放弃语义和可维护性

 

图片优化自动化

http://www.welefen.com/image-optimization.html