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

5次阅读

共计 668 个字符，预计需要花费 2 分钟才能阅读完成。

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 加载结束了，然而各种标签外面的内容没有拿到，比如说图片，所以咱们看到有图片区域会显示空白

正文完