script标签加载

阻塞式脚本
每一个script标签,下载和执行都会阻塞页面的渲染.多个script标签加载, 会依次下载执行,后者都必须等待前者下载并执行.
非阻塞式脚本

延迟脚本加载

在HTML4中script标签扩展了也defer属性, 该属性以支持主流浏览器. 有defer属性的script标签,会在浏览器解析到script标签时开始下载, 不会立即执行.会在月面加载完成后执行.即window.onload事件处理之前被执行.

async

async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）

动态加载script

既使用dom操作在页面动态添加script标签. 建议添加在页面的head标签里(这样更为安全, ie在body为加载完时, 可能会抛出一个"操作终止"的错误信息),
在script标签添加到页面时开始下载并且执行.不会阻塞页面.
在script标签接收完成时会触发一个onload事件,IE着为onreadystatechange(用script.readyState判断不同阶段.主要使用loaded,complete判断)

var loadScript = function(url,callback){
  var script = document.createElement('script');
  script.type = "text/javascript";
  if(script.readyState){//IE
    script.onreadystatechange = function(){
      if(script.readyState == 'loaded' || script.readyState == 'complete'){
        script.onreadystatechange = nuul;//阻止重复调用
        callback();
      }
    }
  }else{
    script.onload = function(){
      callback();
    }
  }
  script.src = url;
  document.getElementByTagName('head')[0].appendChild(script)
}

script标签加载

评论 (0)