延迟加载javascript

lazy loading javascript

本文关键字：javascript 延迟加载      更新时间：2023-09-26

延迟加载和按需加载这三种方式的基本区别是什么?为什么?

脚本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])
};
  1. 使用ajax加载脚本。更具体地说，它使用XHR来加载一些js并使其对浏览器可用。没有阻塞完成。它仍然执行同源策略。
  2. 修改头文件，通过创建<script/>元素注入一个新的.js文件。这也不会在页面加载时阻止浏览器。
  3. 与#2做同样的事情，但它似乎支持一系列脚本。它还将async设置为true，这不会导致阻塞。for循环更令人困惑，因为它创建了更多的匿名方法。

  1. 似乎检索脚本与XmlHttpRequest和eval()它。如果脚本不是托管在相同的协议/域/端口上，这将不起作用。

  2. 3。似乎两者都做同样的事情:它们创建<script src="the script url"></script>元素，将onload事件绑定在其上并将其插入页面上。脚本加载后由浏览器执行，并触发onload事件。

  1. 通过ajax获取脚本，eval()的内容
  2. 将script元素插入head元素，并在加载完成后报告
  3. 与(2)相同，但接受脚本url数组，并且编写得更复杂

(2)和(3)都使用onreadystatechange钩子，这可能与较旧的浏览器(例如，Firefox 3)不兼容。

在兼容性方面，

(1)可能是最健壮的，因为它只需要XHR。但是，如果在以这种方式加载的代码中出现错误，浏览器的控制台可能不是很有帮助，因为错误只是发生在"eval'd code"中，而不是在特定的文件/行中。也就是说，延迟加载通常是一个优化的事情，所以你可以只包括脚本正常，或与任何其他两种方法，在调试。

你应该试试这个叫做head.js的新库

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

或者您可以做的是使用正常的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

相关文章：