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

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

额外数据的延迟成本对于移动设备上的用户尤其如此（在不使用时将节省其无线电），甚至在建立成本相对较高的移动2G或3G连接上更是如此连接（显然4G显着改善了这一点）。

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

同样值得注意的是，Ilya（谷歌如此应该知道）引用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，您可以免费在线阅读。

Answer 2

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

即使你在移动设备上，最好的方法是最小化请求数量，因为（可能）网络连接速度慢（可能）资源处理缓慢。除了您的页面，例如在cordova环境中，这种方法将成为可行的方法，因为资源直接安装在设备上。多个文件=＆gt;多个句柄=＆gt;慢（呃）表现。

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

Answer 3

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

我会说两个。请注意，请求将由浏览器缓存，因此对于回访者而言，您的疑虑无关紧要。通常，较少的数据=更快的下载时间。最好的方法是为用户提供最少量的数据。

CSS媒体查询：一个文件与单独的文件，并影响加载速度

3 个答案: