CSS选择器性能问题

我注意到，如果我们在一个选择器中长时间选择DOM的树，transitions滞后。CSS选择器性能问题

像：

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

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

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

它工作正常，并没有落后。这是真的还是问题是我的文档设置？

来源

2013-02-15 Muhammad Talha Akbar

在所有情况下99.9％的情况下，ID左边的任何内容都应该被删除。 – 2013-02-15 13:01:16

关于CSS效率的帖子：http://css-tricks.com/efficiently-rendering-css/ – ashley 2013-02-15 13:05:07

@ashley我会读它的;） – 2013-02-15 13:05:31

CSS3的效果，包括过渡，动画，文字阴影等基于浏览器，一些GPU上会留下动画，如果GPU性能不是最佳的，它将会延迟您的动画。如果浏览器不使用GPU，他们会把它留在CPU上，这将是最糟糕的，所以如果它滞后它可能是GPU或CPU，而不是DOM，很明显，如果你有太多的嵌套类规则会痛的浏览器解析，并命中的表现，所以要避免在你的CSS太多的嵌套规则

镀铬处理这些如果你想我使用大量动画中的一个相比于火狐

优于project我用firefox和chrome打开它，看到区别，firefox会吸走你CPU的所有电源，而chrome会处理它很正常

来源

2013-02-15 13:01:47

嗯，而不是回答。我喜欢你的网站男人。 – 2013-02-15 13:09:28

@AspiringAqib hahaha只是看看两个浏览器的区别，并保持你的任务管理器开放 – 2013-02-15 13:10:29

我不需要通过ALT + CTRL + DELETE打开任务管理器，我的Lappy已经开始尖叫，当我用Firefox打开你的网站时。 – 2013-02-15 13:11:56

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

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

来源

2013-02-15 13:12:20 jerone

CSS选择器性能问题

回答

相关问题