Question

延迟加载js或ondemand加载的这3种方法之间的基本区别是什么？为什么？

脚本1：

$.getScript = function(url, callback, cache){
   $.ajax({
      type: "GET",
      url: url,
      success: callback,
      dataType: "script",
      cache: cache
   });
};

SCRIPT2：

function require(file, callback) {
    var script = document.getElementsByTagName('script')[0],
        newjs = document.createElement('script');

    // IE
    newjs.onreadystatechange = function () {
        if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
            callback();
        }
    };

    // others
    newjs.onload = function () {
        callback();
    };

    newjs.src = file;
    script.parentNode.insertBefore(newjs, script);
}

document.getElementById('id').onclick = function () {
    require('ondemand.js', function () {
        extraFunction('loaded from the parent page');
        document.body.appendChild(document.createTextNode('done!'));
    });
};

script3：

$L = function (c, d) {
    for (var b = c.length, e = b, f = function () {
            if (!(this.readyState
                    && this.readyState !== "complete"
                    && this.readyState !== "loaded")) {
                this.onload = this.onreadystatechange = null;
                --e || d()
            }
        }, g = document.getElementsByTagName("head")[0], i = function (h) {
            var a = document.createElement("script");
            a.async = true;
            a.src = h;
            a.onload = a.onreadystatechange = f;
            g.appendChild(a)
        }; b;) i(c[--b])
};

Answer 1

使用ajax加载脚本。更具体地说，它使用XHR加载一些js并将其提供给浏览器。没有阻止。它仍然执行相同的原始政策。
通过创建<script/>元素修改标头以注入新的.js文件。这也不会阻止浏览器加载页面。
和＃2一样，但似乎支持一系列脚本。它还将async设置为true，这不会导致阻塞。 for循环更令人困惑，因为它创建了更多的匿名方法。

Answer 2

似乎用XmlHttpRequest和eval()检索脚本。如果脚本未托管在同一协议/域/端口上，则无法使用此功能。
和3.似乎都做同样的事情：他们创建一个<script src="the script url"></script>元素，在其上绑定onload个事件并将其插入页面。加载后，浏览器会执行该脚本，并触发onload事件。

Answer 3

通过ajax获取脚本，eval()是内容
将script元素插入head元素，并在加载后报告
与（2）相同但是接受和脚本网址的数组，并且写得更复杂

（2）和（3）都使用onreadystatechange钩子，这可能与旧浏览器不兼容（例如，Firefox 3.x及以下版本不支持它）。

（1）可能是最强大的，兼容性方面，因为它只需要XHR。但是如果你在代码中遇到错误，那么浏览器的控制台可能不是很有帮助，因为错误只发生在“eval'd代码”而不是特定的文件/行中。也就是说，延迟加载通常是一种优化，因此您可以在调试时正常包含脚本，或者使用任何其他两种方法。

Answer 4

您应该尝试这个名为head.js

的新库

他们有一些有趣的想法和apis ..希望它有所帮助。

或者你可以做的是使用普通的xhr请求来获取你的脚本文件名并使用这样的方法插入到dom中..我也添加了removeScript部分。

addScript = function(file)
{
    var headID = document.getElementsByTagName("head")[0];         
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = file;
    headID.appendChild(newScript);
};
removeScript = function(file)
{
    var headID = document.getElementsByTagName("head")[0].children;
    for(var i in headID)
        if(headID[i].tagName == "SCRIPT")
            if(headID[i].getAttribute('src') == file)
                headID[i].parentNode.removeChild(headID[i]);
}

如果您使用像jquery这样的库，您不需要担心任何事情，您可以从服务器获取html或脚本标记，并使用.html（）api将其插入到dom中

懒加载javascript

4 个答案: