在浏览器加载事件之后按连续顺序加载 javascript

Load javascript in consecutive order after browser load event

本文关键字：加载 连续 顺序 javascript 之后 浏览器 事件      更新时间：2023-09-26

我想做什么？为了加快我的网站速度，我在浏览器加载事件后加载了不必要的 javascript。（所以JS文件不是渲染阻塞）这当前工作正常。

问题出在哪里？问题是有时非必要的JavaScript依赖于其他库，而且这些库需要首先加载。

我尝试了什么来解决问题？为了解决这个问题，我向依赖于库的javascript添加了一个延迟事件。虽然这有时有效，但 JS 文件的加载时间在刷新之间有所不同，有时即使在有延迟的情况下也可以在库之前加载。

问题：有没有人知道在加载第一个JS文件后才加载JS文件的更好方法？（见下面的代码）

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
var element2 = document.createElement("script");
var delay=40;
element.src = "http://119.9.25.149/sites/all/themes/bootstrap/bootstrap_nova/js/highcharts.js";
element2.src = "http://119.9.25.149/sites/all/themes/bootstrap/bootstrap_nova/js/future-plastic.js";
document.body.appendChild(element);
    setTimeout(function(){
document.body.appendChild(element2);
},delay);

}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

从上面可以看出，我正在尝试在加载未来塑料文件之前加载 highcharts js 文件。

谢天谢地，你不是第一个遇到这个问题的人。围绕这个问题有很多困难的解决方案，包括使用评论中建议的模块加载器（我同意这是最好的长期解决方案，因为它们占了更多的浏览器和灵活性，但要学习解决一个小问题还有很多）。

开始了解这个问题的地方以及解决它的方法遍布网络。这是一个很好的资源：http://www.html5rocks.com/en/tutorials/speed/script-loading/

如果您不必支持 Opera Mini 或 IE9，您可能需要尝试推迟。或者，您可以加载同步并在加载时执行 - 他们的例子是这样的：

[
    '//other-domain.com/1.js',
    '2.js'
].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

这可能起作用的原因是（不同的浏览器实现方式不同）是因为默认设置是加载动态生成的脚本 默认情况下，如果您将其设置为 false，则标记为异步："它们在文档解析之外执行，因此在下载时不会阻止渲染"

你应该使用ScriptElement.onload：

var pre = onload;
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function C(t){
  return doc.createElement(t);
}
function downloadJSAtOnload(){
  var s = C('script'), ns = C('script'), h = doc.getElementsByTagName('head')[0];
  var u = 'http://119.9.25.149/sites/all/themes/bootstrap/bootstrap_nova/js/';
  s.type = ns.type = 'text/javascript'; s.src = u+'highcharts.js'; h.appendChild(s);
  s.onload = function(){
    ns.src = u+'future-plastic.js'; h.appendChild(ns);
  }
}
downloadJSAtOnload();
}

注意：第一个onload是window.onload，因为window是隐式的。

相关文章：