代码之家 › 专栏 › 技术社区 › Ahmet Can Güven

动态下载javascript并稍后执行

browser html5 javascript

Ahmet Can Güven · 技术社区 · 8 年前

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

供应商脚本

library.min.js库
供应商.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文件的下载和执行时间吗?

3 回复 | 直到 7 年前

JohanP 8 年前

您可以动态创建 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

Jonas Wilms 8 年前

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

然后在页面末尾移动这些资产:

<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();
});

Ullas Hunka 8 年前

如果您在项目中使用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").

});

}