js 异步加载 封装异步加载js函数

js加载的缺点

加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染的工作

有些工具方法需要按需加载，用到在加载，不用不加载

js异步加载

三种方案

defer

要等dom文档全部解析完才会被执行，IE独有，也可以把代码写在内部

<script type="text/javascript" src="./index.js" defer="defer"></script> <script type="text/javascript" defer="defer"> console.log('deffer') </script>

async

加载完就执行，async 只能加载外部脚本，不可以把代码写在script内，IE9以下不兼容

<script type="text/javascript" src="./index.js" async="async"></script>

动态创建script

动态创建script，插入到DOM中，加载完后callback

var script = document.createElement('srcript'); script.type = "text/javascript"; script.src = "index.js";// 开始加载js文件 不执行 // script.onload = function(){ // js加载完触发 不兼容IE // //调用index的方法 // } // IE //script.onreadestatechange = function(){ // if(script.readyState == "loaded" && script.readyState == //"complete"){ // //调用index的方法 // } //} //document.head.appengChild(script);//开始执行 // 兼容写法 if(script.readyState){ script.onreadestateshange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ //调用index的方法 } } }else{ script.onload = function(){ //调用index的方法 } } document.head.appengChild(script);//开始执行

封装异步加载js函数

function loadScript(url,callback){ var script = document.createElement('srcript'); script.type = "text/javascript"; if(script.readyState){ //IE script.onreadestatechange = function(){ if(script.readyState == "loaded" || script.readyState == "complete"){ callback() } } }else{ script.onload = function(){ callback() } } script.src = url; //放这里 防止事件还没绑定 url加载完了 就不会执行 callback document.head.appengChild(script);//开始执行 } loadScript('./index.js',function(){ test() }) // 或 // loadScript('./index.js','test()'); //eval(callback);//不建议用 // 或 // index.js // obj = { // test: function(){} // } // loadScript('./index.js','test'); //obj[callback]()