javascript - 我该如何处理这个 800kb 的 JavaScript 文件？

Question

我读到，连接并可能压缩 JavaScript 文件将使应用程序运行得更快，因此我决定尝试一下。

我认为我的大部分页面(尽管不是全部)都下载了至少 1mb 的 javascript，那么为什么不压缩和聚合它呢？

嗯，事实证明我认为性能比以前更差了。 Firebug 报告“DomContentLoaded”在应用程序的任何随机页面上花费了 1.17 秒。这是正常情况下吗？就像哇。

基本上，我的应用程序 javascript 现在聚合了该站点的所有文件。每个文件都会查找一个主 ID，如果存在，它就会运行一些代码。如果没有，它就进入下一个功能 block 。

我还放入了一堆库以及我的应用程序代码。这是我正在使用的库。我应该汇总这些，还是不汇总？

<include>**/font/font.js</include>
<include>**/json/json2.js</include>
<include>**/jwplayer/jwplayer.js</include>
<include>**/underscore/underscore.js</include>
<include>**/jquery/jquery-1.7.1.js</include>
<include>**/jquery/jquery-ui-1.8.16.custom.min.js</include>
<include>**/jquery/jquery.cookie.js</include>
<include>**/jquery/jquery.jcrop.js</include>
<include>**/jquery/jquery.tmpl.js</include>
<include>**/jquery/farbtastic.js</include>
<include>**/simpleyui/simpleyui.js</include>
<include>**/audio-player/audio-player.js</include>
<include>**/tiny_mce/tiny_mce.js</include>
<include>**/jscharts/jscharts.js</include>

我认为我的主要足迹在 jquery-1.7.1.js (100k)、jquery-ui-1.8.16.custom.min.js (206k )、jwplayer.js (83k)、simpleyui.js (103k)、jscharts.js (100k) 和 tiny_mce.js (186k)。这些千字节量令人惊讶地缩小了。

我已经尝试过按需压缩内容，但这实际上会使速度变慢。我猜rackspace cloud的cpu不是很快？它为请求增加了大量时间。按需关闭 gzip 似乎会让事情变得更好。

编辑:我可以确认将 javascript 放在页面底部没有什么区别。我可以确认，删除所有库(如 jquery、audio-player、jwplayer 等)本身总共需要 1 秒。

我的应用程序代码(文件较多，但总体代码可能较少)大约需要 0.2 到 0.3 秒。

我 99% 确信问题与现在的下载无关，而与执行速度有很大关系。

您建议我做什么来提高页面的性能？

Answer 1

您可以在每个页面上仅加载您需要的 JavaScript 库。

在我当前的项目中，我们正在努力减少对外部 javascritpt 库依赖项的依赖，方法是封装功能组件并将它们传递给依赖项管理器，该管理器仅加载每个特定页面所需的 javascript 库(如果页面有 3 个模块)那么它只加载这些所需的库)。

您可以使用这种方法来消除对特定库的大量不必要的请求。

尽可能减少对外部库的依赖。

此外，我们还采取了措施，通过将代码转换为直接使用 DOM 来减少对 jQuery 的依赖，例如使用 document.getElementByID() 和 getElementsByTagName() 而不是 jQuery('#myId') 或 jQuery('table.myTableClass')。这有助于减少一些页面，使它们根本不使用任何依赖项，从而极大地延长了加载时间。

另一个例子是，如果您只需要 CSS 选择器而不是整个 jQuery 功能，您可以使用 Sizzle这是独立的 CSS 选择器引擎，从而将 80+ KB 的 jQuery 削减为 Sizzle 所需的 4KB。我确信相同的方法可以与您的其他库一起使用，以减少应用程序中的许多不必要的冗余。