JavaScript加载方法

浏览器在加载html文件时是按顺序加载的。这就会导致一个问题：如果JavaScript代码写或引用写在head标签里，即body标签前。那么这些代码是获取不到DOM元素的。有三种方法可以解决这个问题。

1. 把JavaScript代码发到body后，这是最简单粗暴的方式。但是有一点点问题：JavaScript代码只有在前面所有的DOM元素加载完成后才能被加载，这会减慢网页的加载速度。（其实实际使用时也没感觉到太大的区别）

2. 添加事件。

   document.addEventListener("DOMContentLoaded", function() {
           //javascript代码
   });
   

3. 使用defer和async，二者都会让浏览器另外开线程区下载script，所以script加载不会阻塞d网页下载。但是他们有些许区别。

   • defer

   按顺序加载，在网页全部加载完毕后执行。

   
      <script defer src="js/vendor/jquery.js"></script>
   
      <script defer src="js/script2.js"></script>
   
      <script defer src="js/script3.js"></script>
   
   

   • async

   按任意顺序加载，不管网页有没有加载完毕，只要script下载完成就开始执行。

     <script async src="js/vendor/jquery.js"></script>
   
     <script async src="js/script2.js"></script>
   
     <script async src="js/script3.js"></script>