异步加载js方法整合与封装与js加载时间线

目录

• 异步加载js方法与js加载时间线
• • js加载时间线
  • 异步加载JS
  • • • • 封装 loadScript ： //按需加载执行,也就是说只想用库里某个方法才会用到

异步加载js方法与js加载时间线

学习笔记中摘取出来并整理的，是关于异步加载与时间线的内容，希望让更多的小伙伴能从中学习更多关于js的知识

js加载时间线

1.创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。

2.遇到link外部css，创建线程加载，并继续解析文档。

3.遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。

4.遇到script外部js，并且设置有async、defer，浏览器创建线程加载，对于async属性的脚本，脚本加载完成后立即执行。(异步禁止使用document.write())

5.遇到img标签，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。

6.当文档解析完成，document.readyStart=‘interactive’。

7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。(注意async的不同，但同样禁止使用document.write())

8.document对象触发DOMContentLoaded事件，这也标志着程序执行从同步执行阶段，转化为事件驱动阶段。

9.当所有async的脚本加载完并执行后、img等加载完成后，document.readyStart=‘complete’，window对象触发load事件。

10.从此，以异步响应方式处理用户输入、网络事件等。

异步加载JS

异步加载有三种方法

1.defer //IE有 IE9以下能用

整个dom文档解析完，才执行，能把js写在script标签里

eg:

2.async //除了低版本IE都能用

与上边一样替换即可
           

加载完就执行，async 只能加载外部脚本，不能把js写在script标签里

1和2执行时不会赌赛页面

3.创建script，插入dom中，加载完毕后callBack

eg:

var script=document.createElement('script');
  script.type = "text/javascript";
  script.src = "tools.js";                        //由于是异步下载，系统往下走，直接调用里边的方法会报错的，得等一会
  document.head.appendChild(script);
           

优化：

var script=document.createElement('script');
  script.type = "text/javascript";
  script.src = "tools.js";   
①
//下边只有IE有
script.readyState ="loading"  //加载完时会变成loaded或complete
//当状态码发生改变时会触发onreadystatechange事件
script.onreadystatechange = function(){
  if(script.readyState == "complete" || script.readyState == "loaded"){
  test();     //调用里边的方法
}
}
②
//除了IE的浏览器  判断是否加载完js
script.onload=function(){  //加载完，执行方法
//兼容性特别强Safari chrome firefox opera
  test();     //调用里边的方法
}
           

整合：

var script=document.createElement('script');
  script.type = "text/javascript";
  script.src = "tools.js";
if(script.readyState){
  script.onreadystatechange = function(){
    if(script.readyState == "complete" || script.readyState == "loaded"){
    test();
    }
  }
}else{
  script.onload=function(){  //加载完，执行方法
//兼容性特别强Safari chrome firefox opera
    test();     //调用里边的方法
  }
  
}
  document.head.appendChild(script);
           

封装 loadScript ： //按需加载执行,也就是说只想用库里某个方法才会用到

//如果想加载工具库没必要传回调函数，监控加载完就行了返回一个信号

function  loadScript(url,callback) {
    var script=document.createElement('script');
    script.type = "text/javascript";
    if(script.readyState){
      script.onreadystatechange = function(){  //IE
        if(script.readyState == "complete" || script.readyState == "loaded"){
          callback(); //调用里边的方法
        }
      }
    }else{
      script.onload=function(){  //加载完，执行方法
//兼容性特别强Safari chrome firefox opera
        callback();     //调用里边的方法
      }
    }
    script.src = url;   //为了避免状态瞬间变化完无法绑定IE监听所以放到了绑定下边，先绑定后下载
    document.head.appendChild(script);
  }
  loadScript('demo.js',function () {  //不可以直接传 test，程序不会识别，会出现test没定义错误，可以使用匿名函数
    test();
  });
//还有一种 不安全的方法
//eval() 方法或setInterval()  把里边字符串当代码执行
//eval( callback)；//替换  callback();
// loadScript('demo.js','test()');
//还有一种
//tools[callback]();   //替换  callback();    tools指的是函数库
//比如   var tools ={   
//                     test : function(){  },
//                   demo : function(){  },
//                         }
// loadScript('demo.js','test');
           

关于异步加载js方法整合与封装与js加载时间线的内容到这里就结束了，欢迎大家在下方评论与分享心得。。。