专栏首页web前端技术分享<script>属性async和defer的区别

<script>属性async和defer的区别

async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。

defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有 效。IE7 及更早版本对嵌入脚本也支持这个属性。

延迟脚本defer

HTML 4.01 为<script>标签定义了 defer 属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>元素中设置defer 属性,相当于告诉浏览器立即下载,但延迟执行。

<!DOCTYPE html>
<html>
 <head>
 <title>Example HTML Page</title>
 <script type="text/javascript" defer="defer" src="example1.js"></script>
 <script type="text/javascript" defer="defer" src="example2.js"></script>
 </head>
 <body>
 <!-- 这里放内容 -->
 </body>
</html>

  在这个例子中,虽然我们把<script>元素放在了文档的<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5 规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于 DOMContentLoaded 事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行,因此最好只包含一个延迟脚本。

  前面提到过,defer 属性只适用于外部脚本文件。这一点在 HTML5 中已经明确规定,因此支持HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。IE4~IE7 还支持对嵌入脚本的 defer 属性,但IE8 及之后版本则完全支持 HTML5 规定的行为。IE4、Firefox 3.5、Safari 5 和 Chrome 是最早支持 defer 属性的浏览器。其他浏览器会忽略这个属性,像平常一样处理脚本。为此,把延迟脚本放在页面底部仍然是最佳选择。 异步脚本async

HTML5 为<script>元素定义了 async 属性。这个属性与 defer 属性类似,都用于改变处理脚本的行为。同样与 defer 类似,async 只适用于外部脚本文件,并告诉浏览器立即下载文件。但与 defer 不同的是,标记为 async 的脚本并不保证按照指定它们的先后顺序执行。例如:

<!DOCTYPE html>
<html>
 <head>
 <title>Example HTML Page</title>
 <script type="text/javascript" async src="example1.js"></script>
 <script type="text/javascript" async src="example2.js"></script>
 </head>
 <body>
 <!-- 这里放内容 -->
 </body>
</html> 

  在以上代码中,第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖 非常重要。指定 async 属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。 为此,建议异步脚本不要在加载期间修改 DOM。 异步脚本一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之 后执行。支持异步脚本的浏览器有 Firefox 3.6、Safari 5 和 Chrome。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用element-ui中table expand展开行控制显示隐藏(手风琴效果)

    问题讲解: 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一...

    TimothyJia
  • JS实现深浅拷贝

    TimothyJia
  • 浏览器中的 Event Loop,宏任务与微任务

      当我们执行 JS 代码的时候其实就是往执行栈中放入函数,那么遇到异步代码的时候该怎么办?其实当遇到异步的代码时,会被挂起并在需要执行的时候加入到 Task(...

    TimothyJia
  • DC/OS 1.10:Mesosphere和Kubernetes完美合体

    Mesosphere社区在两年前发布了DC/OS平台,以创建一个单一的聚合各种容器功能的平台,使该平台能够易于构建、部署和弹性扩展应用程序。 过去两年中,容器领...

    SDNLAB
  • 关于ActiveMQ传输messageObject的异常

    博主在做spring batch分片远程处理时用到ActiveMQ来通讯,但分片对象总是不能正确传输,查看ActiveMQ中的消息详情发现抛如下异常:Faile...

    kl博主
  • 7天快速掌握MySQL-DAY1刷新

    配置路径:计算机—属性—高级系统设置—环境变量—系统变量—path—编辑—新建—粘贴mysql的bin目录

    披头
  • uni-app 项目记录

    什么是async、await await 用于等待异步完成 通常async、await都是跟随Promise一起使用的

    达达前端
  • JavaScript基础——深入学习async/await

    大家好,上周我们一起学习了《JavaScript基础——Promise使用指南》, 明白了ES6增加的新特性——Promise让我们能够更加优雅的书写回调函数,...

    前端达人
  • 异步多图加载这件小事儿(Promise与async)

    日常开发过程中,时不时会遇到要同时预加载几张图片,并且等都加载完再干活的情况,结合 Promise 和 async/await 代码会优雅很多,但也容易遇到坑,...

    Bob.Chen
  • RTSP、Onvif协议安防网络摄像头输出RTMP、RTSP、HLS、FLV直播流网页无插件直播方案EasyNVR之windows设备上双击EasyNVR无法启动程序的问题解析

    EasyNVR的使用者应该都是清楚的知道,EasyNVR一个强大的功能就是可以进行全平台的无插件直播。主要原因在于rtsp协议的视频流(默认是需要插件才可以播放...

    EasyNVR

扫码关注云+社区

领取腾讯云代金券