改进Javascript加载时间 - 连接与多个+缓存 [英] Improving Javascript Load Times - Concatenation vs Many + Cache
问题描述
我想知道以下哪一项会为加载大量javascript（jQuery + jQuery UI +各种其他javascript文件）的页面带来更好的性能。我已经浏览了大部分YSlow和Google Page Speed的内容，但我对这个特定的细节感到疑惑。
I'm wondering which of the following is going to result in better performance for a page which loads a large amount of javascript (jQuery + jQuery UI + various other javascript files). I have gone through most of the YSlow and Google Page Speed stuff, but am left wondering about a particular detail.
这里的关键是我的网站工作不在公共网络上;它是一个企业对企业平台，几乎所有用户都是重复访问者（因此有数据缓存，这是YSlow认为不会出现大量访问者的情况）。
A key thing for me here is that the site I'm working on is not on the public net; it's a business to business platform where almost all users are repeat visitors (and therefore with caches of the data, which is something that YSlow assumes will not be the case for a large number of visitors).
首先，YSlow等工具推荐的标准方法是连接它，压缩它，并在页面末尾加载的单个文件中提供它。这种方法听起来相当有效，但我认为这里推理的一个关键部分是提高没有缓存数据的用户的性能。
First up, the standard approach recommended by tools such as YSlow is to concatenate it, compress it, and serve it up in a single file loaded at the end of your page. This approach sounds reasonably effective, but I think that a key part of the reasoning here is to improve performance for users without cached data.
我目前拥有的系统类似于这个
The system I currently have is something like this
- 所有javascript文件都在页面底部压缩和加载
- 所有javascript文件有很长的未来缓存到期日期，因此将在缓存中保留很长时间（对于大多数用户）
- 页面只加载他们需要的javascript文件，而不是加载一个单片文件，其中大部分都不是必需的
现在，我的理解是，如果尚未达到javascript文件的缓存过期日期，然后立即使用缓存版本;根本没有向服务器发送HTTP请求。如果这是正确的，我会假设有多个标签不会导致任何性能损失，因为我仍然没有在大多数页面上有任何额外的请求（从上面回忆几乎所有用户都有填充的缓存）。
Now, my understanding is that, if the cache expiration date for a javascript file has not been reached, then the cached version is used immediately; there is no HTTP request sent at to the server at all. If this is correct, I would assume that having multiple tags is not causing any performance penalty, as I'm still not having any additional requests on most pages (recalling from above that almost all users have populated caches).
除此之外，不加载JS意味着浏览器不必解释或执行它不需要的所有额外代码;作为一个B2B应用程序，我们大多数用户不幸遇到了IE6及其缓慢的JS引擎。
In addition to this, not loading the JS means that the browser doesn't have to interpret or execute all this additional code which it isn't going to need; as a B2B application, most of our users are unfortunately stuck with IE6 and its painfully slow JS engine.
另一个好处是，当代码更改时，只需要受影响的文件再次获取，而不是整个集合（授予，它只需要获取一次，所以这不是一个好处）。
Another benefit is that, when code changes, only the affected files need to be fetched again, rather than the whole set (granted, it would only need to be fetched once, so this is not so much of a benefit).
我'我还考虑使用 LabJS 来允许在没有缓存的情况下并行加载JS。
I'm also looking at using LabJS to allow for parallel loading of the JS when it's not cached.
具体问题
- 如果标签很多，但所有文件都是从本地缓存加载的，整体上加载的javascript越来越少，这是否会比从缓存加载的一个标签更快，但包含网站上任何地方所需的所有javascript，而不是合适的子集？
- 是否还有其他理由偏爱另一个？
- 类似的想法是否适用于CSS？ （我目前正在使用更加单一的CSS方法）
推荐答案
我会说关注的最重要的事情是对速度的感知。
I would say that the most important thing to focus on is the perception of speed.
首先要考虑的是，没有胜利-win 公式，但是一个javascript文件增长到可以（并且应该）拆分的大小的阈值。
First thing to take into consideration, there is no win-win formula out there but a threshold where a javascript file grows into such a size that it could (and should) be split.
GWT 使用此并称之为 DFN（现在为死） ）代码。这里没什么魔力。您只需手动定义何时需要新代码，如果用户需要，只需调用该文件。
GWT uses this and they call it DFN (Dead-for-now) code. There isn't much magic here. You just have to manually define when you'll need a need a new piece of code and, should the user need it, just call that file.
如何，何时，何地你需要它吗？
基准。 Chrome有一个很棒的基准测试工具。广泛使用它。看看是否只有一个小的javascript文件将大大改善该特定页面的加载。如果确实如此，那么请开始DFNing你的代码。
How, when, where will you need it?
Benchmark. Chrome has a great benchmarking tool. Use it extensivelly. See if having just a small javascript file will greatly improve the loading of that particular page. If it does by all means do start DFNing your code.
除此之外，这完全取决于感知。
Apart from that it's all about the perception.
不要让内容跳转！
如果您的页面有图片，请设置其宽度和高度在前面。由于页面将加载位于它们应该位置的元素，因此不会有内容拟合，并且调整用户对速度的感知会增加。
Don't let the content jump!
If your page has images, set up their widths and heights up front. As the page will load with the elements positioned right where they are supposed to be, there will be no content fitting and adjusting the user's perception of speed will increase.
推迟javascript！
所有主要的库都可以在执行javascript之前等待页面加载。用它。 jQuery就像这样 $（document）.ready（function（）{...}）。它不会等待解析代码，但会使解析后的代码准确触发。页面加载后，图片加载前。
Defer javascript!
All major libraries can wait for page load before executing javascript. Use it. jQuery's goes like this $(document).ready(function(){ ... }). It doesn't wait for parsing the code but makes the parsed code fire exactly when it should. After page load, before image load.
需要考虑的重要事项：
- 确保客户端缓存js文件（所有其他文件与此文件相比都很短）
- 使用 Closure Compiler
- 缩小你的代码;它比Gziping快（两端）
- Make sure js files are cached by the client (all the others stand short compared to this one)
- Compile your code with Closure Compiler
- Deflate your code; it's faster than Gziping it (on both ends)
Apache缓存示例：
Apache example of caching:
// 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缩减的例子：
Apache example of deflating:
// 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。
And last, and probably least, serve your Javascript from a cookie-less domain.
为了让你的问题成为焦点，请记住，当你有DFN代码时，你会有几个较小的javascript文件，正好被拆分，没有压缩级别关闭可以给你一个单一的。在这种情况下，各部分的总和不等于整体。
And to keep your question in focus, remember that when you have DFN code, you'll have several smaller javascript files that, precisely for being split, won't have the level of compression Closure can give you with a single one. The sum of the parts isn't equal to the whole in this scenario.
希望它有所帮助！
这篇关于改进Javascript加载时间 - 连接与多个+缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
