复制样式表对性能的影响

时间:2014-09-30 14:40:41

标签: html css web stylesheet

如果我有一个定义样式表的页面。为了论证,我们可以说这个样式表有超过4,000个规则。这是在HTML的头部定义的。

<link href="Styles/main.css" rel="stylesheet" />

让我们说一个控件在页面的某个位置添加一个指向同一样式表的链接。由于缓存(希望如此),浏览器应该意识到它不需要获取资源。但是,浏览器是否足够智能以转储重复的规则?或者我只是将元素规则检查的数量增加了一倍?

我知道所说的做法不是标准,应该避免。我希望看看是否有人对浏览器如何处理这种情况有任何见解。


我尝试了什么

在Chrome中,我创建了一个包含单个样式表资源的页面。然后我运行Speed Tracer并看到渲染时间为~0ms。然后我将样式表添加了一千次到页面转储缓存并重新加载。页面渲染时间跳至78毫秒。没什么了不起的,但是它会暗示浏览器会将每个样式表添加到规则列表中以检查每个元素。

0 个答案:

没有答案