关于html无阻塞加载文件方式有很多，本文主要讲述如何通过Script Dom 的方式来动态插入解决的思路

首先需要判断当前文件是什么类型，一般就是CSS和Javascript类型。

   function extname(path){
    var splitPath = /^(\/?)([\s\S]+\/(?!$)|\/)?((?:\.{1,2}$|[\s\S]+?)?(\.[^.\/]*)?)$/;
    var fileName = (path.match(splitPath) || [])[4] || "";
            return fileName.toLowerCase();
   }
   var type = extname(url).split('.')[1].split('?')[0]

因为根据不同的文件类型加载的方式和位置是不一样的

然后再根据不同类型进行节点方式选择

  var node  = document.createElement(type === 'css' ? 'link' : 'script')

最关键的是加载的状态判定，如果您要考虑IE 8的加载状态，就要使用 onreadystatechange 的方法，同时还要根据 node.readyState来进行判断

node.readyState有以下几种状态

• uninitialized（未初始化）：对象存在尚未初始化；

• loading（正在加载）：对象正在加载数据；

• loaded（加载完毕）：对象数据加载完成

• interactive（交互）：可以操作对象，但是还没有完全加载；

• complete（完成）：对象已经加载完毕。

实现代码如下：

 var loadStatus = 'onload' in node,
     readyEvent = loadStatus ? 'onload' : 'onreadystatechange';

     node[readyEvent] = function(){
        if(readyEvent == 'onload'){
            //todo something
        }else{
            //IE加载状态监测，为了兼容性更好，多增加loaded判断。如果没有在IE会提前加载的异常抛出
            if(/loaded|complete/.test(node.readyState)){
                //todo something
            }
        }
     }

当然如果再执行过程中出现任何异常可以发起讨论