浏览器对HTML文档的解析，以及script标签属性defer与async

1、地址栏输入url，回车会发生什么？

  1）浏览器像服务器发送请求
  2）服务器将请求的HTML内容返回给浏览器
  3）浏览器由上到下解析HTML内容，解析完成之后生成DOM树
  4）浏览器根据DOM树内容转化为各个节点，显示在页面上

2、script标签defer，async属性的作用？

  浏览器解析HTML本是由上往下同步执行，这种情况下，若script标签不是在放在body标签之后，则浏览器解析到script时，若此script的src指向了一个较大的资源，并且执行时间也很长的话，位于后面的html元素解析就会停滞，需等到这个耗时的js资源加载执行完毕后，才接着往下解析，造成页面加载白屏长。而defer和async属性的出现就会很好的避免这一问题。
相同点：
    1）带有两者的script标签，其src指向的js脚本都是异步加载的，很好的避免了文档解析阻塞
不同点：
    1）defer 指向的js脚本是异步加载后，待到文档解析完成，脚本才会执行，而async会在js脚本下载完成后立即执行
    2）基于不同点1），defer会在DOMContentLoaded事件触发前执行，而async无法保证与DOMContentLoaded的先后顺序

综上所述：在script加defer属性和我们把script放在body最底部的效果一样，都可以确保js脚本能获取到页面的DOM，而async指向的脚本中，不适合有操作DOM的逻辑

tips：DOMContentLoaded 事件是 dom 加载完毕了，但是各种标签里面的内容没有拿到，比如说图片，所以我们看到有图片区域会显示空白

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net