zoukankan      html  css  js  c++  java
  • 编写高效的CSS选择符(节选)

    最右边优先

    css选择符是从右向左进行匹配的。

    样式系统从最右边的选择符开始向左匹配规则。只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出。

    编写高效选择符指南

    避免使用通配规则
    除了传统意义上的通配选择符之外,相邻兄弟选择符、子选择符、后代选择符和属性选择符都可以归纳为“通配规则”。推荐仅用ID、类和标签选择符。

    不要限定ID选择符
    在页面中一个指定的ID只能对应一个选择符,所以没有必要添加额外的限定符。

    不要限定类选择符
    不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。

    让规则越具体越好
    不要试图编写常选择器(ol li a),最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上。

    避免使用后代选择符
    通常处理后代选择符的开销是最高的,而使用子选字符也可以得到想要的结果时,并且更高效。

    避免使用标签——子选择符
    如果有像#toc > li > a这样的基于标签的子选择符,那么应该使用一个类来关联每个标签元素,如.toc-anchor。

    质疑子选择符的所有用途
    再次提醒大家检查所有使用子选择符的地方,然后尽可能用具体的类取代它们。
    依靠继承
    了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则。

    应用JS修改样式

    应用JS修改样式很容易触发回流。回流需要重新应用CSS规则,这样意味着浏览器必须再次匹配所有的CSS选择符。如果CSS选择符是低效的,那么回流可能消耗的时间就会多到引起用户注意。

    总结

    杜绝低效CSS选择符的影响,不仅要考虑页面加载时间,也要考虑用户交互时如何使用样式进行表现。如果JS对样式属性有操作,且页面开始变慢,那么低效的CSS选择符就很可能是罪魁祸首。

    关键字: 关键选择符、回流时间

  • 相关阅读:
    python多线程编程(6): 队列同步
    Python验证Url地址的正则表达式
    centos下redis安全配置相关
    redis
    mysql安装 配置
    centos7安装python3 环境变量配置 django安装 以及tab补全功能
    saltstack 与常用服务部署
    vim
    Linux系统基础优化及常用命令
    Shell 基本命令
  • 原文地址:https://www.cnblogs.com/mackxu/p/css-performace.html
Copyright © 2011-2022 走看看