Amelie

Amelie 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

神经大条,路痴,会魔法,编程是学生时代遗留的技能。

个人动态

Amelie 接受了回答 · 2014-11-06

为什么 CSS 选择器解析的时候是从右往左?

CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。

首先,对浏览器来说,ID 选择器 #xx 是最快的,其次是 class 选择器、html 元素选择器等。


那为什么从右向左的规则要比从左向右的高效?

如图:
CSS

假如 DOM 的结构如上图,匹配规则是 .mod-nav h3 span。
若从左向右的匹配,过程是:从 .mod-nav 开始,遍历子节点 header 和子节点 div,然后各自向子节点遍历。在右侧 div 的分支中,最后遍历到叶子节点 a ,发现不符合规则,需要回溯到 ul 节点,再遍历下一个 li-a,假如有 1000 个 li,则这 1000 次的遍历与回溯会损失很多性能。
再看看从右至左的匹配:先找到所有的最右节点 span,对于每一个 span,向上寻找节点 h3,由 h3再向上寻找 class=mod-nav 的节点,最后找到根元素 html 则结束这个分支的遍历。
很明显,两种匹配规则的性能差别很大。之所以会差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。
当然这是比较明显情况,如果在叶子上存在多个不符合条件的 span,从右向左的规则也会走一些弯路(这时就需要优化 CSS 选择器了)。但平均来说它还是更高效,因为大多时候,一个 DOM 树中,符合匹配条件的节点(如 .mod-nav h3 span)远少于不符合条件的节点。

此段转载自:http://www.cnblogs.com/zhaodongyu/p/3341080.html 经过编辑及排版。


但是后来人们发现这种方式很不符合人类自然的思考方式,所以在建造 web 的时候更喜欢采用看起来比较有条理的更加像后端程序的层次结构方式命名,类似 #fuck .you a {...}

但是根据实践,大家发现这样基本是在 自high,因为别人在改 CSS 的时候是不会去看你写的 CSS 的,都是直接浏览器定位到位于哪一行,直接过去改代码块,反正一眼就能看懂。

其实不用纠结这些,CSS 的解析时间跟 js 执行时间相比就像 PHP 代码的运行时间和数据库、I/O运行时间对比一样,不是一个数量级,完全不用担心。

Amelie 接受了回答 · 2014-11-06

用图片背景代替文本时,为什么不推荐用 text-indent: -9999em?

$wider-than-any-screen * $approximate-em-value; 难道不是比 -9999em 还要大的负值?为什么你会说它默认情况下不使用此方法?

$hide-text-direction 这个变量的默认值就是 left,所以这就是默认的条件分支啊。

Amelie 提出了问题 · 2014-11-06

HTML5 的 hidden 属性和 css 的 display: none 有何区别?

都可以隐藏 html 的内容,那么正确的使用场景应该是怎样的呢?

<!DOCTYPE html>
<html>
<body>



<p hidden="hidden">这是一段隐藏的段落。</p>





<p>这是一段可见的段落。</p>



</body>
</html>

关注 6 回答 4

Amelie 赞了回答 · 2014-10-08

解决如何让 <ol> 从 0 开始计数

关注 0 回答 2

Amelie 赞了回答 · 2014-10-08

解决如何让 <ol> 从 0 开始计数

<ol start="0">
<li>item A</li>
<li>item B</li>
<li>item C</li>
</ol>

关注 0 回答 2

Amelie 提出了问题 · 2014-10-08

解决为什么 CSS 选择器解析的时候是从右往左?

这样的 CSS 样式 #nav ul li {...},浏览器渲染方式是 li -> ul -> #nav,所以效率低,可是为什么不从左往右找呢?

关注 4 回答 3

Amelie 提出了问题 · 2014-09-28

用图片背景代替文本时,为什么不推荐用 text-indent: -9999em?

在 Compass 看到 @mixin hide-text($direction) 的方法,默认情况不推荐使用负值的方式实现图片代替文本,这是为什么呢?

原文说明:
left is more robust, especially in older browsers. right seems have better runtime performance.
为什么用 right 性能会更好呢?

@mixin hide-text($direction: $hide-text-direction) {
  @if $direction == left {
    $approximate-em-value: 12px / 1em;
    $wider-than-any-screen: -9999em;
    text-indent: $wider-than-any-screen * $approximate-em-value;
    overflow: hidden;
    text-align: left;
  }
  @else {
    // slightly wider than the box prevents issues with inline-block elements
    text-indent: 110%;
    white-space: nowrap;
    overflow: hidden;
  }
  @include for-legacy-browsers((ie: "7"), $critical-usage-threshold) {
    //Text transform capitalize fixes text-replacement issue when used in a <button> element on ie7
    text-transform: capitalize;
  }
}

关注 1 回答 1

Amelie 接受了回答 · 2014-09-24

如何让 <ol> 从 0 开始计数

<ol start="0">
<li>item A</li>
<li>item B</li>
<li>item C</li>
</ol>

认证与成就

  • 获得 74 次点赞
  • 获得 101 枚徽章 获得 16 枚金徽章, 获得 41 枚银徽章, 获得 44 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2011-10-27
个人主页被 976 人浏览