浏览器如何进行CSS缓存，为什么只有.alert或.danger而不是.alert.danger？

Question

我读到了关于BEM & OBCSS 这里的文章，在某个地方作者提到了以下内容：

解耦选择器不仅将提高可维护性和可伸缩性:它将加快呈现速度。大多数web浏览器都在缓存初级选择器。.alert和.danger将被缓存，而不是.alert.danger！

尤其是浏览器是如何缓存这些规则的，为什么只有特性较低的规则？

我很好奇，因为我不知道浏览器实际上会缓存CSS规则。有人能给出一个关于CSS缓存的合理解释吗？

对于大量的CSS来说，速度值得注意吗？

Answer 1

我认为他指的是浏览器实现将元素的查找缓存为特定类的倾向。也就是说，它们保存了每个类的所有元素的列表。您经常会看到关于缓存选择器的注释，这是因为长选择器的性能原因。(通常只是告诉程序员不要在JQuery中多次查询相同的东西，如果代价很高的话)。这真的不是一个人需要考虑的东西，但在造型方面。当您在DOM中插入一个新节点时，查找速度相当快。

但是，根据页面的不同，它实际上可以通过Javascript查询引起注意。我编写了文档生成，比如使用大量重复类和查询复杂选择器的软件。我不小心在for循环中复制了相同的选择器，程序开始执行，直到我把它拉到了循环之外。必须使用一些常识，并理解选择器查找可能在幕后做一些工作，以匹配所有的元素。

我可以想象，如果CSS选择器没有在第一堂课上回忆录的话，那么它是出于记忆的原因而做的。存储与特定CSS规则匹配的所有元素的列表，并在添加和删除元素时跟踪它们，可能会占用小型设备上的大量内存和不必要的CPU。(如果查询次数不多，则可能获得很少的收益)。

而且，每个浏览器都可以在引擎盖下实现它想要的任何东西。MDN有本文:关于一些最佳实践的https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_高效率_CSS。其他浏览器也可能有自己的指南。