Question

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

我认为我的大多数网页（虽然不是全部）都下载了至少1mb的javascript，为什么不压缩和聚合呢？

嗯，事实证明我认为表现比以前更差。 Firebug报告称，“DomContentLoaded”在应用程序的任意随机页面上占用了1.17秒。这是正常的吗？喜欢哇。

基本上我的应用程序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（100k），jquery-ui-1.8.16.custom.min.js（206k），jwplayer.js（83k），simpleyui.js（103k），{{1} }（100k）和jscharts.js（186k）。那些kb量令人惊讶地缩小。

我已经尝试过根据需要压缩内容，但这实际上会让它变慢。我猜机架云的cpus不是很快？它为请求增加了大量时间。按需关闭gzipping似乎可以让事情变得更好。

编辑：我可以确认将javascript放在页面底部没有任何区别。我可以确认删除jquery，audio-player，jwplayer等所有库只需要1秒钟。

我的应用程序代码（可能包含更多文件，但整体代码较少）大约需要0.2到0.3秒。

我99％确定问题与现在下载无关，而且与执行速度有很大关系。

您建议我采取哪些措施来改善网页的效果？

Answer 1

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

在我目前的项目中，我们正致力于通过封装功能组件并通过依赖项管理器来减少对外部javascritpt库依赖项的依赖，该依赖项管理器仅加载每个特定页面所需的javascript库（如果页面有3个模块）然后它只加载那些所需的库。

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

尽可能减少对外部图书馆的依赖。

此外，我们采取措施减少对jQuery的依赖，将代码转换为直接使用DOM，例如使用document.getElementByID()和getElementsByTagName()代替jQuery('#myId')或jQuery('table.myTableClass')。这有助于减少一些页面，使它们根本不使用依赖关系，从而大大提高了它们的加载时间。

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

Answer 2

我总是从像谷歌cdn这样受信任的cdn加载库。这将帮助您缓存这些。这有助于并行下载，因为它来自与您不同的域

Answer 3

就个人而言，我创建了一个JSMin所有类的类，并将它放在一个文件中，这样它只请求一个文件，而不是很多，因为太多的文件会使页面变慢。

所以基本上这个过程是：

阅读所有文件
将所有内容加在一起
JSMin（我用过：https://github.com/rgrove/jsmin-php/）
Gzip如果你想（我没有，没有看到性能提升，因为PHP通常会自动设置为gzip内容）
在磁盘上缓存文件，以便您不必再次执行所有操作

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

Answer 4

由于这些是静态文件，我建议您提前测试gzipping文件。 gzipping文件实际上会使用很多cpu，但如果你事先这样做，那么你只需要在生成文件时支付这笔费用。

仍然有可能解压缩客户端上的文件比你想要的慢，所以请确保并测试它。

至于如何告诉你的服务器在必要时提供gzip压缩版本，我不确定退格如何做，但在我的托管环境中，我使用后缀“html.en”来表示非gzipped文件和后缀“html.en.gz.” Apache服务器可以根据标头使用适当的文件。

我该怎么办这个800kb的javascript文件？

4 个答案: