高性能JS笔记1——加载执行

一、脚本位置

1、Script标签尽可能放到Body底部，以减少脚本文件下载对整个页面UI渲染的影响。

2、Script标签永远不要紧跟Link标签后面。

二、组织脚本

1、合并多个文件在一个Script中加载：

<script type="text/javascript" src="/scripts/jquery.min.js&/scripts/jquery.validation.js"></script>

三、无阻塞的脚本

1、无阻塞的脚本——在 Window对象的 Load事件触发后再下载脚本。

2、延迟的脚本加载——Script标签添加 Defer属性　　

<script type="text/javascript" src="/scripts/jquery.min.js" defer></script>

3、动态脚本加载

　　通过 JS动态创建 Script元素，但必须确保在页面加载完之后再执行。下面提供一个封装函数：

function loadScript(url, callback)
{
    var script = document.createElement("script");
    script.type="text/javascript";
    if(script.readyState){ //IE
        script.onreadystatechange = function(){
            if(script.readyState=="loaded"|| script.readyState=="complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    }
    else{
        script.onload=function(){
            callback();
        }        
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

// Execute loadScript
loadScript("file1.js", function(){
    loadScript("file2.js", function(){
        loadScript("file3.js", function(){
            alert("All files are loaded!");
        });
    });
});

View Code