script|script 标签还需要放在body最下面吗(defer/async)
怎么讲,script 标签不需要放在 body 的最下面了!
历史背景:
以前因为 script 的执行会阻塞 dom 渲染,所以各种方案都指导我们应该把 script 标签放在 body 的最下面,避免白屏时间过长 blabla。
为什么不需要了呢
defer
真是不学习就跟不上了,浏览器有了新的特性,给 script 加上 defer 属性,后,所有带 defer 的 script 标签都会正常加载,但是会等到所有的 dom 元素都布置好了之后才执行,并且按照所有 defer script 标签的出现顺序来执行
async
async 则是 script 标签异步执行,并且不会阻塞页面的解析
适用场景:
defer
如果你的脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。
例:
评论框
代码语法高亮
polyfill.js
async
如果你的脚本并不关心页面中的DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。
例:
【script|script 标签还需要放在body最下面吗(defer/async)】百度统计
如果不太能确定的话,用defer总是会比async稳定。。。
参考:浅谈script标签中的async和defer
推荐阅读
- 学无止境,人生还很长
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 事件代理
- gitlab|gitlab 通过备份还原 admin/runner 500 Internal Server Error
- 数组常用方法一
- 幸福的婚姻不争对错!读《你要的是幸福还是对错》有感。
- 高大上还是路边摊
- 晚点的末班车
- 昨晚做春梦了吗(教给你怎么做最厉害的!梦里还有维多利亚的天使)
- 阴雨