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