Question

我想做什么？为了加速我的网站，我在浏览器加载事件后加载非必要的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文件。

Answer 1

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

开始了解这个问题的地方以及解决这个问题的方法都在网上。这是一个非常好的资源：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);
});

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

Answer 2

您应该使用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，因为$(window).scroll( { previousTop: 0 }, function () { var currentTop = $(window).scrollTop(); if (currentTop < this.previousTop ) { header.fadeIn('slow'); header.css('background', 'rgba(0,0,0,.9)'); } else { header.fadeOut(); } this.previousTop = currentTop; });是隐含的。

在浏览器加载事件

2 个答案: