我该如何处理这个800 do的javascript文件？

Question

我读到连接一个javascript文件，可能还会使应用程序运行得更快，所以我决定试一试。

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

结果我觉得演出比以前更糟了。Firebug报告说，"DomContentLoaded“在应用程序的任意页面上都使用了1.17s。这正常吗？就像哇哦。

基本上，我的应用程序javascript现在聚合了站点的所有文件。每个文件都寻找一个主id，如果它在那里，它会运行一些代码。如果不是，它只会转到下一个函数块。

我也在我的应用程序代码中放了一堆库。这是我正在使用的图书馆。我应该把这些汇总一下，还是没有？

<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 (100 K)，jquery-ui-1.8.16.custom.min.js (206 K)，jwplayer.js (83 K)，simpleyui.js (103 K)，jscharts.js (100 K)和tiny_mce.js (186 K)。令人惊讶的是，这些kb的数量被缩小了。

我已经尝试过按需压缩内容，但这实际上使其变得更慢。我想rackspace云的cpus不是很快吗？它为请求增加了大量时间。关掉按需拉链似乎能让事情变得更好。

编辑：我可以确认将javascript放在页面底部并没有什么区别。我可以确认，删除jquery、音频播放器、jwplayer等所有库只需花费1秒的时间。

我的应用程序代码(这是更多的文件，但总体上可能是更少的代码)占用了.2到.3的时间。

我确信这个问题与现在的下载没有任何关系，而且与执行速度有更多的关系。

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

Answer 1

您只能在每个页面上加载所需的javascript库。

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

您可以使用这种方法来处理对特定库的许多不必要的请求。

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

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

另一个例子是，如果您只需要CSS选择器，而不是整个jQuery功能，那么您可以使用口吻，这是一个独立的CSS选择器引擎，从而将80+ KB的jQuery减少到仅4KB。我确信，在您的其他库中也可以使用相同的方法来减少应用程序中许多不必要的开销。

Answer 2

我总是从像google这样的可信cdn中加载库。这将帮助您缓存这些。这也有助于并行下载，因为它是从与您不同的域下载的。

Answer 3

就我个人而言，我创建了一个类，用于JSMin everything，并将其放入一个文件中，以便它只请求一个文件，而不是多个文件，因为太多的文件会减慢页面的速度。

所以基本上这个过程是：

• 读取所有文件
• 把所有的内容加在一起
• JSMin (我使用了这个：https://github.com/rgrove/jsmin-php/)
• 如果您愿意的话，Gzip (我没有看到，因为PHP通常被自动设置为gzip内容)
• 将文件缓存在磁盘上，这样您就不必再这样做了

-编辑-找到我使用的文章：http://www.cforcoding.com/2009/05/supercharging-javascript-part-1-make-as.html