ste*_*esu 5 css performance dom css-selectors
所以我最近在使用Concrete5做了很多工作.但是,我注意到默认主题有许多 CSS规则,其定义如下:
#page #central #sidebar p{line-height:24px}
由于"侧边栏"是一个ID,所以整个页面上应该只有一个"侧边栏"(假设它有效,我正在照顾它).因此如果#sidebar在#page #central,它应该总是在#page #central.无论.在每一页上.
通过这种逻辑,以下规则完全相同:
#sidebar p{line-height:24px}
测试这个,果然,它有效.所以我的问题是 - 哪个会有更好的表现？是否存在与速度相关的原因,即Concrete5团队采用更长的规范,还是仅仅是为了帮助未来的开发人员找到#sidebardiv？在任何一种情况下,我都可以看到它的论点更快.
如果案例1更快(#page #central #sidebar):
如果浏览器使用广度优先搜索算法来找到合适的DOM元素然后找到#sidebar将涉及搜索的第二梯队EVERY则达到了第三层之前,此时它仍然有几个要素,它看起来是有孩子的DOM元素在找到之前#sidebar.通过以这种方式指定元素,广度优先搜索将识别#page并知道它只需要继续在该元素内搜索,而不是继续整个DOM.
如果案例2更快(#sidebar):
如果浏览器按照它编写的顺序搜索整个文档,而不是像树一样处理DOM,那么它将执行单个线性搜索而不是三个线性搜索.事实上,即使在最好的情况下它是足够聪明的认识的开始和结束点以前发现的DOM元素(主要是深度优先搜索),它仍然要读取的代码只是尽可能多线一个线性搜索 - 首先它会一直读到它找到#page,然后它会从它的开始开始读取#page直到它找到#center,然后它会从它的开始读取#center直到它找到#sidebar.唯一的区别是从一个搜索切换到另一个搜索所涉及的微小开销
简而言之：你使用的东西越多，解析的速度就越慢。
ID 始终是唯一的，因此您应该只使用一个；但即使使用类，指定任何其他元素或条件也总是会变慢。
http://css-tricks.com/efficiently-rendering-css/
那篇文章更深入地探讨了您所问的问题。