Javascript 内联vs包括js和css？

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

我可以想出三个选择：

将所有js合并到一个文件，将所有css合并到一个文件

逐个链接所有css和js文件

内联一切

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

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

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

前两种方法利用了缓存（第二种方法比第一种方法稍微少一点），但第二种方法只需要向服务器发出三个请求，第三种方法只需要从服务器发出一个get请求（忽略某些页面上可能有的少量图像）

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

唯一的目标是最小化用户的平均加载时间。每个用户每天将在网站上花费大约100个页面负载，每天看到大约40个css和js文件。css和js基本上是静态内容。它设置为缓存30天，如果文件更改，我们将使用文件的

/path/to/file.ext？md5哈希更改url。而且，一切都尽可能地压缩

编辑：

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

如今，基本上每个视图都有一个组合css，因此每次您再次查看同一页面时，内容都会被缓存。但是，一些js和css在多个页面上使用。
链接到每个文件的#2的问题是，对于小元素，加载时间的最大因素是往返时间，而不是文件大小。建立连接以获取每个文件需要多次往返。这也意味着您应该组合css和js文件。在您的高延迟环境中，往返将特别痛苦

正如其他人指出的那样，#3，内联，意味着不能缓存文件。它可以降低加载速度，因为html的大小增加了。但是，您可以避免往返罚款

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

内联css和javascript会让你的页面变得如此沉重
练习将所有样式表和所有javascript文件合并到
一个，并将它们包含到您的页面中。这将使您的页面速度非常快
与内联样式相比

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

但是，如果您希望定期访问，我建议使用外部文件。虽然第一次加载会比较慢，但之后这些资源的加载时间接近于零。大多数网站都是这样。
1意味着发送的请求更少，但当您设置缓存头时，这并不重要。至于3，你的页面是动态生成的吗？如果是这样，它将不会被缓存，而将CSS/JS内联将是一个糟糕的主意。至于Android/iOS缓存文件与否，这将取决于这些文件的大小；交换掉主体，将内嵌js/css留在主体中。如果您经常刷新页面，两个缓存良好的外部URL通常表现最好。请记住，由于管道内衬的原因，2g上的两个50kb文件的传输速度通常比100kb文件快。但是，如果您有很多延迟，那么查找一个url可能比查找两个url更快。所有页面都是动态生成的，php，因此缓存根本不起作用。你知道缓存的文件大小是多少吗？ios以前的最高值是25kb/url，但那是在ios4中。我认为它在io6中基本上是无限的，允许每页最大10mb。此外，您仍然可以缓存生成的页面，只需使用expires标头和现有版本系统。内联Javascript是一个坏主意，因为解析问题。将源代码置于
之间的技巧都有缺点。（在本例中，
-->
可能是Javascript本身的一个有效序列。）它们自己的文件中的Javascript没有这些问题！