理解html中script标签的defer与async属性

理解html中script标签的defer与async属性

经常会在一些地方看到一些<script>标签带上了deferasync,总是搞不清楚两者的具体区别,于是想记录下来。

从单词语义上来,defer代表延迟,async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。

如果没有defer和async

<script>标签如果没有带上deferasync属性的话,浏览器会立即加载并执行标签内的脚本,意思大概是不等待后续载入的文档元素,读到这个<script>标签就加载并执行。

如果有defer

defer的意思是延迟,也就是说延迟执行,除了这一点,加载的过程是异步的。那么就很好解释了,当遇到

1
<script defer>

这种标签时,会开始加载script标签内容,但是不会阻塞后续文档元素的渲染,待所有页面元素解析完成后,DOMContentLoaded 事件触发之前执行这个script标签的代码。

如果有async

async就是sync的反义词,代表异步,也就是说异步加载和执行。所以,当遇到

1
<script async>

这种标签时,加载和执行脚本的同时不会阻塞其他文档元素的渲染。

多个标签的情况

还有一点要注意的就是,多个async标签是不会相互影响的,谁先加载完,谁就先执行了。而多个defer标签是异步加载,但是最后执行的顺序是根据其在页面上的顺序来决定的。

现在是不是觉得豁然开朗了呢?


扫一扫下方小程序码或搜索Tusi博客,即刻阅读最新文章!

Tusi博客

# html
You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×