css - CSS 选择器性能问题

Question

我注意到transitions如果我们长期在一个选择器中选择 DOM 树，就会出现滞后。

像：

#wrapper #content #box-container #boxer .box:hover .transition { 
    /* styles here */
}

否则，如果我使用这样的选择器：

.box:hover .transition {
    /* styles here */
}

它工作正常，不会滞后。这是真的还是我的文件设置问题？

Answer 1

一个 ID 应该在一个页面上只存在一次，所以这就足够了：

#boxer .box:hover .transition { 
    /* styles here */
}

Answer 2

CSS3 效果，包括过渡、动画、文本阴影等，是基于浏览器的，如果 GPU 性能不是最佳，一些动画会留在 GPU 上，这将滞后于你的动画。如果浏览器不使用 GPU，他们会把它留在 CPU 上，这将是最糟糕的，所以如果它滞后，它可能是 GPU 或 CPU 而不是 DOM，显然，如果你有太多嵌套类规则它浏览器解析会很痛苦，也会影响性能，因此请避免 CSS 中的嵌套规则过多

与 Firefox 相比，Chrome 处理这些问题的能力更好

如果您希望我在我制作的一个项目中使用繁重的动画，请使用 firefox 和 chrome 打开它并查看差异，firefox 会耗尽您 CPU 的所有功能，而 chrome 会处理它很正常