html - CSS媒体查询: one file vs.分离文件及对加载速度的影响

Question

对于我目前使用 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"​>
....

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

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

Answer 1

在合理的速度链接上，额外请求中涉及的延迟和开销可能会超过不下载少量(希望缩小和 gzip 压缩)文本数据的 yield ，而这些文本数据对于该用户来说仍然不需要以该分辨率显示页面。参见 Ilya Grigorik 的 excellent post on latency有关这如何被证明是许多用户的主要性能限制的更多详细信息。

额外数据的延迟成本对于使用移动设备的用户尤其如此(移动设备在不使用时会节省 radio 的电量)，对于建立成本相对较高的移动 2G 或 3G 连接更是如此连接(4G 显然大大改善了这一点)。

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

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

if the media query evaluates to false then the stylesheet is marked as NonBlocking and is given a very low download priority

和

The only caveat, as Scott indicates, is that the browser will download all enabled stylesheets, even though the screen on your device may not ever exceed the [cited] width

简要查看 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您可以免费在线阅读。