Question

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

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

Answer 1

浏览器将尝试加载每个样式表，当然如果它已经加载并缓存，那么它将不会再次下载（但它会解析它）。

我认为你不想把它放在你的母版页中，因为你有几个组件，每个组件都有自己的样式表（当你只使用几个组件时，你不想下载所有组件）。

性能影响应该非常小（在解析和再次应用相同的样式表时），但如果您执行以下操作之一：

您在多个样式表中修补CSS类（因为其他CSS的修补程序将被覆盖）;
你对样式表做了一些诡计（例如$("#linkId").attr("href", "/example.com/override.css");）;
以程序方式更改它们;
您依赖客户端LESS解析（使用type="text/less"）。

然后您可能希望避免替换（另请参阅jQuery: add dom element if it does not exist）：

<script type="text/javascript">
    if ($("link[href='/example.com/component.css']").length == 0)
        $("<link href='/example.com/component.css' rel='stylesheet'/>").appendTo("head");
</script>

另外，您可以使用id（而非使用href核对）。请注意，如果您经常这样做，那么您可以编写辅助函数。

Answer 2

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

我用“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 3

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

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

你可能更好地包括css文件一次，你也应该研究css捆绑和缩小。

Answer 4

如果您多次嵌入相同的样式表，那么它将逐个加载所有样式表，但前提是缓存已关闭。当缓存打开时，所有样式表都将从缓存中加载，这意味着您不必担心重新加载资源。

但是为什么要多次包含相同的样式表呢？

请在您的母版页中使用它。

Answer 5

你可以做一些事情。更改类型时，将一个类添加到主体。

class="user-one"
class="user-two"

这将允许您为每种用户类型编写自定义代码。

你也可以在CSS文件中添加MD5检查，因为这会强制它下载新的CSS。

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

5 个答案: