脚本加载技术

脚本加载技术

我们常常在网页中用行内脚本或外部脚本的形式将javascript包含在里面。但是，对于外部脚本而言，当浏览器开始下载外部脚本的时候，在脚本下载，解析并执行完毕之前，浏览器不会下载任何其他的内容。浏览器出现这种阻塞现象的原因在于，脚本可能会改变页面或者javascript的名字空间，他们会对后续内容造成影响。

我们当然希望脚本能够按需执行，但没有必要按顺序下载。为此就出现了几种能够并行加载脚本的技术。

一。XHR Eval

该技术的实现原理就是通过ajax技术获取脚本代码，并通过eval去执行它，但是这种方式的缺陷是外部脚本必须部署在同一域中。其实现代码如下：

var xhrObj=getXHRObject();

xhrobj.onreadystatechange=function(){
    if(xhrObj.readyState==4 && 200 == xhrObj.status){
        eval(xhrObj.responseText);
    }
};
xhrObj.open('GET','A.js',true);
xhrObj.send('');
function getXHRObject(){
    var xhrObj=false;
    try{
        xhrObj=new XMLHttpRequest();
    }catch(e){
        var progid=['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
            for(var i=0; i<progid.length; ++i){
                try{
                    xhrObj=new ActiveXObject(progid[i]);
                }catch(e){
                    continue;
                }
                break;
            }
    }finally{
        return xhrObj;
    }
}

 

二。XHR注入

该技术的原理是通过ajax技术获取脚本内容，并插入页面中作为行内脚本来执行的方式。该方式与上面的方式，因为都是通过ajax技术实现，因此都需要同域。

var xhrObj=getXHRObject();
xhrObj.onreadystatechange=function(){
    if(xhrObj.readyState==4){
        var scriptElem=document.createElement('script');
        codument.getElementsByTagName('head')[0].appendChild(scriptElem);
        scriptElem.text=xhrObj.responseText;
    }
};
xhrObj.open('GET','A.js',true);
xhrObj.send('');
function getXHRObject(){
    var xhrObj=false;
    try{
        xhrObj=new XMLHttpRequest();
    }catch(e){
        var progid=['MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
            'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
            for(var i=0; i<progid.length; ++i){
                try{
                    xhrObj=new ActiveXObject(progid[i]);
                }catch(e){
                    continue;
                }
                break;
            }
    }finally{
        return xhrObj;
    }
}

三。script in iframe

该技术通过在iframe中加载一个html页面，并在该html页面中嵌入行内脚本来实现。该技术跟前面的XHR Eval技术一样需要对外部脚本进行重构，并且iframe本身消耗很高，并不是一个十分理想的技术。

<iframe src="A.html" width=0 height=0 frameborder=0 id=frame1></iframe>

四。script DOM element

该技术应该算是一种比较好的实践方式，它使用脚本动态的创建script DOM元素并设置其src属性，它不要求同域，也不会像上面几种方法那样需要对代码进行重构。

var scriptElem=document.createElement('script');
scriptElem.src='http:/anydomain.com/A.js';
document.getElementsByTagName('head')[0].appendChild(scriptElem);

五。script defer

defer属性是非常简单的防止脚本阻塞行为的方法，只需要在加载的脚本中添加一个属性即可：

<script defer src="A.js"></script>

但是这种方法只有IE和一些新浏览器支持它。

六。document.write script tag

该技术是使用document.write把HTML标签script写入到页面中，但是跟script defer一样，该技术只在IE中是并行加载脚本的。虽然它实现了并行加载脚本，但是在下载脚本的时候，浏览器仍然阻塞其他类型的资源。

document.write("<script type='text/javascript' src='A.js'></script>");

 

上面这些技术都能实现脚本的并行加载，但是每一种技术都有其缺陷，以至于我们不能紧靠其中一种方法就能够构建出我们所需要的功能。比如在脚本执行顺序上，script DOM element技术只在firefox和opera浏览器中能够确保执行顺序，这是它的一个缺陷。虽然script defer技术只在IE和一些新的浏览器中能够并行加载脚本，但是它对所有的浏览器都能够确保执行顺序，document.write script tag技术因为其只在部分浏览器中实现了并行下载，并且还会阻塞脚本之外的其他资源下载，因此不推荐使用该技术。在实际应用中我们需要根据具体情况综合来使用这些技术。