考核内容: CSS渲染
题发散度: ★★
试题难度: ★★
看看大家的选择
解题:
如何使css的渲染效率更高效,也就是如何加快css的渲染速度
先做一个引入。当浏览器解析HTML时首先构造一个内部文件树来代表所有显示的元素。然后浏览器根据标准的CSS级联、继承和排序规则,为元素指定匹配的各种样式。CSS搜索引擎通过样式规则为每个元素找到匹配的样式。该引擎由右至左评估每个规则,从最右边的选择器开始(称为“键”【Key】),并通过移动每个选择器,直到找到一个匹配或丢弃的规则。
例如:
ul li a{......}
一般来说,目标选择器有四种:ID,class,标签和通用符。
他们可以单独使用也可以组合使用。不过渲染速度各不相同。
ID的渲染速度是最快的,
如
#menu{……}
但是当ID也其他标签组合的话他的渲染速度就有可能变得很低。
如
#menu li{……}
为什么呢?
因为li是最先被读取的为不是#menu,就是要先读取页面中的所有li然后在判断其上一级有没有#menu。
所以:
通配符。*会遍历所有的标签
*{margin:0; padding:0}
如果这样写,页面中所有的标签的margin全是0;padding也是0;
这样写的问题是:
遍历会消耗很多的时间,如果你的HTML代码写的不规范或是某一签标没有必合,这个时间可能还会更长;
建议的的解决办法:
不要使用*;而是把你常用到的这些标签进行处理;
例如:
body,li,p,h1{margin:0; padding:0}
绝对定位(position:absolute )是网页布局中很常用到的,特别是作一些浮动效果时,也会让页面看起来非常的酷。但网页中如果使用过多的绝对定位,会让你的网页变得非常的慢
举个css表达式的例子
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持。
在线测试:
答案:
A. 尽量使用CSS子代选择器尽量多的嵌套