如何解决CSS优化,嵌套选择器以及ID /类名的浏览器索引
|| 在渲染网页和应用样式时,浏览器会为ID和类名编制索引以进行有效搜索,还是在每次指定ID或类名以到达正确的元素时从顶部遍历整个DOM。 我想知道出于优化的原因,是否值得给浏览器提示(较长的选择器)某个ID的对象在哪里。即#container #one-of-many-container-siblings #my-id
代替:
#my-id
如果DOM很大,前者会产生更好的性能吗?
解决方法
实际上,它的工作方式与您的想法相反。
请记住,浏览器从右到左解析CSS选择器。
这个:
#container #one-of-many-container-siblings #my-id
将会比此采取更多步骤进行匹配:
#my-id
请参阅:http://www.css-101.org/descendant-selector/go_fetch_yourself.php
考虑到您刚刚提出的问题,建议您阅读以下文章:
http://css-tricks.com/ficiently-rendering-css/
这将帮助您编写更有效的选择器:
#main-navigation { } /* ID (Fastest) */
body.home #page-wrap { } /* ID */
.main-navigation { } /* Class */
ul li a.current { } /* Class *
ul { } /* Tag */
ul li a { } /* Tag */
* { } /* Universal (Slowest) */
#content [title=\'home\'] /* Universal */
, HTML / CSS中ID的定义是元素的单个实例。假设您遵循该规则,那么您所需要做的就是该元素的ID。浏览器将搜索并找到该元素并停止。
使用您的“提示”,它将首先搜索第一个项目,然后搜索第二个,然后搜索第三个项目,然后再停止。您可能会看到,这效率更低。
在处理类时,这可能会变得更加模糊和模糊,但是一般规则是选择器越少越好。如果您发现自己做了三个或四个或五个选择器,则可能值得考虑进行一些重构,例如在战略性的位置添加类或ID,或者甚至不对CSS选择器如此具体。
, 使用较短的版本将总是更快,因为执行的检查较少,但是我不知道为什么需要对页面上的CSS进行优化。
, 根据经验,最好使用2个或更少的选择器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。