无阻塞加载javascript技术总结

1. XHR eval 

通过ajax获取js文件，后用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;

2.XHR注入

与XHR eval一样用ajax获取js文件,但用创建一个DOM元素来执行代码(可能比XHR eval方式快)

例子:

var xhrObj = getXHRObject();

xhrObj.onreadystatechange = 

     function() {

          if (xhrObj.readState == 4) {

               var scriptElem = document.createElement('script');

               document.getElementsByTagName('head')[0].appendChild(scriptElem);

               scriptElem.text = xhrObj.responseText;

          }

     }

xhrObj.open('GET','a.js', true);

xhrObj.send('');

3.Script in Iframe (需要同域)

利用iframe无阻塞加载技术

例子:

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

在a.html中加入行内脚本.

需要修改javascript 来创建它们之间的关系

document.getElementById('frame1').contentWindow.CreateNewDiv();

iframe中

function createNewDiv() {

     var newDiv = parent.document.createElement('div');

     parent.document.body.appendChild(newDiv);

}

iframe是开销最高的DOM元素.

4.Script DOM Element (允许跨域)

使用javascript动态创建script DOM元素并设置src属性

例子:

var scriptElem = document.createElement('script');

scriptElement.src = 'http://domain.com/a.js';

document.getElementsByTagName('head')[0].appendChild(scriptElement);

5. Script Defer

只有IE有这属性

例子: <script defer src='a.js'></script>

6. document.write Script Tag

只有IE才能并行加载

例子: document.write('<script type="text/javascript" src="a.js"></script>');

示以图:

转载于:https://my.oschina.net/rickyfeng/blog/98917