
关于 script 标签 async 和 defer 属性分析
折腾了半个来月的时间,终于把工作的事情稳定了下来。分析了一下现状,还是不要急着玩一些新鲜的东西。遂定了个计划,在工作之余重新学习 JavaScript 的基础,每周学一章高程,做好总结和笔记。頑張ります!
前言
async 和 defer 是高程第二章的两个概念,印象里没有主动用过这俩属性,特别是写 SPA 之后,更没什么合适机会操作 script 标签。
文字很难表述两者间的差异,至少我是这么认为,网上有张图很不错,可以用来解释这两个属性间的差异。
正文
当不加 aysnc 和 defer 时
在解析 HTML 的过程中
如果遇到 script 标签
浏览器将暂停解析 HTML
开始
下载
script 标签里的内容待
下载
完成后,立即执行 script 标签里的内容执行完毕后,再去解析 HTML 标签
当使用 async 属性时
在解析 HTML 的过程中
如果遇到 script 标签
解析 HTML 将和
下载
script 标签的内容同时进行当此 script 标签
下载
完成后HTML 将停止解析,转而
执行
此 script 标签的内容执行完毕后,再去解析 HTML 标签
当使用 defer 属性时
在解析 HTML 的过程中
如果遇到 script 标签
解析 HTML 将和
下载
script 标签的内容同时进行当 script 标签
下载
完成后仍然等到 HTML 全部解析完毕
再去执行此 script 标签的内容
思考
高程上说当多个 script 都有 defer 属性时,最后会按顺序执行,但实际上不一定;而 async 肯定不一定按顺序执行。
现实场景中可以说 100%都把 script 标签扔到 body 的最后,也就是最后下载,最后执行,在引入三方插件时倒是经常用到,比如:
Twitter share button
Google Analytics
LiveRe / Disqus
这些的一个特点都是以动态创建 script 标签的形式来引入外部 js,类似于 JSONP,而内容上都是和项目整体关联不大的模块。
补充
平成 31 年 1 月 2 日做下补充,无论是 defer 还是 async,都只对外部脚本有效。
最后
以上、よろしく。

PREVIOUS POST
HTML5.2 新特性

NEXT POST
原生 JS 实现轮播图效果