提升CSS渲染性能的骚操作

考核内容: CSS渲染

题发散度: ★★

试题难度: ★★

看看大家的选择

解题:

如何使css的渲染效率更高效，也就是如何加快css的渲染速度

先做一个引入。当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则，为元素指定匹配的各种样式。CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则，从最右边的选择器开始（称为“键”【Key】），并通过移动每个选择器，直到找到一个匹配或丢弃的规则。

例如:

ul li a{......}

一般来说，目标选择器有四种：ID，class，标签和通用符。

他们可以单独使用也可以组合使用。不过渲染速度各不相同。

ID的渲染速度是最快的，

如

#menu{……}

但是当ID也其他标签组合的话他的渲染速度就有可能变得很低。

如

#menu li{……}

为什么呢？

因为li是最先被读取的为不是#menu，就是要先读取页面中的所有li然后在判断其上一级有没有#menu。

所以：

• 尽量减少使用CSS子代选择器的嵌套

通配符。*会遍历所有的标签

　*{margin:0; padding:0}

如果这样写，页面中所有的标签的margin全是0；padding也是0；

这样写的问题是：

　　遍历会消耗很多的时间，如果你的HTML代码写的不规范或是某一签标没有必合，这个时间可能还会更长；

建议的的解决办法：

不要使用*；而是把你常用到的这些标签进行处理；

例如：

body,li,p,h1{margin:0; padding:0}

• 减少或不用通配符来作为键的规则。
• 一个页面上少用绝对定位

绝对定位（position:absolute ）是网页布局中很常用到的，特别是作一些浮动效果时，也会让页面看起来非常的酷。但网页中如果使用过多的绝对定位，会让你的网页变得非常的慢

• 避免使用CSS表达式

举个css表达式的例子

font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );

这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。

在线测试:

答案：

 A. 尽量使用CSS子代选择器尽量多的嵌套