联通 网站备案,延边延吉网站建设,大学网站建设招标方案,网站百度地图标注我持续组织了近一年的源码共读活动#xff0c;感兴趣的可以 点此扫码加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外#xff1a;目前建…我持续组织了近一年的源码共读活动感兴趣的可以 点此扫码加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外目前建有江西|湖南|湖北籍前端群可加我微信进群。前言在面试的时候经常会遇到一道经典的面试题如何优化网页加载速度常规的回答中总会有一条把 css 文件放在页面顶部把 js 文件放在页面底部。那么为什么要把 js 文件放在页面的最底部呢我们先来看下这段代码!DOCTYPE html
html langzhheadtitleHi/titlescriptconsole.log(Howdy ~);/scriptscript srchttps://unpkg.com/vue3.2.41/dist/vue.global.js/scriptscript srchttps://unpkg.com/vue-router4.1.5/dist/vue-router.global.js/script/headbodyHello ~/body
/html他的执行顺序是在控制台打印Howdy ~请求并执行 vue.global.js请求并执行 vue-router.global.js在页面中展示Hello ~触发 DOMContentLoaded[1] 事件script 加载逻辑浏览器的解析规则是如果遇到 script 标签则暂停构建 DOM转而开始执行 script 标签如果是外部 script[2]那么浏览器还需要一直等待其「下载」并「执行」后再继续解析后面的 HTML。如果请求并执行「vue.global.js」需要 3 秒「vue-router.global.js」需要 2 秒那么页面中的 Hello ~则至少需要 5 秒以上才会展示出来。可以看到script 标签会阻塞浏览器解析 HTML如果把 script 都放在 head 中在网络不佳的情况下就会导致页面长期处于白屏状态。在很久以前一般都是将这些外联脚本放在 body 标签的最后面确保先解析展示 body 中的内容然后再一个个请求执行这些外联脚本。那有没有其他更优雅的解决方案呢答案是肯定的现在 script 标签新增了 2 个属性defer 和 async就是为了解决此类问题提升页面性能的。script defer先看一下 MDN 上的解释这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后触发 DOMContentLoaded 事件前执行。有 defer 属性的脚本会阻止 DOMContentLoaded 事件直到脚本被加载并且解析完成。文档是直接总结了他的特性我们先看看下面的代码展开说说细节加深一下理解。!DOCTYPE html
html langzhheadtitleHi/titlescriptconsole.log(Howdy ~);/scriptscript defer srchttps://unpkg.com/vue3.2.41/dist/vue.global.js/scriptscript defer srchttps://unpkg.com/vue-router4.1.5/dist/vue-router.global.js/script/headbodyHello ~/body
/html他的执行顺序是在控制台打印Howdy ~在页面中展示Hello ~请求并执行 vue.global.js请求并执行 vue-router.global.js触发 DOMContentLoaded[3] 事件script defer 加载逻辑如果在 script 标签上设置了 defer 属性那么在浏览器解析到这里时会默默的在后台开始下载此脚本并继续解析后面的 HTML并不会阻塞解析操作。等到 HTML 解析完成之后浏览器会立即执行后台下载的脚本脚本执行完成之后才会触发 DOMContentLoaded 事件。看起来还是蛮好理解的吧咱们再来讨论 2 个小细节Q1 如果 HTML 解析完成之后设置了 defer 属性的脚本还没下载完成会怎样A1 浏览器会等脚本下载完成之后再执行此脚本执行完成之后再触发 DOMContentLoaded 事件。Q2 如果有多个设置了 defer 属性的脚本那浏览器会如何处理A2 浏览器会并行的在后台下载这些脚本等 HTML 解析完成并且所有脚本下载完成之后再按照他们在 HTML 中出现的相对顺序执行等所有脚本执行完成之后再触发 DOMContentLoaded 事件。最佳实践建议所有的外联脚本都默认设置此属性因为他不会阻塞 HTML 解析可以并行下载 JavaScript 资源还可以按照他们在 HTML 中的相对顺序执行确保有依赖关系的脚本运行时不会缺少依赖。在 SPA 的应用中可以考虑把所有的 script 标签加上 defer 属性并且放到 body 的最后面。在现代浏览器中可以并行下载提升速度也可以确保在老浏览器中不阻塞浏览器解析 HTML起到降级的作用。注意defer 属性仅适用于外部脚本如果 script 脚本没有 src则会忽略 defer 特性。defer 属性对模块脚本script typemodule[4]无效因为模块脚本就是以 defer 的形式加载的。script async按照惯例先看一下 MDN 上的解释对于普通脚本如果存在 async 属性那么普通脚本会被并行请求并尽快解析和执行。对于模块脚本如果存在 async 属性那么脚本及其所有依赖都会在延缓队列中执行因此它们会被并行请求并尽快解析和执行。该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本之后才能继续解析。感觉这段描述的已经蛮清晰了不过咱们还是先看看下面的代码展开说说细节加深一下理解。!DOCTYPE html
html langzhheadtitleHi/titlescriptconsole.log(Howdy ~);/scriptscript async srchttps://google-analytics.com/analytics.js/scriptscript async srchttps://ads.google.cn/ad.js/script/headbodyHello ~/body
/html他的执行顺序是在控制台打印Howdy ~并行请求 analytics.js 和 ad.js在页面中展示Hello ~根据网络的实际情况以下几项会无序执行执行 analytics.js下载完后立即执行执行 ad.js下载完后立即执行触发 DOMContentLoaded 事件可能在在上面 2 个脚本之前之间之后触发script async 加载逻辑浏览器在解析到带有 async 属性的 script 标签时也不会阻塞页面同样是在后台默默下载此脚本。当他下载完后浏览器会暂停解析 HTML立马执行此脚本。看起来还是蛮好理解的吧咱们再来讨论 2 个小细节Q1如果设置了 async 属性的 script 下载完之后浏览器还没解析完 HTML会怎样A1浏览器会暂停解析 HTML立马执行此脚本等执行完之后再继续解析 HTML。Q2如果有多个 async 属性的 script 标签那等他们下载完成之后会按照代码顺序执行吗A2不会。执行顺序是谁先下载完成谁先执行。async 的特点是「完全独立」不依赖其他内容。最佳实践当我们的项目需要集成其他独立的第三方库时可以使用此属性他们不依赖我们我们也不依赖于他们。通过设置此属性让浏览器异步下载并执行他是个不错的优化方案。注意async 特性仅适用于外部脚本如果 script 脚本没有 src则会忽略 async 特性。总结defer不阻塞浏览器解析 HTML等解析完 HTML 之后才会执行 script。会并行下载 JavaScript 资源。会按照 HTML 中的相对顺序执行脚本。会在脚本下载并执行完成之后才会触发 DOMContentLoaded 事件。在脚本执行过程中一定可以获取到 HTML 中已有的元素。defer 属性对模块脚本无效。适用于所有外部脚本通过 src 引用的 script。async不阻塞浏览器解析 HTML但是 script 下载完成后会立即中断浏览器解析 HTML并执行此 script。会并行下载 JavaScript 资源。互相独立谁先下载完谁先执行没有固定的先后顺序不可控。由于没有确定的执行时机所以在脚本里面可能会获取不到 HTML 中已有的元素。DOMContentLoaded 事件和 script 脚本无相关性无法确定他们的先后顺序。适用于独立的第三方脚本。另外async 和 defer 之间最大的区别在于它们的执行时机。One More Thing你有没有想过如果一个 script 标签同时设置 defer 和 async浏览器会如何处理先说结论从表现形式上来说async 的优先级比 defer 高也就是如果同时存在这 2 个属性那么浏览器将会以 async 的特性去加载此脚本。这主要分 2 种情况如果是「普通脚本」浏览器会优先判断async属性是否存在如果存在则以async特性去加载此脚本如果不存在再去判断是否存在defer属性。如果是「模块脚本[5]」浏览器会判断async属性是否存在如果存在浏览器会并行下载此模块和他的所有依赖模块等全部下载完成之后会立刻执行此脚本。如果不存在浏览器也会并行下载此模块和他的所有依赖模块然后等浏览器解析完 HTML 之后再执行此脚本。另外需要注意的是在模块脚本上设置 defer 属性是无效的。一图胜千言最后用一张图概括一下这两个属性的加载模式吧defer 和 async 的加载模式思考题 为什么浏览器在解析到普通的 script 标签时必须先执行他普通的 script 标签会阻塞浏览器解析 HTML这会导致什么问题本文首发于https://github.com/mrlmx/blogs/issues/4 如果喜欢记得去点个赞哦~ ❤️参考https://javascript.info/script-async-defer[6]https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html[7]https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script[8]https://html.spec.whatwg.org/multipage/scripting.html[9]相关链接[1]DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event[2]外部 script: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src[3]DOMContentLoaded: https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event[4]script typemodule: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type[5]模块脚本: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type[6]https://javascript.info/script-async-defer: https://javascript.info/script-async-defer[7]https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html: https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html[8]https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script[9]https://html.spec.whatwg.org/multipage/scripting.html: https://html.spec.whatwg.org/multipage/scripting.html················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经坚持写了8年点击查看年度总结。同时最近组织了源码共读活动帮助5000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。扫码加我微信 lxchuan12、拉你进源码共读群今日话题目前建有江西|湖南|湖北 籍 前端群想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~
