2011-11-13 27 views
7

在当前的Web项目中,我使用了几个jQuery插件,并在关闭body标签之前对它们进行初始化。我的问题是,从加载时间/性能的角度来看,对我来说最好是采取所有这样的初始化并将它们复制到一个单独的,外部化的js文件中?插件在网站的所有页面中都以相同的方式初始化,所以它似乎加载一个,集中式文件将是最好的,不是吗?感谢您的任何反馈。我应该将所有JavaScript源文件复制到一个文件中吗?

回答

5

这一切都取决于你正在开发的,但这里有一些经验法则。

HTTP请求意味着开销(尤其是通过HTTPS),所以尽可能少尝试,对于移动来说,这是至关重要的。但有一些例外,但;延迟加载应用程序初始化时不需要的JavaScript文件有时很智能,因此在真正需要时可以对其进行缓存,对于流行的库使用CDN有时可以通过并行下载实现巨大的性能提升。

保持下载尽可能小,所以缩小所有JavaScript和CSS,有的甚至缩小HTML。

确保缓存标头设置正确(有些将它们设置为一年或更长时间),并且在部署新版本的脚本时,将脚本元素的src属性附加到版本号以抵消缓存,例如:<script src="myapp.js?v=2"></script>

有时候感知的表现比实际的表现要好,加载和渲染HTML比初始化应用程序更重要。这可以通过异步加载JavaScript文件来完成(通过插入带有JavaScript的脚本元素,或者使用脚本加载器来为您执行此操作)。但这会导致新的挑战,例如加载文件的执行顺序或在脚本文件完全加载和解析之前与页面进行交互。

最后,它很大程度上依赖于您的在线应用程序或网站的体系结构,以及与它的交互是或应该是什么,请注意通过举例进一步阐述?

PM5544。

+0

感谢您的好评PM5544。我特别想知道更多关于异步js加载以提高性能的信息。下面是我为朋友展示他的作品的一个小型网站的示例:http:// tinyurl。com/758ocgo我正在使用一些jQuery插件,并且很想知道是否有什么我应该以不同的方式优化性能。 – nickpish

+0

在这个特定的情况下,我会建议你做以下事情;将插件组合成一个JavaScipt文件,而不是缩小它。将所有'

1

任何显着数量的javascript代码在共同的外部化JavaScript文件中效果更好,因为它可以在所有页面之间更有效地缓存。

几行代码在关闭body标签之前内联在调用外部化javascript文件中的某些初始化代码的代码中是完全正常的,如果这是触发初始化的最佳方式,则不会放慢速度。

+0

这是有道理的;谢谢jfriend – nickpish

0

是的,你可以minify使用像YUI Compressor这样的工具将JavaScript和CSS转换为单个文件。但是将所有的资产放入单个文件中可能会很麻烦:如果文件很大,则浏览器只能使用单个TCP流来下载它们,而不是多个同时请求。了解更多关于此这里:Loading JavaScript Resources the Fun Way

至于其中<script>代码会在HTML,答案是在页面的结束</body>标记之前的底部。查看Google的Web Performance Best Practices网站。

相关问题