html - CSS 链接性能

Question

我不知道链接是否是正确的术语。
我谈论这样的编码：

    html > body > div > ul > li > a{
        /*css*/
    }

我和我的一个朋友谈过，他告诉我，像这样编写 css 在渲染 css 时会导致浏览器性能下降。
那么这是真的还是我真的应该只声明类/ID并指定它们？

score 7 · Accepted Answer

您应该尽可能具体，以便定位您的元素。最好使用 id。

但最终——这种微优化是相当无关紧要的。只有在您优化了几乎所有其他内容（压缩图像、提供静态内容、使用 css 精灵、最小化资产等）后才值得一看

score 3 · Accepted Answer

在我看来，您应该使用最少数量的选择规则。规则越多，处理时间就越长。

所以是的，使用类和 ID 是更好的做法。

同样是您上面给出的示例，如果您尝试将 CSS 应用于所有标签，则只需

a {
/* css */
}

score 2 · Accepted Answer

浏览器从右到左读取 CSS，这意味着在您的示例中，浏览器将查找 all <a>，然后查找 parent <li>，直到找到<html>.

所以对于性能来说是的，这种写作风格对性能不利。

score 1 · Accepted Answer

If you only want to apply to an element within a certain element, you can try something like this:

#ullID li{ ... }

By doing so, you set the styles for the li tags within the #ullID element. If you want to go even deeper, you can do it like so:

#ullID li a{ ... }

I'd say this will be faster performance wise in contrary to using:

 html > body > div > ul > li > a{ ... }

Hope this helps :)

score 1 · Accepted Answer

这是选择器优化的粗略近似：

这是在谈论 SEO 时要记住的事情。这并不意味着您必须忘记所有这些而只使用类和 id。问题是，当您说div #child ul li a img浏览器首先查看和 img 时，然后查看它是否有一个有a父级的li父级，依此类推。

5 回答 5