无阻赛的脚本

js脚本的加载与执行

2、 动态添加脚本 
通过动态创建script标签引入外部脚本，加载完后立即执行。 
这种技术的特点：无论何时启动下载，文件的下载和执行不会阻塞页面其他进程。(把新建的脚本放在head里面比body要好，以防body还未加载完成) 
但是当有其他脚本依赖于该动态引进的脚本时，必须保证该脚本下载完毕并且准备就绪。FF、chrome等通过script的onload事件监听，而IE通过触发readystatechange事件来监听。 
FF、Chrome

```javascript

1. script.onload=function (){
2. //脚本加载完毕，可以执行依赖该脚本的操作
4. };

```

IE浏览器中：

1. script.onreadystatechange=function (){
2. if(script.readyState==‘loaded‘ || script.readyState==‘complete‘){
3. //脚本加载完毕
4. }
5. };

综上，一个通用的方法：

1. function loadscript（url,callback）{
2. var script=document.createElement(‘script‘);
3. script.src=url;
4. if(script.onload){
5. script.onload=function (){
6. //脚本加载完毕，可以执行依赖该脚本的操作
7. callback();
8. };
9. }else{ //IE
10. script.onreadystatechange=function (){
11. if(script.readyState==‘loaded‘ || script.readyState==‘complete‘){
12. callback(); //脚本加载完毕
13. }
14. };
15. }
16. document.getElementsByTagName(‘head‘)[0].appendChild(script);
17. }

多个脚本有依赖关系时，可以 
loadscript（‘f1.js‘,function (){ 
loadscript(‘f2.js‘,function(){ }); 
}）； 
3、XMLHttpRequest脚本注入

1. var xhr = new XMLHttpRequest();
2. xhr.open("get", "file1.js", true);
3. xhr.onreadystatechange = function(){
4. if (xhr.readyState == 4){
5. if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
6. var script = document.createElement ("script");
7. script.type = "text/javascript";
8. script.text = xhr.responseText;
9. document.body.appendChild(script);
10. }
11. }
12. };
13. xhr.send(null);

优点：所有主流浏览器都支持 
缺点：请求的js脚本必须和页面处于相同的域（文件无法从CDN下载）。大型的web应用一般不会采用该方法。

4、document.write Script Tag 
使用document.write把HTML标签script写入页面。 
缺点是只有在IE中是并行加载脚本的。 
代码如下:

1. document.write("<script type=‘text/javascript‘ src=‘test.js‘><\/script>");