未使用的CSS规则会怎样？

Question

我有一个style.css文件，网站上几乎每个组件都使用该文件中的规则，但并非总是如此，例如，我有一个主模板，然后有一个部分显示请求的页面，当然还有请求的页面有时包含的部分是唯一的（不在其他页面中），并使用style.css中的规则。

我的问题是当前页面未使用的css规则会如何处理？

我们假设有一个登录页面，并且在登录页面中有一个名为button_xyz的特殊按钮（仅存在于登录页面中）。此按钮的css规则位于style.css内-使用不需要此规则的页面时，此规则会发生什么情况？

它会占用额外的内存吗？
浏览器会为您优化吗？

Answer 1

未使用的CSS规则可能会使用一些额外的内存，但即使对于最弱的设备，其使用规模也不会很大。解析CSS也会花费一些额外的时间，但是花在您甚至无法衡量的水平上。

关于未使用的CSS规则的主要担心是浪费带宽，但是如果您在每个页面上只有很少的那部分会被闲置，我会说最好坚持将所有样式放在一个文件中并确保它由浏览器缓存。

除非CSS非常低效，否则不要担心带宽问题，前提是您的服务器将gzips文件发送给访问者。这些天来所使用的带宽确实不算什么。不会有太大的区别，但是您可能也有兴趣在缩小CSS以及HTML和JavaScript的同时对其进行缩小。

Answer 2

未使用的CSS规则将成为访问您网站的用户的负担。 因为用户首次访问您的网站将在将其缓存在Web浏览器中之后下载您的所有CSS和JavaScript。如果有很多未使用的CSS，它的大小将变大

Answer 3

Css根据正则表达式匹配您的规则。您的浏览器中有一个数据库用于完全匹配，其中某种哈希表可将名称A与名称B完全匹配，并且由于CSS支持正则表达式，因此如果提供了正则表达式，它也可以使用while循环进行搜索。对于ApplyToAll又名* {，这也是某种类似于哈希表的优化，它对网站上的所有内容都应用了规则。因此，如果您没有正则表达式，并且因为在样式表中它们编写起来很复杂，您的网站也不会变慢。