我读到,连接并可能压缩 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% 确信问题与现在的下载无关,而与执行速度有很大关系。
您建议我做什么来提高页面的性能?
最佳答案
您可以在每个页面上仅加载您需要的 JavaScript 库。
在我当前的项目中,我们正在努力减少对外部 javascritpt 库依赖项的依赖,方法是封装功能组件并将它们传递给依赖项管理器,该管理器仅加载每个特定页面所需的 javascript 库(如果页面有 3 个模块)那么它只加载这些所需的库)。
您可以使用这种方法来消除对特定库的大量不必要的请求。
尽可能减少对外部库的依赖。
此外,我们还采取了措施,通过将代码转换为直接使用 DOM 来减少对 jQuery 的依赖,例如使用 document.getElementByID()
和 getElementsByTagName()
而不是 jQuery('#myId')
或 jQuery('table.myTableClass')
。这有助于减少一些页面,使它们根本不使用任何依赖项,从而极大地延长了加载时间。
另一个例子是,如果您只需要 CSS 选择器而不是整个 jQuery 功能,您可以使用 Sizzle这是独立的 CSS 选择器引擎,从而将 80+ KB 的 jQuery 削减为 Sizzle 所需的 4KB。我确信相同的方法可以与您的其他库一起使用,以减少应用程序中的许多不必要的冗余。
关于javascript - 我该如何处理这个 800kb 的 JavaScript 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8389725/