我应该把所有的JavaScript源代码复制到一个文件中吗?

Should I copy all my JavaScript sources into one single file?

本文关键字:一个 文件 JavaScript 复制 源代码 我应该      更新时间:2023-09-26

在当前的web项目中,我正在使用几个jQuery插件,并在结束正文标记之前初始化它们。我的问题是,从加载时间/性能的角度来看,它是最好的我采取所有这些初始化,并将它们复制到一个单一的,外部化的js文件?在网站的所有页面中,插件都以同样的方式初始化,所以似乎加载一个集中的文件是最好的,不是吗?感谢您的反馈。

这完全取决于您的开发目标,但这里有一些经验法则。

HTTP请求意味着开销(尤其是HTTPS),所以尽量少做,对于移动设备来说这是至关重要的。不过也有一些例外;延迟加载应用程序初始化时不需要的JavaScript文件有时是明智的,所以它们在真正需要时被缓存,使用CDN的流行库有时可以导致极大的性能提升,因为并行下载。

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

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

有时感知性能优于实际性能,意义;加载和呈现HTML比初始化应用程序更重要。这可以通过异步加载JavaScript文件(通过插入脚本元素与JavaScript像谷歌做或通过使用脚本加载器为您做这一点)。但是这会带来新的挑战,比如加载文件的执行顺序,或者在脚本文件完全加载和解析之前与页面进行交互。

最后,这很大程度上取决于你的在线应用程序或网站的架构,以及与它的交互是什么,或者应该是什么,介意通过给出一些例子来进一步阐述吗?

PM5544 .

任何大量的javascript代码最好放在一个共同的外部化javascript文件中,因为它可以在所有页面之间更有效地缓存。

如果这是触发初始化的最佳方式,那么在页面的结束body标签之前内联几行代码来调用外部化javascript文件中的一些初始化代码是完全可以的,并且不会减慢任何速度。

是的,你可以使用YUI Compressor等工具将 JavaScript和CSS压缩到单个文件中。但是,将所有资产放入单个文件中可能会很麻烦:如果文件很大,浏览器只能使用单个TCP流来下载它们,而不是同时使用多个请求。点击这里阅读更多内容:以有趣的方式加载JavaScript资源

至于,其中<script>标签放在HTML中,答案是在关闭</body>标签之前的页面底部。查看Google的Web性能最佳实践网站