浏览器会在同一页面上多次加载css文件吗？

Question

我正在asp.net上开展一个大型项目.我喜欢通过用户控件将它分开,所以我想知道在用户控件代码中而不是在母版页头中加载css是否可以？

有可能,其中一些控件会在一个页面上多次出现,因此会有重复的样式标记,浏览器会重新加载它们还是只是忽略那种情况？

Answer 1

所以这是一个好问题，所以我决定测试一下。

我制作了一个带有“test”类的单个 div 的页面，并制作了两个 CSS 文件（1.css 和 2.css）。第一个定义的测试具有红色背景，第二个定义的测试具有蓝色背景。

当将它们包括为

1.css
2.css
div

div 正如您所期望的那样并显示为蓝色。但！当包含为

1.css
2.css
div
1.css

div 变成红色。

所以是的，浏览器将重新评估样式，即使它没有启动另一个对 1​​.css 的请求并且只是使用了缓存的版本。

在 Firefox Nightly 43.0a 上测试

Answer 2

浏览器将加载两倍的 css 文件，但在第二次它可能会被缓存，所以它会快得多。

问题是，加载文件并不是这里唯一的开销，因为浏览器还需要重新解析 css 文件，并重新迭代 DOM 树，以检查其中的任何节点是否与新的选择器匹配，然后应用它们。

您可能最好包含一次 css 文件，并且您还应该研究 css 捆绑和缩小。