我有几个问题有点相关，所以我将它们全部发布在SO上的一个问题上......
问题1：
我目前正在使用这个Facebook应用程序，我正在使用jQuery UI Tabs，其中只有4个，其中2个是通过Ajax加载的。主页面是index.html，这是放置标签代码的地方，对于通过Ajax加载的2个标签，我有两个不同的文件，tab1.html和tab2.html。
目前，jQuery标签初始化和Facebook JavaScript初始化是在index.html上完成的。 tab1.html和tab2.html都包含属于这些页面的JavaScript代码。例如，tab2.html有一个表单，并且有一些JS（带有jQuery）代码来验证表单，这段代码与tab1.html无关，因为tab1.html上的JS代码与tab2.html无关。
我的问题是，我应该继续这样做，还是将index.html，tab1.html和tab2.html中的所有JS / jQuery代码汇总到一个global.js文件中，然后将其包含在index.html中？ / p>
我虽然这样做但是如果用户从未打开tab1或tab2，则会加载不相关的代码。使用单个global.js文件的好处是我可以打包/缩小文件，如果我在每个相应的tabX.html文件中包含每个代码块，我就无法做到。
问题2：
当我使用jQuery时，我也使用了很多插件（实际上现在只有3个插件，但这个数字可以增长）。其中一些提供了一个缩小的JS，我在可用时使用它们，当它们不可用时，我使用的是正常版本。
还有请求问题。如果我有很多插件，比如10，那么这些插件就会有10个请求。而且还有一些插件在tab1.html中使用但不在tab2.html和反之亦然。
如何在单个Web请求中加载缩小/打包版本中的所有插件？我应该在发布我的应用程序之前手动执行此操作（打包并将它们合并到一个文件中），还是可以使用PHP version of Dean Edwards's Packer并快速打包/合并所有插件？这会是一个好方法吗？
问题3：
如果Q1上的答案类似于“合并单个global.js文件中的所有代码”，那么我是否应该在上面描述的Q2中的打包/合并脚本中包含global.js文件？
这样可以简化一切。我可以使用所有.js文件正确组织我的开发环境，插件和相应文件夹中的global.js，而不用打扰其他任何东西。打包/合并应该处理其余的事情（从相应的文件夹中提取文件，发送相应的JS标题并输出一个打包的.js文件）。
最令我困惑的一件事是，并非所有插件都用于每个标签，并非所有代码都适用于每个标签。尽管如此，一大块代码对于每个选项卡和索引都是全局的。这也简化了所有内容：a）我不必担心将所需的代码添加到每个tabX.html文件中，我可以简单地将它们看作HTML模板而不是其他内容; b）我不必费心去包含我需要它们的必要插件，因为我现在正在使用jQuery中的$ .getScript（）来加载我需要的插件，并且只在我需要它时，但我是不确定这是一个好方法，代码感觉像这样脏和丑。
答案 0 :(得分：2)
问题1：
将它们全部打包到一个.js文件中。这将使维护更容易，并且用户加载他们可能不使用的小js的微小开销并不重要。我还会让Google为您加载jQuery库，然后将所有js代码放在一个单独的文件中。
问题2：
由于这些插件并没有真正改变，我会手动组合它们。 Closure Compiler擅长这一点。缩小时使用不会发出任何警告的最高设置。
问题3：
是的，你想要缩小global.js
当浏览器下载global.js时，它会被缓存一段时间。因此，当您在另一个页面上再次调用整个global.js时，它不会重新下载，它会首先查看您的本地副本。所以你在初次下载时首先做了一些工作，但从那时起，它应该更快。
答案 1 :(得分：1)
通常，与javascript相关的加速网站加载的最佳做法是：
ExpiresByType application/x-javascript "access plus 1 year"中，在您的文档中：<script type="text/javascript" src="/allmy.js?v=1285877202"></script>）答案 2 :(得分：1)
你应该从标签页中保留太多javascript的主要原因是因为它会破坏用户体验。当用户第一次点击选项卡时，它会抓取动态所需的所有组件，这使得它有点迟缓。
您的问题只是半特定的，因为我们不了解您网站的很多内容，例如确切的文件大小，模块的实际使用方式。
总体思路是在模块化和速度之间找到平衡。
当您将模块组合在一起时，这些是您应该考虑的一般性想法：
然后将最常用的稳定代码库合并为一个。然后，您应该在选项卡页面上包含其他站点特定的功能。
此外，请确保异步加载javascript，因为它不会阻止页面（和标签）的呈现。
答案 3 :(得分：1)
另一个综合答案：
如果在打包/迷你版本中添加所有JS，生成的文件大小不超过30k，则最好将其组合起来。文件的一个额外连接（假设它没有被缓存）值得10-20k的额外JS下载。这与浏览器打开和关闭连接与已建立连接上的额外20k流量有关。阈值还取决于您的用户分布。如果您有大量拨号或低带宽用户，您的阈值将会更小。
我通常建议组合并加载为1个文件，除非库非常模糊，并且需要一个非常有优势的案例才能在页面上触发它。例如：悬停触发功能Y，但它位于反馈小部件上，占用的流量不到1％ - 不要打扰组合。
如今，缩小和包装有点被高估了。由于绝大多数浏览器都支持gZip，因此在浏览器传输过程中gZip通过线路提供的数据整合量与min / pack实际上具有相同的效果。但是，浏览器打开它的成本很低。话虽如此，由于并非所有浏览器都支持它，所以最小化/打包代码仍然是一种好习惯，您可能不希望该文件被启用gZip等。我使用在线打包机对抗第三方模块，它运行得相当好。但是，有时它可能会导致问题，因此请确保在部署之前测试手动打包的版本。
替代：
如果您认为用户将在索引页上停留超过10秒，则可以使用 Js Loader Prototype 模式单独预加载其他库。
答案 4 :(得分：1)
Steve Souder的“更快的网站”是一本你应该研究的书。
首先，一种体验会减慢，因为无论何时链接外部脚本，浏览器都会等待脚本下载，解析然后执行。在此之后，它只重新处理剩余的请求。因此，为了避免这种缓慢下降，可以考虑平行下载脚本。如果脚本位于同一个域中，则脚本是Ajax的几种技术;如果脚本位于外部域，则使用Script Dom元素或iframe中的脚本
Q1：对于我来说，如果必须不断更改页面内容，那么所有内容的模块化是进一步开发的更好选择。响应性对最终用户非常重要。一个小的global.js将有助于启动和运行应用程序。平行地，可以下载tabX.html。
Q2：由于jquery插件很少改变。 tabX.html页面的插件可以并行下载并本地缓存，因此当加载tabX.html时，无需获取所需的插件。因此，主页面所需的所有插件应该在一个文件中，而tabX.html使用的插件应该在不同的文件中。
Q3：这是个人选择。您希望它是开发人员友好还是用户友好。我依靠用户友好性。制作响应迅速且高效的应用是我们的工作！将所有内容打包成单个文件的所有优点是您可以轻松开发。好丑的代码会产生漂亮的应用程序:)。用户是速度致命的。例如。当谷歌将每页10个结果更改为20时，他们发现搜索查询数量大幅下降。所以我的意见不是把它们全部打包成一个并加载每个
测试每种技术的一些技术和相关链接：
XHR eval / ajax：http://stevesouders.com/cuzillion/?ex=10009
XHR注射：http://stevesouders.com/cuzillion/?ex=10015
iframe中的脚本：http://stevesouders.com/cuzillion/?ex=10012
答案 5 :(得分：0)
问题1：
最佳做法是将所有js文件放在一个“全局”文件中。这样可以最大限度地减少HTTP请求。假设你有5个插件，这就是我需要做5个请求，如果你把它们合并为一个，你只需要请求一次。这可能在第一次加载时有点沉重，但下次浏览器会缓存此文件，所以......不用担心大小。 HOWEVER ，在组合脚本时要小心脚本的顺序。 （I.E.:JQuery脚本应首先放在JQuery UI之前的js文件中）
http://articles.sitepoint.com/article/web-site-optimization-steps/4
http://code.google.com/speed/page-speed/docs/rtt.html
问题2： 您可以手动或自动完成.Dean Edward的Packer是一个不错的选择。如果你正在使用ASP.NET，你可以检查MB Compression Handler，如果你正在使用PHP的APACHE，也许你可以change the configuration of your htaccess to gzip it
问题3： 如果你打包“全局”javascript文件也会更好。这可以节省带宽并节省更多的加载时间。您明白了，将所有js文件组合在一起您需要的网站将节省您包含个别脚本的时间。