Question

说我有两个页面：Page1.html和Page2.html。这两个页面都需要：

$(document).ready(function () {
    Init();
});

只有Page1.html需要：

$(document).ready(function () {
    InitPage1();
});

只有Page2.html需要：

$(document).ready(function () {
    InitPage2();
});

构建JavaScript文件的最佳做法是什么，考虑额外请求的开销和执行不相关代码的开销？

选项1：

我可以制作3个JavaScript文件，一个在两个页面上引用，一个仅在Page1.html引用，一个仅在Page2.html引用。

优点是每个页面都没有在$(document).ready()中运行不相关的代码。

缺点是Page1.html和Page2.html需要对JavaScript文件发出2个请求，一个用于共享文件，另一个用于页面特定文件，额外请求将增加开销。

选项2：

我可以创建一个在两个页面上都引用的JavaScript文件，其中包含两个页面的所有代码。

$(document).ready(function () {
    Init();
    InitPage1();
    InitPage2();
});

优点是每个页面只会产生1个JavaScript文件请求，从而减少了开销。

缺点是现在正在为两个页面运行$(document).ready()中不必要的代码。

选项3？：

有没有更好的选择我不考虑？

最终注意事项：

这里主要关注的是，当几十个页面需要自己的JavaScript代码而不会在其他任何地方共享时，这将是理想的选择吗？

单个文件的请求可能很昂贵。我看到我的一个网站的每个JavaScript文件请求都有100-450毫秒，几乎所有的时间都是“等待”而不是“下载”，这意味着瓶颈在于请求本身，而不是文件大小，即，如果5个单独的JS文件每个需要加载200毫秒（总共1秒），如果它们全部合并为1个文件，增加的文件大小几乎无关紧要，请求总共需要大约200毫秒（可能会略高， 50ms或更少，加载附加数据）。

所以我的假设是将所有内容合并到一个文件中是理想的，但是在每个页面上运行不相关的代码似乎非常草率，特别是如果由于某种原因不相关的代码具有高执行时间。处理此问题的最佳做法是什么？

Answer 1

你的第二个代码不能用作 InitPage2可能不是一个函数。但那就是elses的用途：

MERGE

但是，这段代码并不是真的干。所以你可能会像core.js一样创建，你可以在那里做一些随处可见的常规内容，然后你可以在你的扩展中调用这些函数：

$(document).ready(function () {
Init();
if(InitPage1) InitPage1();
if(InitPage2) InitPage2();
});

在您的扩展程序中：

var onready=[];
$(document).ready(function () {
 onready.forEach(func=>func());
 onready={push:func=>func()};
});

在哪里放置特定于页面的JavaScript代码？

1 个答案: