CSS性能优化

摘要：

    CSS是负责布局和渲染的重要角色，漂亮的页面当然能够吸引用户。本文是自己在开发过程中总结的关于CSS与性能的关系，可能有不对之处，希望能够指出。

​

1、所有的样式尽量放在css文件中，HTML标签中不要写style属性，因为浏览器在所有的样式加载完成之后，才会开始渲染整个页面，写在标签属性必会加长浏览器的渲染时间

2、删除默认样式代码

因为会影响浏览器的执行时间。如：align="left"，默认就是左对齐

3、减少使用相对定位

因为这会影响浏览器的repain和reflow。如：position：absolute

4、CSS 缩写

CSS 缩写可以让你用极少的代码定义一系列样式属性，这种做法可以极大程度的缩减代码量以达到提高性能的目的。如：#ff00ff替换成#f0f

5、对CSS属性进行合并

属性合并减少代码量和浏览器的渲染时间以达到提高性能的目的。如：font-size: 36px; font-family: Arial; line-height: 48px; font-weight: bold;替换成font:bold 36px/48px Arial;

6、CSS选择器

• 浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的，因此最右边的选择符就是关键选择符。比如：#parent > a {}与#parent a {}，前者浏览器首先会查找页面上所有的“a”节点，然后再去做进一步的判断：如果它的父节点的 id 为“parent”，则匹配成功。后者浏览器先便利所有的“a”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“parent”，则匹配成功，否则继续查找下一个“a”节点。

 

• 尽量减少规则数量，规则越多，匹配越慢

• 减少属性选择器

7、避免使用 CSS表达式

CSS表达式只有ie浏览器可以执行，但是计算次数比较频繁，不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。

8、利用继承机制，减少CSS

如果很多子节点都需要设定该 CSS 属性值，可以统一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额外设定，加速了 CSS 的分析效率。

9、样式放在HTML页面头部加载

浏览器在所有的样式加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。

10、避免使用滤镜

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

11、利用data:image/png;base64来代替url加载图片

"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。

12、减少重复的样式，多人开发时会出现多个人定义同一个样式，可以借助浏览器检测

13、合并、压缩你的css文件，减少http请求，可以借助工具或者自动化构建。

14、使用CSS sprite来处理你的图片

 

小结：

　　 ​现在项目中越来越重视用户体验，在这种情况下我们必须写出高性能的代码，减少用户等待时间是我们第一要解决的问题。