最快的 CSS 选择器？

Question

鉴于我有一个弹出窗口，ID 为“popup”，其中有两个按钮，一个在左侧，一个在右侧，类为“popupbutton”，这些 css 规则中的哪一个最有效：

#popup a.popupbutton

#popup .popupbutton

a.popupbutton

.popupbutton

Answer 1

.popupbutton

上课会比较快。但是，当您深入了解它时，您可以为自己节省大约 20-50 毫秒的时间（这可能重要也可能无关紧要）。

有一个相当不错的测试，你可以在这里阅读它查看跨多个浏览器的 css 选择器速度的差异：http : //www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-选择器/

所有浏览器的平均减速时间为 50 毫秒，如果我们查看大型浏览器（IE 6&7、FF3），平均增量仅为 20 毫秒。对于当今 70% 或更多的用户来说，改进这些 CSS 选择器只会带来 20 毫秒的改进。

正如您从文章中看到的，选择器速度的差异非常小，并且这些测试针对非常强大的 DOM 示例。