CSS 媒体查询：一个文件与单独的文件以及对加载速度的影响答案

【问题标题】：CSS media queries: one file vs. separate files and impact on loading speedCSS 媒体查询：一个文件与单独的文件以及对加载速度的影响
【发布时间】：2013-12-17 09:08:25
【问题描述】：

对于我目前使用 style.css 和一堆其他样式表、960.css 等的网站，加载如下：

<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="only screen and (max-width: 960px)" href="css/960.css">
....

现在我担心速度。我知道我可以将这些文件合并为一个大文件，但这意味着还要下载不相关的数据。

所以基本上，我的问题是：什么是更好的方法，最小化请求数量，或最小化传递给一个用户的数据量？

【问题讨论】：

什么样的无关数据？ HTTP 响应标头？
@BoltClock'saUnicorn 我的意思只是 css 标记，它不会被使用（你有一个 1280px 宽的屏幕，但是得到一个不必要的大文件，例如 5 个媒体查询）跨度>
不管你把媒体查询放在CSS还是link标签里，即使不使用它也会被加载。
如果此问题的任何答案对您有所帮助，请不要忘记投票和/或接受它们。如果您仍需要更多信息，请发表评论或更新问题。

标签： html css performance optimization bandwidth

【解决方案1】：

在合理的速度链接上，额外请求所涉及的延迟和开销可能会超过收益，因为不下载少量（希望已缩小和压缩）文本数据，但该用户不需要以该分辨率显示页面。请参阅 Ilya Grigorik 的 excellent post on latency，详细了解如何证明这是许多用户的主要性能限制。

额外数据的延迟成本对于使用移动设备的用户来说尤其如此（这将在不使用无线电时为他们的无线电省电），对于建立成本相对较高的移动 2G 或 3G 连接来说更是如此连接（4G 显然在这方面有了很大的改进）。

与所有这些事情一样，关键是测试和衡量——但我几乎可以肯定地认为，捆绑样式对您的用户来说会更快。不要忘记每个有效的样式表 (where the media query evaluates to true) 都会阻止页面的呈现。

还值得注意的是，Ilya（他为 Google 工作，所以应该知道）引用 WebKit 仍会下载返回 false 的样式表媒体查询，尽管优先级较低且处于非阻塞状态方式。

如果媒体查询的计算结果为 false，则样式表将被标记为 NonBlocking 并被赋予非常低的下载优先级

和

正如 Scott 所指出的，唯一需要注意的是，浏览器将下载所有启用的样式表，即使您设备上的屏幕可能永远不会超过 [引用] 宽度

简单地看一下 webkit 源，它似乎仍然会发生这种情况，大概是为了允许对屏幕旋转或窗口大小调整做出即时响应。

 // Load stylesheets that are not needed for the rendering immediately with low priority. 

223 ResourceLoadPriority priority = isActive ? ResourceLoadPriorityUnresolved : ResourceLoadPriorityVeryLow; 

224 CachedResourceRequest request(ResourceRequest(document().completeURL(url)), charset, priority); 

225 request.setInitiator(this); 

226 m_cachedSheet = document().cachedResourceLoader()->requestCSSStyleSheet(request);

对于此类问题，我强烈推荐High Performance Browser Networking，您可以免费在线阅读。

【讨论】：

我可能添加的唯一例外是有一个单独的“打印”样式表，现代浏览器在需要之前既不会下载也不会阻止它。打印通常是延迟的（用户发起的）操作，并且可能不会被大多数用户使用，因此额外的请求不会影响页面的初始呈现。不过，这个决定显然取决于内容的上下文。

【解决方案2】：

这基本上是关于你的系统的性能。

即使您使用的是移动设备，最好的方法也是尽量减少请求数量，因为（可能）网络连接速度较慢和（可能）资源处理速度较慢。除了您的页面在例如在科尔多瓦上下文中，这种方法将是可行的方法，因为资源直接安装在设备上。多个文件 => 多个句柄 => 缓慢（呃）性能。

如果您想最小化传递给用户的数据量 - 恕我直言，数量相同，因为标签将查询服务器上的 css 文件并解析/读取/下载它。恕我直言，没有相关的性能问题。您可以做的是生成和“非冗余”的 css 文件。但这不是小事:)

【讨论】：

【解决方案3】：

所以基本上，我的问题是：什么是更好的方法，最小化请求数量，或最小化传递给一个用户的数据量？

我会说两个。请注意，请求将被浏览器缓存，因此对于回访者来说，您的担忧是无关紧要的。一般来说，更少的数据 = 更快的下载时间。最好的方法是为用户提供最少量的数据。

【讨论】：