8

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

我可以想到三个选项：

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

我知道谷歌使用内联，但这可能只是为了保存服务器套接字。他们甚至通过在无状态模式下运行来节省内存——他们相信客户端会为他们记住会话。服务器电源根本不是问题。

另一方面，facebook 似乎会自动生成他们的 css（他们的名字是 base64 编码的），但是会生成超过 10 个不同的文件发送给用户，而且他们似乎甚至没有对其进行大量优化；只有一些空格删除。

我已经通过一个压缩所有文件的函数传递所有文件，所以其中任何一个都是可行的。我不想选择第一个替代方案，因为它更容易。

前两个利用缓存（第二个比第一个少一点），但第二个只需要向服务器发出三个请求，第三个只需要来自服务器的一个 get 请求（忽略我们可能拥有的少数图像）一些页面）。

Android / iOS 是否在浏览器重启时缓存 js 和 css？如果不是，那么 inline 听起来更好。

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

编辑：

我想我应该澄清我为第二个找到的两个选项。在整个站点中为 css 和 js 使用单个文件是个好主意吗？它只会使用两个请求并删除任何双重（或七重）缓存，因为单个函数位于两个或多个不同的组合 js 文件中，但最大 1MB 的下载听起来并不那么好。

今天它基本上是每个视图一个组合的 css，所以每次你再次查看同一个页面时，内容都会被缓存。但是，一些 js 和 css 用在不止一个页面上。

4

3 回答 3

2

这真的取决于使用情况。对于只有一次访问者的页面，我建议内联所有内容。这使得初始加载速度更快（单个请求与多个请求）并且更易于使用。登陆页面、帮助页面、向导和类似的一次性页面就是这种情况。

但是，如果您期望经常访问者，我建议您使用外部文件。虽然第一次加载会比较慢，但之后这些资产的加载时间接近于零。大多数网站都是这种情况。

于 2014-11-23T16:46:12.740 回答
1

内联 css 和 javascript 将使您的页面如此繁重。将所有样式表和所有 javascript 文件合并为一个并将它们包含到您的页面中是一种非常好的做法。与内联样式相比，这将使您的页面非常快。

于 2013-08-02T10:51:32.193 回答
0

#2 链接到每个文件的问题在于，小元素加载时间的最大因素是往返时间，而不是文件大小。建立连接以获取每个文件需要多次往返。这也意味着您应该结合您的 css 和 js 文件。在您的高延迟环境中，往返会特别痛苦。这是谷歌关于往返旅行的建议

正如其他人指出的那样，#3，内联，意味着文件不能被缓存。由于 html 的大小增加，它可以减慢加载时间。但是，您可以避免往返罚款。

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

于 2013-07-15T22:45:26.363 回答