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