关灯
开启左侧

怎么提升CSS选择器性能?

[复制链接]
老蚊子 发表于 2019-5-6 12:37:10 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
一、注意事项:

1、避免使用通用选择器
  1. .content  {color: red;}
复制代码
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素,直到文档的根节点。因此其匹配开销是非常大的,所以应避免使用关键选择器是通配选择器的情况。


2、避免使用标签或 class 选择器限制 id 选择器

  1. /*BAD*/
  2. button#backButton {…}
  3. /*BAD*/
  4. .menu-left#newMenuIcon {…}
  5. /*GOOD*/
  6. #backButton {…}
  7. /*GOOD*/
  8. #newMenuIcon {…}
复制代码

3、避免使用标签限制 class 选择器

  1. /*BAD*/
  2. treecell.indented {…}
  3. /*GOOD*/
  4. .treecell-indented {…}
  5. /*BEST*/
  6. .hierarchy-deep {…}
复制代码


4、避免使用多层标签选择器。使用 class 选择器替换,减少css查找
  1. /*BAD*/
  2. treeitem[mailfolder="true"] > treerow > treecell {…}
  3. /*GOOD*/
  4. .treecell-mailfolder {…}
复制代码
5、避免使用子选择器

  1. /*BAD*/
  2. treehead treerow treecell {…}
  3. /*BETTER, BUT STILL BAD */
  4. treehead > treerow > treecell {…}
  5. /*GOOD*/
  6. .treecell-header {…}
复制代码


6、使用继承

  1. /*BAD */
  2. #bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
  3. /*GOOD*/
  4. #bookmarkMenuItem { list-style-image: url(blah) }
复制代码


二、 简洁、高效的CSS

       所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写CSS犯一些低效错误:



不要在ID选择器前使用标签名
一般写法:DIV#divBox
更好写法:#divBox
解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。

不要再class选择器前使用标签名
一般写法:span.red
更好写法:.red
解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:
如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写
  • p.red{color:red;}  
  • span.red{color:#ff00ff}


尽量少使用层级关系
一般写法:#divBox p .red{color:red;}
更好写法:.red{..}

使用class代替层级关系
一般写法:#divBox ul li a{display:block;}
更好写法:.block{display:block;}

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

12粉丝

69帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )