动态JavaScript技术总结

大多数浏览器是并行下载组件的，但下载外部脚本时，在脚本的下载、解析并执行完毕之前，不会开始下载任何其他内容。

下面几种方式既可以使用外部脚本又能避免因阻塞导致的减速影响：

（1）XHR Eval

（2）XHR Injection

（3）Script in Iframe

（4）Script DOM Element

（5）Script Defer

（6）document.write Script Tag

代码如下：

 1 var Script = {
 2     createXHR: function() {
 3         var xhr;
 4         try {
 5             xhr = new XMLHttpRequest();
 6         } catch (e) {
 7             var progid = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 
 8                 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Miscrosoft.XMLHTTP'];
 9             
             for (var i = 0, len = progid.length; i < len; i++) {
                 try {
                     xhr = new ActiveXObject(progid[i]);
                 } catch (e) {
                     continue;
                 }
                 break;
             }
         } finally {
             return xhr;
         }
     },
     XHREval: function(url) {
         var xhr = this.createXHR();
 
         xhr.onreadystatechange = function() {
             if (xhr.readyState === 4 && xhr.status === 200) {
                 eval(xhr.responseText);
             }
         }
         xhr.open('GET', url, true);
         xhr.send(null);
     },
     XHRInject: function(url) {
         var xhr = this.createXHR();
 
         xhr.onreadystatechange = function() {
             if (xhr.readyState === 4 && xhr.status === 200) {
                 var script = document.createElement('script');
                 document.getElementsByTagName('head')[0].appendChild(script);
                 script.text = xhr.responseText;
             }
         };
         xhr.open('GET', url, true);
         xhr.send(null);
     },
     scriptDOM: function(url) {
         var script = document.createElement('script');
         script.src = url;
         document.getElementsByTagName('head')[0].appendChild(script);
     },
     scriptIframe: function(url) {
         var iframe = document.createElement('iframe');
         iframe.setAttribute('id', 'iframeScript');
         iframe.setAttribute('src', url);
         document.body.appendChild(iframe);
         
         //通过getElementById访问iframeScript
         document.getElementById('iframeScript').contentWindow.createNewDiv();
 
         /**
          * iframeScript中的createNewDiv函数
          * 通过parent访问主页面
          function createNewDiv() {
              var newDiv = document.createElement('div');
              parent.document.body.appendChild(newDiv);
          }
          */
     },
     scriptTag: function(url) {
         document.write('<script type="text/javascript" src="' + url + '"><\/script>');   
     }

 }; 

 各种技术对比：

技术	并行下载	跨域	忙指示器	确保顺序
Normal Script Src	(IE8,Saf4)a	是	IE、Saf4、(FF、Chr)b	IE、Saf4、(FF、Chr、Op)c
XHR Eval	IE、FF、Saf、Chr、Op	否	FF、Chr	--
XHR Injection	IE、FF、Saf、Chr、Op	否	FF、Chr	--
Script In Iframe	IE、FF、Saf、Chr、Opd	否	IE、Saf4、FF、Chr	--
Script DOM Element	IE、FF、Saf、Chr、Op	是	FF、Chr、Saf	FF、Op
Script Defer	IE、FF3.5、Saf4、Chr2	是	IE、FF、Saf、Chr、Op	IE、FF、Saf、Chr、Op
document.write Script Tag	(IE、Saf4、Chr2、Op)e	是	IE、FF、Saf、Chr、Op	IE、FF、Saf、Chr、Op

注：

a：脚本并行下载，但其他类型资源的下载仍然被阻塞

b：不支持JavaScript与其它资源并行下载，但支持多个JavaScript之间的并行下载

c：同a

d：在Opera中，脚本不但会并行下载而且会并行执行

e：同a