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

2018-06-24 01:08:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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缩写,可以减少代码的使用,以达到文件更小的目的。
 
 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:git 常用命令

下一篇:关于Doctype、严格模式与混杂模式