关于Js异步加载的理解

首先了解一下Js加载的三种方式：

1.阻塞加载：

  平常默认使用的都是阻塞加载。例如：

  阻塞加载会阻止浏览器的后续处理，停止了后续的文件的解析，执行，如图像的渲染。为了这样可以让页面先显示出来，我们通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。

2.延迟加载：

  延迟加载是脚本延迟到文档被完全解析和显示之后再执行。有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的，这个时候我们就可以通过延迟加载来执行这些不是立刻就需要的模块，就像图片的延迟加载，在图片出现在可视区域内时才加载显示图片。当页面有大量数据的时候使用延迟加载可以加快页面加载速率，给用户良好的体验。延迟加载基本用于定时器中。

3.异步加载：

  异步加载是立即下载js’脚本的同时又不妨碍页面中的其他操作。

然后异步加载js的实现，有下面三种方法：

• defer：规定是否对脚本执行进行延迟，但却是并行下载，要等到DOM文档全部加载解析好了，才会被执行。只有IE能用，也可以将代码写到内部,如下：

   
   
   defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
  
   浏览器将会并行下载 demo.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。
  

• async：异步加载，加载好了就执行，不管页面是否解析好。async只能加载外部脚本，不能把js写在script标签里(IE9以上都能执行，比较普遍)。

   
   
   async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
  

• 创建script，插入到DOM中，加载完成后callBack（这种形式的异步加载除了IE浏览器无法执行，其他都是可以的）。如下：

      function loadScript(url,callback){
            var script = document.createElement("script");
            if(script.readyState){
            		script.onreadystatechange = function(){
                    	if(script.readState == "complete" || script.readState == "loaded"){
                        	callback();
                    	}
              	}
            }else{
                	script.onload = function(){  
                    	callback();
                	}
            }
            script.src = url;
            document.head.appendChild(script)
      }
  
      loadScript("xxx.js",function(){
      	test();
      })
  	  
  	function test(){
      	console.log("Hello World");
      }
  

异步加载的问题
  在异步加载的时候，无法使用异步加载JS中不能用doucument.write()方法 输出文档内容。在同步模式下，document.write 是在当前 script 所在的位置输 出文档的。而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。
实际上document.write的名声并不好，最好少用。

 替代方法：
  1. 虽然异步加载不能用 document.write，但还是可以onload之后执行操作dom（创建dom或修改dom）的，这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素，这和它在页面中的位置就没关系了，只要创建出该dom元素添加到 document 中即可。
  2. 如果需要在固定位置异步生成元素的内容，那么可以在该固定位置设置一个dom元素作为目标，这样就知道位置了，异步加载之后就可以对这个元素进行修改。

上面是个人对异步加载的理解。如有错误欢迎指正，当然，有疑问也欢迎评论区提问。