通过并行CSS下载提高网站性能？

我正在优化网站的页面加载时间。一种方法是将CSS的多个HTTP请求合并为一个合并的HTTP请求。但是其中一位审阅者提出了一个有趣的问题：将多个CSS文件的下载并发会不会减少页面加载时间？

我从来没有考虑过这个选项，因为我在互联网上读到的唯一一件事就是减少（阻止）HTTP请求的数量是加快网页速度的关键（尽管Google Pagespeed Insights似乎并未明确指出这一点1）。

我看到了为什么并行化不会提高性能或仅影响很小的几个原因（被使用更少的HTTP请求所带来的好处所抵消）：

设置新连接非常昂贵。虽然可以并行设置多个连接，但浏览器最多使用约4-6个连接（取决于浏览器），因此并行下载CSS会阻止下载其他资源，例如JavaScript和图像。
设置HTTPS连接需要一些额外的数据。我读过这很容易就是几KB的数据。这是一些额外的数据，必须通过网络发送，而不是我们实际要发送的CSS。
由于使用了TCP慢启动算法，因此通过连接发送的数据越多，连接速度就越快。因此，寿命更长的连接实际上将比新连接更快地发送数据。例如，请参阅SPDY协议，该协议使用单个连接来缩短页面加载时间。
TCP是一种抽象：通常只有一个基础连接。因此，当使用多个请求时，通过有线发送的数据可能不一定会完全受益于多个连接以提高速度。
Internet连接本质上是不可靠的，尤其是在移动设备上。一个请求的完成速度可能比另一个请求快得多。对CSS使用多个请求意味着渲染网页直到最后一个请求完成才被阻止，这可能比平均连接时间晚很多。

因此，并行处理CSS文件的HTTP请求是否有任何好处？

注意/更新：所有CSS文件都被渲染阻止。尚未移出关键路径的CSS文件。

css performance

— 艾克
source

我在etsy的代码网站上看到了一些东西，他们建议仅对静态对象（css，imgs，js）使用单个无cookie域。事实证明，现代浏览器在从单个域进行并行下载方面表现出色。至于来自同一域的多个文件（10个CSS文件与1个大文件），我认为您最好合并并缩小一个大文件，然后仅提出一个请求。特别是在CSS上，您的网站可能需要所有CSS才能看起来正确。

— 2014年

在某种程度上，浏览器已经根据可使用的连接数量并行下载。它基于浏览器正在读取的HTML。

— 太阳

从HTML文档链接的CSS文件在解析HTML时被添加到并行下载队列中。关键是非异步JavaScript链接会阻止HTML解析器，从而阻止以后的标签添加到下载队列中，直到JavaScript被下载，解析和执行为止。^[1]

这是一个示例，该示例强制浏览器依次下载四个文件中的三个（至少三个往返）：

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

这是修改后的示例，因此所有4个文件都并行下载（至少一个往返）：

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

另一个注意事项：CSS文件（默认情况下）是渲染阻止，而不是解析器阻止；该页面将继续被解析并构建DOM，但是直到CSSOM被构建后，渲染才会开始。

拆分CSS的主要原因是获得将上述首映内容呈现给客户端并尽快进行解析所需的最少规则。其余规则（对于那些不立即可见的事物）可以通过media链接标记中的查询标记为不必要的渲染阻止，或者通过异步加载的JavaScript添加到页面中。

因此，仅出于自身原因，并行化CSS下载没有明显的好处。但是，与往常一样，进行测量和测试！

为了进一步阅读，我建议在Google的“网络基础知识：优化性能”中找到以下文章：https：//developers.google.com/web/fundamentals/performance/

[1]：这忽略了某些浏览器的推测性解析功能：

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=zh-CN&forcehl=1

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— 罗伯特·贝尔
source

另一个好读，如何保持你的脚本同时下载，是在这里：stackoverflow.com/questions/436411/...

— joshreesjones

值得注意的是，所有.js文件都应在代码结尾处紧接在body标记之前链接，这样它们就不会阻塞任何内容。

— 沙利2014年

您能否详细说明“因此，仅出于自身原因并行化CSS下载没有明显的好处”？我不知从上面的答案

— 中看

@ gaurav5430似乎没有很好的理由来分割css文件，除了针对上述渲染时间进行优化（也许还优化缓存）？

— Robert K. Bell