内联与包含的js和CSS？

Question

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

我可以想到三种选择：

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

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

另一方面，facebook似乎可以自动生成其css（它们的名称是base64编码的），但是可以发送到发送给用户的10多个不同的文件中，而且它们似乎并没有对其进行大量优化。 仅删除一些空格。

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

前两个利用了缓存的优势（第二个比第一个少一点），但是第二个只需要对服务器的三个请求，而第三个只需要一个来自服务器的get请求（忽略了我们可能拥有的少量映像）一些页面）。

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

唯一的目标是最大程度地减少用户的平均加载时间。 每个用户每天将在网站上花费大约100个页面加载，每天会看到大约40个CSS和JS文件。 CSS和JS基本上是静态内容。 它设置为缓存30天，如果文件使用/path/to/file.ext?md5-hash-of-file更改，我们将更改url。 此外，一切都将在所有可能的地方压缩。

编辑：

我认为我应该澄清为第二个发现的两个选项。 在整个网站上为CSS和JS使用单个文件是个好主意吗？ 它只会使用两个请求并删除任何双重（或七元组）缓存，因为单个功能位于两个或多个不同的组合js文件中，但是下载多达1MB的声音听起来并不好。

今天，它基本上是每个视图结合在一起的CSS，因此，每次您再次查看同一页面时，都会缓存内容。 但是，在多个页面上使用了一些js和CSS。

Answer 1

内联css和javascript将使您的页面变得沉重。将所有样式表和所有javascript文件合并为一个并将其包含到页面中是一种很好的做法。与内联样式相比，这会使您的页面非常快速。

Answer 2

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

但是，如果您希望经常性访问者 ，我建议您使用外部文件。 虽然第一次加载的速度较慢，但​​是您随后为这些资产添加了接近零的加载时间。 大多数网站都是这种情况。

Answer 3

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

正如其他人指出的那样，内联＃3表示无法缓存文件。 由于html的大小增加，它可能会减慢加载时间。 但是，您可以避免往返罚款。

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