内联VS包括JS和CSS?

在2G移动连接(〜0.1Mbps)至less有500毫秒延迟的环境中,在服务器的大约5-10个文件中向客户端发送大约10kb的css和js的最快和最有效的方式是什么?

我可以想到三个select:

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

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

另一方面,Facebook似乎自动生成他们的CSS(他们的名字是base64编码),但超过10个不同的文件发送给用户,他们似乎甚至没有大量优化它; 只有一些空白删除。

我已经通过一个函数来压缩所有文件,所以这些都是可行的。 我不想select第一个select,因为它更容易。

前两个利用caching(第二个比第一个小),但第二个只需要三个请求到服务器,第三个只需要一个来自服务器的请求(忽略我们可能有的几个图像一些页面)。

Android / iOS是否跨浏览器重启cachingjs和css? 如果没有,那么内联听起来更好。

唯一的目标是最小化用户的平均加载时间。 每个用户每天将花费大约100页的网页加载量,每天查看大约40个CSS和js文件。 CSS和JS基本上是静态的内容。 它被设置为caching30天,如果使用/path/to/file.ext?md5-hash-of-file更改文件,则更改url。 另外,一切都尽可能gzipped。

编辑:

我想我应该澄清我find的第二个选项的两个选项。 在整个站点上使用单个文件用于CSS和js是一个好主意吗? 它只会使用两个请求,并删除任何双(或七段)caching,因为一个function是在两个或两个以上不同的组合js文件,但下载高达1MB听起来不太好。

今天,它基本上是每个视图的一个组合的CSS,所以每次你再次查看同一页时,内容被caching。 但是,一些js和css被用在多个页面上。

Solutions Collecting From Web of "内联VS包括JS和CSS?"

内联CSS和JavaScript将使您的页面如此沉重。您可以将所有样式表和所有JavaScript文件合并到一个页面中,并将它们包含到您的页面中,这将使您的页面与内联样式相比非常快。

这真的取决于使用情况。 对于只有一次访问者的页面,我会推荐内联一切。 这使得初始加载速度更快(单个请求vs多个请求)并且更容易处理。 登陆页面,帮助页面,向导和类似的一次性页面就是这种情况。

但是,如果您期待重复的访问者 ,我build议使用外部文件。 虽然第一次加载速度会比较慢,但是这些资产的加载时间接近于零。 大多数网站都是这种情况。

与#2链接到每个文件的问题是,小元素加载时间的最大因素是往返时间,而不是文件大小。 它需要几次往返设置连接才能获取每个文件。 这也意味着你应该结合你的CSS和JS文件。 在您的高延迟环境中,往返将特别痛苦。 这里是谷歌的来回的build议

正如其他人所指出的那样,#3,内联意味着文件不能被caching。 它可以减慢加载时间,因为HTML的大小增加。 但是,你避免了往返罚款。

在您的环境中,我还build议查看HTML5应用程序caching以优化css和js文件的caching。 您将需要转换您的应用程序使用AJAX调用,而不是加载HTML页面,但这样做也减less了所需的数据传输。