谷歌页的速度-什么做这些信息的意思吗?
-
05-07-2019 - |
题
我跑了谷歌页的速度Firefox扩展上的几页,和根据"有效CSS选择",它列出了各种各样的事情是效率低下在我CSS。
但是,一些消息似乎一点神秘的-什么做这些(以粗体)的意思是:
div#菜单h3。很快小
标签键2裔器和身份证过的合格标签和类过分的条件与标签表。数据tr:n-儿童(2n)td
标签键2裔选择和类过分的条件与标签表。数据tr。残疾td
标签键2裔选择和类过分的条件与标签和类过分的条件与标签
我假设他们认为裔选择都是坏的但是有很多的"过分限定"为好。我大概不会去的太多努力修复所有这些(有很多),但这将是很好的知道什么谷歌实际上意味着在这里!
解决方案
首先,我从来没有使用网页的速度,但是消息是不是隐秘的,如果你把一个二读它。
div#菜单h3。很快小
标签键2裔选择,并ID过与合格 标签和类过分的条件与 标记
标签键2裔选择: 许多小的标记你有,是不是包含在另一个标签类快?没有?CSS套将完全不必要的,在这种情况。
ID过分的条件与标签: #菜单不需要预先考虑与div。你很可能没有任何其他标签在你的标记与身份菜单(你不应该,其身份证!), 因此加上菜单div多余的。
类过分的条件与标签: .很快就不需要预先考虑与h3。你很可能没有任何其他标签在你的标记与类很快,其他比h3标签,所以加上.很快与h3是不必要的。
其他消息,请按照类似。
-斯蒂芬
其他提示
斯蒂芬所说的它很好。
原因他们举报你的选择是,CSS规则是匹配的正确的。
加上一个ID和一个元素(如在div#含量)是不必要的,因为将浏览器已经匹配的选择的时间到达"div".但是,浏览器仍然是强制,以评估。
后裔选择是昂贵的,因为将浏览器必须检查所有实例dom件中引用的右最简单的选择对所有可能的祖先。多后裔化合物的表现的刑罚。
这就是说,能增益的实现优化选择(在大多数情况下)是可以忽略不计。
它说,没有理由使用该标记,因为你得到的一类,所以你已经限制了它必须做额外的搜索。
例如:
div#menu h3.soon .small
这里没有任何理由开始div因为你只会看类小类很快在一个h3标签下html元素的与身份菜单。
他们都是表明这样的事情
#menu .soon .small {...}
甚至
#menu {...}
.soon {...}
.small {...}