书写更有效率的 CSS 选择器

这里的效率不是说开发者写代码的效率,而是浏览器执行这个选择器的效率。

在看 CSS 的书或者教程的时候,是不是看过这句话:“浏览器是从右至左来处理选择器的”。当然了,如果你没有看到过这句话也无所谓,现在有同样意思的话,就放在这里,现在看也无妨。

那么再来说下浏览器工作的过程,这里是渲染的过程,得到数据之后,浏览器要先绘制一个 DOM 树,然后再有一个 “reflow” 的过程,这个过程就是在 CSS 文件下载之后,确定要渲染的元素在 DOM 中的位置,而 CSS 样式中,很多很多在应用的时候都要有一个 “reflow” 的,过程,所以,避免这个过程,后者减少这个过程,都会相当大的提升浏览器的效率。

还有一个就是 CSS 选择器的优先问题了,这个这里不多说了。

那么,我们不多废话,直接上例子和代码:

例如,我们通常的选择器会这么写

.content a {}

那么根据上面几条理论,浏览器的工作过程是绘制好 DOM 树之后,就会查找页面中所有 a 元素了。查找到所有的 a 元素之后,又开始查找出于 .content 类下面的 a 元素,此时,如果页面有好多好多 a 元素就会是一个非常耗费资源的事情。那么如果这里有更多个 .content 呢?

所以,我们可以这么写,给每一个 a 元素添加一个 class 就可以了。

然后变为

.content .xxx {} 或者 #xxx .xxx {} 这样呢,效率就会更高了。

那么,还有一种情况就是使用太多的层了,也就是限制太多了,例如;

#xxx ul li p a {}

同样的按上面的理论来说,先找所有的 a 然后找所有包含 a 的 p ,依此类推,那么效率肯定是很低喽。

改写后的 可以给 a 添加 class,那么就可以写作 #xxx .xxx {} 效率高了不是一点两点啊。或者给 ul class 嘛,那么就写作 .xxx p a {} 但是这样效率提升并不明显啊。

好了,完了,这只是基本的方法。前端效率的提升,需要慢慢理解,慢慢琢磨,慢慢来嘛。

评论

  1. 10年前
    2011-10-24 17:12:18

    这篇文章很不错,本人就是主要搞CSS+DIV的,以前不是很注意这方面。觉得书写代码时轻松就好。

  2. 一米 博主
    10年前
    2011-11-11 15:45:20

    @阿清
    代码一定要遵守标准,这对自己和别人都好。

  3. 10年前
    2011-11-22 13:51:42

    这个稻草人,让我想起了移动的城堡。。。。。。。

  4. 一米 博主
    10年前
    2011-11-22 14:18:20

    @weizi
    这个移动的碉堡,还真不知道!

  5. suN
    10年前
    2011-11-22 14:47:00

    膜拜

  6. 一米 博主
    10年前
    2011-11-22 14:53:07

    @suN
    这是为什么呢?

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇