改进Javascript加载时间 - 连接与多个+缓存

Question

我想知道以下哪一项会为一个加载大量javascript(jQuery + jQuery UI +各种其他javascript文件)的页面带来更好的性能.我已经浏览了大部分YSlow和Google Page Speed的内容,但我对某个特定细节感到疑惑.

对我来说,一个关键的问题是,我正在研究的网站不在公共网络上; 它是一个企业对企业平台,几乎所有用户都是重复访问者(因此有数据缓存,这是YSlow假设的,对于大量访问者来说不是这种情况).

首先,YSlow等工具推荐的标准方法是连接它,压缩它,并在页面末尾加载的单个文件中提供它.这种方法听起来相当有效,但我认为这里推理的一个关键部分是提高没有缓存数据的用户的性能.

我目前拥有的系统是这样的

• 所有javascript文件都在页面底部压缩和加载
• 所有javascript文件都有很长的未来缓存到期日期,因此将在缓存中保留(对于大多数用户)很长一段时间
• Pages只加载他们需要的javascript文件,而不是加载一个单片文件,其中大部分都不是必需的

现在,我的理解是,如果尚未达到javascript文件的缓存过期日期,则立即使用缓存版本; 根本没有向服务器发送HTTP请求.如果这是正确的,我会假设有多个标签不会导致任何性能损失,因为我仍然没有在大多数页面上有任何额外的请求(从上面回忆几乎所有用户都有填充的缓存).

除此之外,不加载JS意味着浏览器不必解释或执行它不需要的所有额外代码; 作为一个B2B应用程序,我们的大多数用户不幸遇到了IE6及其痛苦的JS引擎.

另一个好处是,当代码更改时,只需要再次获取受影响的文件,而不是整个集(被授予,只需要获取一次,因此这不是一个好处).

我也在考虑使用LabJS来允许在没有缓存的情况下并行加载JS.

具体问题

• 如果有很多标签,但所有文件都是从本地缓存加载的,并且总体上加载的javascript较少,这比一个也从缓存加载的标签要快,但包含所有需要的javascript在网站上,而不是一个适当的子集？
• 还有其他理由偏爱一个吗？
• 类似的想法是否适用于CSS？(我目前正在使用更加单一的CSS方法)

Answer 1

我想说最重要的是对速度的感知.

首先要考虑的是,没有双赢的公式,而是一个javascript文件增长到可以(并且应该)拆分的大小的阈值.

GWT 使用它,他们称之为DFN(Dead-for-now)代码.这里没什么魔力.您只需手动定义何时需要一段新代码,如果用户需要,只需调用该文件即可.

你何时何地需要它？
基准.Chrome有一个很棒的基准测试工具.广泛使用它.看看是否只有一个小的javascript文件将大大改善该特定页面的加载.如果确实如此,请开始DFNing您的代码.

除此之外,一切都与感知有关.

不要让内容跳跃!
如果您的页面有图像,请预先设置其宽度和高度.由于页面将加载位于它们应该位于的位置的元素,因此将没有内容拟合并且调整用户对速度的感知将增加.

推迟javascript!
在执行javascript之前,所有主要库都可以等待页面加载.用它.jQuery是这样的$(document).ready(function(){ ... }).它不会等待解析代码,但会使解析后的代码准确触发.页面加载后,图像加载前.

需要考虑的重要事项:

1. 确保客户端缓存js文件(所有其他文件与此文件相比都很短)
2. 使用Closure Compiler编译代码
3. 缩小你的代码 ; 它比Gziping快(两端)

Apache缓存的例子:

// Set up caching on media files for 1 month
<FilesMatch "\.(gif|jpg|jpeg|png|swf|js|css)$">
    ExpiresDefault A2629744
    Header append Cache-Control "public, proxy-revalidate"
    Header append Vary "Accept-Encoding: *"
</FilesMatch>

Apache缩减的例子:

// compresses all files for faster transfer
LoadModule deflate_module modules/mod_deflate.so
AddOutputFilterByType DEFLATE text/html text/plain text/xml font/opentype font/truetype font/woff
<FilesMatch "\.(js|css|html|htm|php|xml)$">
   SetOutputFilter DEFLATE
</FilesMatch>

最后,也许最不重要的是,从无cookie的域中提供您的Javascript.

并且为了让你的问题成为焦点,请记住,当你有DFN代码时,你会有几个较小的javascript文件,正好被拆分,没有压缩级别Closure可以给你一个单独的.在这种情况下,各部分的总和不等于整体.

希望能帮助到你!