将Javascript文件合并为一个文件

3
最近我阅读了雅虎的网站优化技巧,并使用YSlow在我的一个网站http://www.gwynfryncottages.com上实现了一些他们的想法,你可以在这里查看文件http://www.gwynfryncottages.com/js/gw-custom.js
虽然这种技术在大多数情况下似乎完美地工作,并且确实加速了网站,但是我注意到在我处理网站时,javascripts没有加载或完全加载的错误显著增加,所以有三个问题:-
  • 将脚本组合在一起在可靠性方面是否是一个好主意?

  • 有没有办法测量错误的数量,即脚本未能加载的次数?

  • 有没有办法“预加载”JavaScript或确保减少加载错误的数量?


  • 这是一个非常棒的脚本文件。你在其中使用了一些eval函数,这可能会导致某些压缩工具出现问题,但你可以使用一个只删除空格和注释的压缩工具,这应该仍然可以从你的文件中减少相当数量的代码。通常来说,对已经被压缩的代码再次进行压缩是安全的,不必担心它已经被压缩过了。 - aaaaaaaaaaaa
    4个回答

    5
    当然很好。您不仅可以减少HTTP请求,还可以缩短下载其他资源的延迟。
    尝试使用minify:http://code.google.com/p/minify/,我一直在使用它,没有任何抱怨。
    我可以向您保证,合并文件不会导致任何错误,因为合并的脚本与10个非合并的脚本相同,它们都以相同的方式加载(按顺序从左到右,从上到下)。请仔细检查您合并它们的方式。

    我对压缩大文件的担忧在于其中的组件已经被压缩过了 - 再次压缩会引起更多问题,而不是解决问题。Google页面速度确实建议这样做,但我注意到它也建议压缩自己的ga.js文件! - toomanyairmiles
    喜欢Minify。我在我的Web应用程序http://my.perqworks.com上使用它-作为一个自我沉迷的性能调整者,组合,缩小和缓存我的http资源感觉很棒。 - Christopher Altman
    我了解你所说的调整性能,它确实留下了余晖,但你需要做多少浏览器测试呢? - toomanyairmiles
    @Christopher Altman:我建议你将正在使用的代码更新为jQuery 1.4.2,而不是1.4.0。第一个版本存在一些错误... 不要使用表格进行布局! :D .. 提醒一下。 - Sune Rasmussen
    @toomanyairmiles - 如果它已经被压缩,它不会再次被压缩,这不是一个问题。请记住,压缩和打包是两个不同的概念。压缩已经被压缩过的JS不是问题,但打包已经被打包过的JS就有问题了。 - Ben

    1

    严重错误会导致脚本执行停止。如果您有多个脚本,其他脚本仍将运行;如果您将所有内容打包到一个大文件中,则会有更多的代码未被执行。因此,合并脚本对可靠性不利,但对其他目的(主要是加载时间)可能有好处。

    所有浏览器都有某种类型的JavaScript控制台,可以显示错误数量。大多数浏览器也有一些开发者工具(Firefox中的Firebug,Opera中的Dragonfly等)。

    我不确定您所说的预加载是什么意思。由于JavaScript文件可以以各种方式影响页面的其余部分,因此浏览器会在继续解析页面之前完全加载和执行脚本标记(这就是为什么脚本会使页面加载变慢的原因)。


    我更偏向于设计而不是编码,所以我在考虑图像预加载并想知道在JavaScript世界中是否存在类似的东西。除此之外,我在考虑把脚本放在页面底部等等,并且想知道这是否能起作用。 - toomanyairmiles

    0

    合并JavaScript文件始终是最好的选择,除非这样做在逻辑上不合理(例如从Google Code下载jQuery而不是自己托管它)。

    我总是尽可能地合并所有文件(JavaScript、CSS、图像(CSS Sprites)等),即使在开发过程中也是如此,我从未遇到任何问题。这样做可以减少http连接,速度更快,这一点绝不能低估。

    关于您想要计算错误的事情,我不太明白您的意思。但是,像Google Chrome内置的调试工具或Firefox的Firebug这样的调试工具是调试JavaScript代码的好工具,并显示出现的错误列表。

    至于预加载的事情:是的,它可以完成,但会变得混乱和不合逻辑。然而,我无法想象任何情况下需要麻烦地预加载JavaScript,与其只需让它直接运行,无需进行任何错误检查相比,这不是一个好的解决方案。

    关于您遇到的错误,我的Chrome只指出了这个:

    Uncaught ReferenceError: load is not defined
    

    ...似乎是在您的HTML文档的第55行设置的onload方法“load()”,当body标签开始时触发。


    在计算错误方面,我指的是加载错误,即文件无法完全加载的次数。onload是Google地图的钩子,在维护方面,它最终被包含在头文件中,因为它在许多页面上都需要,所以缺失问题比错误问题更少。 - toomanyairmiles

    0

    我在你的代码中看不到被调用在body标签上的load函数!我建议避免将JS添加到HTML文件中,它可以动态添加,并且在维护时更容易处理。

    我认为你需要注意的事情是确保在定义之前不要尝试调用某些内容(也许你的单独JS文件的定义顺序与它们在单个JS文件中出现的顺序不同)。

    Firebug适用于Firefox,是一个很好的开发工具,如果你还没有找到它的话。Webkit、Opera和IE也有各种其他的开发工具。


    body标签中的onload是Google地图的钩子,它在网站的某些页面和大多数博客条目中使用,出于实用目的,它最终被包含在整个网站的头部中,因为我无法找到其他方法使其正常工作。我已经相当广泛地调整了文件的顺序,目前的方式似乎是最好的 - 你有注意到什么特别的吗? - toomanyairmiles

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接