当前位置:编程学习 > JS >>

JS 异步加载延迟执行插件

最近因工作的需要主要做web前段的优化,其中之一就是js的优化,在项目中的js代码相对比较规范的,都是$(function(){})这种格式。但是大家都知道js的下载比较耗时的,它的解析和执行是阻塞式的。我们是否可以先让js下载下来,在windows的load事件中在去解析和执行了。答案是肯定的,其中ControlJS .js就实现了这种方式。个人觉得它比LAB的延迟加载要优秀的一点,减少了js的加载时间。但是该js功能相对比较强大,同时也没有解决js依赖关系的加载。个人自己写了一个小插件 来实现js异步加载延迟执行。


代码如下:

 

[javascript]
(function () {
    var document = window.document;
    var getAttribute = function (elem, name) {
        var attrs = elem.attributes;
        var len = attrs.length;
        for (var i = 0; i < len; i++) {
            var attr = attrs[i];
            if (name === attr.nodeName) {
                return attr.nodeValue;
            }
        }
 
        return undefined;
    };
 
    var scriptstbData;
    var orders = [];
    var findScripts = function () {
        var aScripts = document.getElementsByTagName('script');
        var len = aScripts.length;
        var scriptsArr = [];
        var scriptsSrc = [];
 
        for (var i = 0; i < len; i++) {
            var script = aScripts[i];
            if ("text/asynjs" === getAttribute(script, "type") && "undefined" === typeof (script.founded)) {
                script.founded = true;
                var order = getAttribute(script, "order") || getAttribute(script, "data-order") || 0;
                script.order = order;
                if (orders.indexOf(order) < 0) {
                    orders.push(order);
                }
                var src = getAttribute(script, "asynsrc") || getAttribute(script, "data-asynsrc");
                script.src = src;
                if (src && scriptsSrc.indexOf(src) < 0) {
                    scriptsArr.push(script);
                }
            }
 
        }
        orders.sort(function compare(a, b) { return a - b; });
        return scriptsData = scriptsArr;
    };
    var downloadScripts = function (scriptArr) {
        var scripts = scriptArr || findScripts();
        var len = scripts.length;
 
        for (var i = 0; i < len; i++) {
            var img = new Image();
            img.src = scripts[i].src;
            img.style.display = "none";
        }
    };
 
    var processScripts = function (scriptArr) {
        var scripts = (scriptArr && scriptArr.constructor === Array) ? scriptArr : scriptsData;
        var len = scripts.length;
        var failscripts = [];
        var wdata = [];
        for (var i = orders.length - 1; i >= 0; i--) {
            var order = orders[i];
            var urls = [];
            var fns = [];
            for (var j = 0, len = scripts.length; j < len; j++) {
                var script = scripts[j];
                if (script.order == order) {
                    urls.push(script.src);
                }
            }
            if (i == orders.length - 1) {
                wdata[order] = processScript(urls)
            }
            else {
                var nextorder = orders[i + 1];
                fns.push(wdata[nextorder]);
                wdata[order] = processScript(urls, fns);
            }
        }
        var exorder = orders[0]
        wdata[orders[0]]();
    };
    var processScript = function (urls, fn) {
        return function () {
            for (var i = 0; i < urls.length; i++) {
                var se = document.createElement('script');
           &

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,