Question

想象一下，一个拥有数十个页面组（pg1，pg2，...）的Web应用程序，其中一些页面组只需要一些特定于它们的JavaScript代码，而不是整个应用程序。例如，window.resize（）上的一些可视修复可能仅与pg2相关，但在其他任何地方都不相关。

以下是一些可能的解决方案：

1 / Centralized：为整个应用程序提供一个处理所有页面组的脚本文件。很容易知道相关的DOM对象是否存在，所以所有不相关的页面只是做一个小的额外的if（）。最大的优点是所有JS都为整个Web应用程序加载一次，并且不需要修改HTML代码。缺点是会向不相关的页面添加额外的检查。

2 / Mixed：集中式脚本检查页面上是否存在特定功能，如果存在则启动它。例如，我们可以添加

if (typeof page_specific_resize === 'function') page_specific_resize();

在这种情况下，特定页面组将具有：

<script>
function page_specific_resize() {
    //....
}
</script>

优点是代码仅存在于相关页面中，因此不会在每个页面上进行测试。缺点是整个页面组中HTML结果的额外大小。如果有多行代码，页面组可能会加载特定于其的附加脚本，但我们会在那里添加一个http调用，以便在集中式脚本中节省几公斤。

哪种做法最好？请评论这些解决方案或建议您自己的解决方案。添加一些资源来支持您对更好的声明（考虑性能和易维护性）将会很棒。将选择最详细的答案。感谢。

Answer 1

考虑一个最佳解决方案是有点困难，因为它是一个假设的场景，我们没有数字可以解决：什么是最多的页面，有多少页面，总脚本大小等等。

那就是说，我没有找到具体的答案，最佳实践^TM，但是人们同意的一般要点。

1）缓存：

根据这个：

https://developer.yahoo.com/performance/rules.html

“在现实世界中使用外部文件通常会产生更快的速度页面，因为JavaScript和CSS文件由浏览器缓存“

2）缩小

仍然根据雅虎链接：

“[缩小]提高了响应时间性能，因为下载文件的大小减少了”

3）HTTP请求

最好减少HTTP呼叫（基于社区答案）。

One big javascript file or multiple smaller files?

Best practice to optimize javascript loading

4）您是否需要特定的scritp？

根据：https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md

“JavaScript应该用于使用其他功能来装饰您的网站，并且不应该要求您的网站可以运行。”

这取决于您必须加载的资源。取决于特定页面组的加载频率或您希望请求的频率。网络应用程序是单页？每个特定脚本的作用是什么？

如果脚本加载表单，则用户不需要多次访问该页面。用户无论如何都需要互联网连接才能发布数据。

但是，如果它是一个调整页面大小的脚本，并且用户有一些连接打嗝（例如：在移动设备上访问您的网络应用程序，同时乘坐地铁），最好让代码已经加载，这样用户就可以了可以自由导航。根据我之前发布的Github链接：

“一直被解雇的事件（例如，调整大小/滚动）”

有一件事应该优化，因为它与性能有关。

将一个JS文件中的所有代码缩短为早期缓存将减少发出的请求数。此外，连接到stablish可能需要几秒钟，但需要几毫秒来处理一堆“if”语句。

但是，如果你只有一个重要的JS文件，只有一个功能不是你的应用程序的核心（比如说，这个单个文件几乎是其他脚本总数的n％），那么就没有需要让用户等待该特定功能。

“如果您的网页媒体密集，我们建议您调查JavaScript技术，以便仅在需要时加载媒体资源。”

Answer 2

这是JS的圣杯，希望ECMA6 / 7中的哪些模块能够解决！

客户端上有模块加载器，例如JSPM，现在在node.js中有热插拔JS代码编译器，可以通过webpack在客户端上使用块。

去年我成功地尝试创建了一个简单的应用程序，它只在运行时根据需要加载了所需的代码/文件块：

这是一个简单的测试项目，我在github上调用了praetor.js：github.com/magnumjs/praetor.js

gh-pages-code分支可以告诉你它是如何工作的： https://github.com/magnumjs/praetor.js/tree/gh-pages-code

在主要的js文件中，您可以看到编译后如何使用webpackJsonp完成此操作：

JS：

 module.exports = {
    getPage: function (name, callback) {
        // no better way to do this with webpack for chunk files ?
        if (name.indexOf("demo") !== -1) {
            require(["./modules/demo/app.js"], function (require) {
                callback(name, require("./modules/demo/app.js"));
            });
        }
 .....

要查看它是否正常工作，请转到http://magnumjs.github.io/praetor.js/并打开网络面板，并在通过左侧的选择菜单导航时查看正在运行时加载的块。

希望有所帮助！

Answer 3

通常最好减少HTTP请求，但这取决于您的网络应用程序。

我通常使用requirejs在每个文件中包含我需要的正确模型和视图。

在开发过程中，它节省了大量的调试时间（因为我知道哪些文件存在），在生产中，考虑到请求的数量，这可能会有问题。

所以我使用r.js，这是特别为requirejs设计的，在部署时编译我的JS文件。

希望这有帮助

适用于Web应用程序的Javascript / jQuery最佳实践：集中化与规范

3 个答案: