Question

我正在尝试优化页面加载时间。剩下的唯一事情就是优化资产加载时间。我几乎没有资产和一个库脚本。一些资产依赖于此库。

供应商脚本

library.min.js
vendor.min.js

捆绑脚本

page.bundle.js（取决于library.min.js）
play.min.js（取决于vendor.min.js）
gtm.min.js（取决于library.min.js）

我要实现的是在页面完全加载后开始加载所有这些资产。当我在服务器端渲染所有内容时，延迟用户交互对我来说不是问题。我只需要按照准确的顺序下载library.min.js，然后下载page.bundle.js，但是需要时下载。

我尝试了一些事情，但是我无法开始下载并按正确的顺序执行它。目前，我计划在需要时使用xhr和eval内容。但是我不确定这是否正确。使用此方法时，还有更多问题要问。缓存等。

有人可以告诉我如何分配动态加载的javascript文件的下载和执行时间吗？

Answer 1

我要实现的是在页面完全加载后开始加载所有这些资产。

然后将这些资产移到页面末尾：

<body>
  Some cool content
  <script src="library.min.js"> </script>
  <script src="page.bundle.js"> </script>
</body>

我只需要按照确切的顺序运行library.min.js，然后运行page.bundle.js。

然后按顺序将它们放在页面上。您还可以添加async和defer标志来推迟下载。（Read on）

如何分配动态加载的javascript文件的下载和执行时间？

当然可以，但是为什么呢？如果下载了js，为什么不直接运行它呢？

目前，我正计划在需要时使用xhr和eval内容。

在非常罕见的情况下，您需要加载其他javascript（例如，带有一些小游戏的页面，如果您在用户选择其中一个游戏时加载了游戏脚本），只需将脚本添加到正文中即可：

 function withScript(url, callback) {
   var script = document.createElement("script");
   script.src = url;
   script.onload = callback;
}

withScript("additional.js", function() {
  additional.start();
});

Answer 2

您可以动态创建script元素并将其添加到文档正文中，将src属性设置为您的javascript文件，然后让其下载。下载完成后，promise将解决，并设置下一个相关的js文件。

function setExternalScript(src) {
  return new Promise((resolve, reject) => {
       const scriptTag = document.createElement('script');
       scriptTag.type = 'text/javascript';
       scriptTag.src = src;
       scriptTag.onload = () => resolve();
       document.appendChild(document.body, scriptTag);
  });
}

async function afterLoaded() {
    const scripts = ['a.js','b.js','c.js'];
    for(let i=0; i< scripts.length; i++)
       await setExternalScripts(scripts[i]);
}

afterLoaded(); // run this whenever you need

Answer 3

如果在项目中使用jquery，则可以使用get脚本，它是ajax回调。该脚本在全局上下文中执行，因此它可以引用其他变量并使用jQuery函数。包含的脚本可能会对当前页面产生一些影响。一旦脚本已加载但不一定执行，就会触发其成功回调。您可以找到一个有效的示例https://www.w3schools.com/jquery/ajax_getscript.asp

要加载多个脚本，可以使用以下代码：

$.getMultiScripts = function(arr, path) {
var _arr = $.map(arr, function(scr, i) {
    var source = (path || "") + scr;
    updatePreloader(i, arr.length);
    return $.getScript(source);
});

_arr.push($.Deferred(function(deferred) {
    $(deferred.resolve);
}));

return $.when.apply($, _arr);
}

var prereqArray = [ "model/Lab.js", "controller/init/main.js" ];
function getEngineStarter(id) {

$.getMultiScripts(prereqArray, rPath).done(function() {
   console.log("Horray all loaded").

});

}

动态下载JavaScript并在以后执行

3 个答案: