内联JS和CSS与包含JS和CSS有何区别？

Question

在2G移动连接下至少500毫秒的延迟环境中（~0.1mbps），向客户端发送大约10kb的css和js的最快、最有效的方法是什么？服务器上大约有5-10个文件。我可以想到三个选项：

1. 将所有js合并到一个文件中，将所有css合并到一个文件中
2. 依次链接所有css和js文件
3. 内联所有内容

我知道Google使用内联，但那可能只是为了节省服务器套接字。他们甚至通过以无状态模式运行来节省RAM - 他们相信客户端会记住会话。服务器功率根本不是问题。

另一方面，Facebook似乎自动生成他们的CSS（它们的名称是base64编码的），但是分成多达10个不同的文件发送给用户，而且他们甚至没有对其进行过多的优化；只删除部分空格。

我已经通过函数传递了所有文件进行压缩，因此这些操作都可行。我不想选择第一个选择，因为它更容易。

前两个选项利用缓存（第二个选项比第一个选项少一点），但第二个选项仅需要向服务器发出三个请求，第三个选项仅需要向服务器发出一个获取请求（忽略我们在某些页面上可能拥有的少量图像）。

Android / iOS是否跨浏览器重启缓存js和css？如果没有，那么内联听起来更好。

唯一的目标是最小化用户的平均加载时间。每个用户每天将在该网站上花费约100个页面加载时间，每天查看约40个css和js文件。 CSS和JS基本上是静态内容。它设置为缓存30天，并且如果文件发生更改，则使用/ path / to / file.ext? md5-hash-of-file更改url。此外，只要可能，就对所有内容进行了gzip。

编辑：

我认为我应该澄清第二个选项中发现的两个选项。在整个网站范围内使用单个文件来保存CSS和JS是否是一个好主意？这只需要两个请求，并删除任何重复（或七重）缓存，因为某个函数位于不同的合并JS文件中的两个或多个文件中，但下载高达1MB的内容听起来并不好。

今天基本上每个视图都有一个组合的CSS，因此每次您再次查看相同的页面时，内容都会被缓存。然而，某些JS和CSS在多个页面上使用。

- Filip Haglund

---

1 表示发送的请求较少，但由于您设置了缓存标头，这不应该有太大影响。至于 3，您的页面是否是动态生成的？如果是，则无法缓存，并且内联 CSS/JS 将是一个可怕的想法。至于 Android/iOS 是否缓存文件，这将取决于这些文件的大小。 - Fabrício Matté

所有页面都是通过PHP动态生成的，因此缓存根本不起作用。你有没有想过缓存的文件大小是多少？ - Filip Haglund

iOS曾经在iOS4时期限制每个URL的大小为25KB，但我认为在iOS6中基本上是无限制的，允许每个页面最大10MB。此外，您仍然可以缓存生成的页面，只需使用过期标头和现有版本系统即可。 - dandavis

最快、最有效的方法是一次性发送所有内容。第一次加载体验可能不太好，但当你说“唯一的目标是尽量减少用户的平均加载时间”时，你已经决定这里并不重要。 - Henrik

@HenrikHelmers，我怎样才能确保所有浏览器实际上缓存了资源，并且它们的缓存在下次访问之前不会被重置？用户将至少每4天访问该网站。 - Filip Haglund

Answer 1

这取决于使用情况。对于仅有一次访问者的页面，我建议将所有内容嵌入其中。这样可以实现更快的初始加载（与多个请求相比只有一个请求），易于使用。这适用于登陆页面、帮助页面、向导和类似的一次性页面。

但是，如果您期望有经常访问者，我建议使用外部文件。虽然第一次加载会慢一些，但之后加载这些资源的时间几乎为零。这适用于大多数网站。

- Francisco Presencia

Answer 2

内联的CSS和JavaScript会使您的页面变得很重。将所有样式表和JavaScript文件合并为一个文件，并将其包含在页面中是一种非常好的做法。这将使您的页面比内联样式更快。

- JA9

Answer 3

#2的问题在于，链接到每个文件的最大因素是加载时间，而不是文件大小。为了获取每个文件，需要进行多次往返传输以建立连接。这也意味着您应该合并CSS和JS文件。在高延迟环境中，往返传输将特别痛苦。这里是Google关于往返传输的建议

正如其他人指出的那样，#3的内联意味着文件无法缓存。它可能会因HTML的增加大小而减慢加载时间。但是，您可以避免往返传输的惩罚。

在您的环境中，我还建议查看HTML5应用程序缓存以优化CSS和JS文件的缓存。您需要将应用程序转换为使用AJAX调用而不是加载HTML页面，但这也减少了所需的数据传输。

- JC Hulce