JS --- 高性能加载与执行(无阻塞)

JS — 高性能加载与执行(无阻塞)

1. script 标签的 defer属性

2. 封装动态创建JS文件 并执行代码

参数 url(文件中的URL) callback(完成加载后的回调函数)

// 封装动态加载JS文件
//参数 url(文件中的URL) callback(完成加载后的回调函数)
function loadScript(url,callback){
  var script = document.createElement('script')
    script.type = 'text/javascript';
  var readyState = script.readyState;
    if(readyState){ //IE
      script.onreadystatechange = function(){
        if(readyState == 'loaded' || readyState == 'complete'){
          script.onreadystatechange = null;
          callback();
        }
      }
    } else{ //其他浏览器
        script.onload = function(){
          callback();
        }
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}


// loadScript() 调用
loadScript('xx.js',function(){
  console.log('调用成功')
})