所以我最近在使用Concrete5做了很多工作.但是,我注意到默认主题有许多CSS规则,其定义如下：

#page #central #sidebar p{line-height:24px}

由于“侧边栏”是一个ID,所以整个页面上应该只有一个“侧边栏”(假设它有效,我正在照顾它).因此,如果#sidebar位于#page #central中,则应始终位于#page #central中.无论.在每一页上.

通过这种逻辑,以下规则完全相同：

#sidebar p{line-height:24px}

测试这个,果然,它有效.所以我的问题是 – 哪个会有更好的表现？是否存在与速度相关的原因,即Concrete5团队采用更长的规范,还是仅仅是为了帮助未来的开发人员找到#sidebar div？在任何一种情况下,我都可以看到它的论点更快.

如果案例1更快(#page #central #sidebar)：

如果浏览器使用广度优先搜索算法来定位正确的DOM元素,那么找到#sidebar将涉及在到达第三层之前搜索具有子节点的每个DOM元素的第二层,此时它仍然具有多个元素它在查找#sidebar之前查看.通过以这种方式指定元素,广度优先搜索将识别#page并且知道它只需要继续在该元素内搜索,而不是继续整个DOM.

如果案例2更快(#sidebar)：

如果浏览器按照它编写的顺序搜索整个文档,而不是像树一样处理DOM,那么它将执行单个线性搜索而不是三个线性搜索.实际上,即使在最好的情况下,它足够聪明地识别先前找到的DOM元素的起点和终点(本质上是深度优先搜索),它仍然必须读取尽可能多的代码行.一个线性搜索 – 首先它会读到#page,然后它会从#page的开头开始读取,直到找到#center,然后它会从#center的开头读取,直到找到#sidebar.唯一的区别是从一个搜索切换到另一个搜索所涉及的微小开销