2、css性能优化专题————呱呱二号

css选择器优化

首先，css选择器的解析顺序是由右到左的

for example：

1.（1）box > span

浏览器渲染网页的时候是先搜索span，接着一直向上搜索，直到搜索到span的父级元素为.box，如果搜索不到，就会寻找下一个span。

1.（2）.box span

浏览器渲染网页的时候是先搜索span，接着一直向上搜索，直到搜索到span的父辈元素为.box，如果搜索不到，就会寻找下一个span。

相比之下，1.（1）的效率会比1.（2）的效率要高。

 

 

2.（1）#btn

在一个页面上每一个id都是唯一的，浏览器会直接寻找到#btn的元素，并进行渲染。

2.（2）button#btn

这个例子相对于上面的选择器多了一个button，浏览器寻找到#btn的元素之后，还会再寻找button元素。

 

 

3.[name="submit"]

尽量不要使用全局选择器

 

4.多个规则还不如直接使用一个特殊的class

for example：

4.(1)div .box ul li a

4.(2).div-a

 

5.巧用css继承属性，减少代码使用。

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

终端块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

 

font属性书写格式(仅css1)
font : font-style font-variant font-weight font-size line-height font-family;

font属性默认值
font: normal normal normal medium normal "Times New Roman" ;

 

5.css放在head位置

css放在head位置的好处就是，在加载css文件的时候，浏览器不会渲染页面，只有css文件加载好了之后才会进行渲染页面。而在此之前，页面都以空白显示。

 

 

6.css缩写，可以减少代码的使用，以达到文件更小的目的。