关于前端:script-标签还需要放在body最下面吗deferasync

55次阅读

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

怎么讲,script 标签不须要放在 body 的最上面了!

历史背景:
以前因为 script 的执行会阻塞 dom 渲染,所以各种计划都领导咱们应该把 script 标签放在 body 的最上面,防止白屏工夫过长 blabla。

为什么不须要了呢

defer

真是不学习就跟不上了,浏览器有了新的个性,给 script 加上 defer 属性,后,所有带 defer 的 script 标签都会失常加载,然而会等到所有的 dom 元素都安排好了之后才执行,并且依照所有 defer script 标签的呈现程序来执行

async

async 则是 script 标签异步执行,并且不会阻塞页面的解析

实用场景:
defer
如果你的脚本代码依赖于页面中的 DOM 元素(文档是否解析结束),或者被其余脚本文件依赖。
例:

评论框
代码语法高亮
polyfill.js
async
如果你的脚本并不关怀页面中的 DOM 元素(文档是否解析结束),并且也不会产生其余脚本须要的数据。
例:

百度统计
如果不太能确定的话,用 defer 总是会比 async 稳固。。。

参考:浅谈 script 标签中的 async 和 defer

正文完
 0