async属性异步加载执行JavaScript的方法

红太狼 2020-06-23 15:55 745阅读 0赞

# async属性异步加载执行JavaScript的方法

HTML5让我兴奋的一个最大的原因是，它里面实现的新功能和新特征都是我们长久以来一直期待的。比如，我以前一直在使用placeholders，但以前必须要用JavaScript实现。而HTML5里给JavaScript标记提供的`async`属性，使JavaScript能异步加载执行。之前我需要各种的JavaScript插件来实现这种功能，但现在这个新属性能让我们轻松的实现异步加载。

## async – HTML代码

真的非常简单，就像下面这样：

```html
<script async src="siteScript.js" onload="myInit()"></script>
```

事实上，如果你是个有严谨精神的程序员，你应该在你90%以上的`SCRIPT`标记上使用`async`属性。

## defer – HTML代码

还有一个跟`async`属性相似的`defer`属性：

```html
<script defer src="siteScript.js" onload="myInit()"></script>
```

跟`async`属性的在语法上非常相似。

## async & defer – 不同之处

这篇WebKit博客将`defer`和`async之间`的不同之处解释的非常清楚：

> 浏览器对标记有`async`属性或`defer`属性的scripts会立即加载并解析，同时也会支持依赖于这个脚本进行初始化的onload事件。`async`属性和`defer`属性的不同之处在于何时执行这个脚本。标注有`async`属性的Script会在下载完成后即可执行，不需要等待window的load事件。这意味着标记有`async`属性的脚本并不一定会按在页面中嵌入的顺序执行。而标记有`defer`属性的脚本却一定会按它们在页面上的顺序依次执行。执行会在解析完全完成后开始，但会在document的`DOMContentLoaded`事件之前。

## 支持 async 和 defer 属性的浏览器有哪些？

引用Safari博客上的话：

> WebKit引擎的浏览器(谷歌浏览器和Safari浏览器)。火狐浏览器从3.6版开始支持async 和 defer 属性。IE也很早就支持 defer 属性，但对async属性不支持，在IE9中支持onload属性。

## async 太有用了！

看到各浏览器实现`async`功能着实让我非常高兴。浏览器网站页面时被JavaScript卡住的确是个很大的问题，`async`属性的异步加载、执行能力一定会让网站的页面速度增色不少。

发表评论取消回复

表情：

评论列表（有 0 条评论，745人围观）

还没有评论，来说两句吧...

相关阅读

相关 Appium-Async Script(异步脚本/加载)

Set Script Timeout Example Usage Support

忘是亡心i/ 2022年11月17日 10:18/ 0 赞/ 168 阅读

相关 defer、async属性以及JS异步加载并执行解决方案

优化脚本文件的加载提高页面的加载速度，一直是前端工程师提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制，以及加载脚本会阻塞其他资源和文件的加载。当浏览

超、凢脫俗/ 2022年07月24日 07:23/ 0 赞/ 201 阅读

相关使用spring的@Async异步执行方法

应用场景： 1、某些耗时较长的而用户不需要等待该方法的处理结果 2、某些耗时较长的方法，后面的程序不需要用到这个方法的处理结果时在spring的配置文件中加入对异

青旅半醒/ 2022年07月17日 00:44/ 0 赞/ 284 阅读

相关 JavaScript异步加载

默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的java

今天药忘吃喽~/ 2022年07月14日 14:19/ 0 赞/ 281 阅读

相关 JavaScript异步加载

同步加载的问题　　默认的js是同步加载的，这里的“加载”可以理解成是解析、执行，而不是“下载”，在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻

深碍√TFBOYSˉ_/ 2022年06月04日 01:45/ 0 赞/ 298 阅读

相关 JavaScript 异步加载JS

文章目录 script 标签属性 XMLHttpRequest 脚本注入动态创建 script 元素 LazyLo

╰半夏微凉°/ 2022年05月28日 00:15/ 0 赞/ 329 阅读

相关 JavaScript-异步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。 js 之所以要同步执行，是因为 js 中可能有输出

分手后的思念是犯贱/ 2022年05月26日 09:48/ 0 赞/ 274 阅读

相关 JavaScript异步加载

javascript 异步加载的三种方案 1. defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。 2. async 异步加载，加载完就执行，as

迈不过友情╰/ 2022年05月19日 02:48/ 0 赞/ 300 阅读

相关 springBoot异步执行方法@Async

我们在使用多线程的时候，往往需要创建Thread类，或者实现Runnable接口，如果要使用到线程池，我们还需要创建Exectors。而在Spring中只要@E

深藏阁楼爱情的钟/ 2021年12月18日 21:07/ 0 赞/ 457 阅读

相关 async属性异步加载执行JavaScript的方法

async属性异步加载执行JavaScript的方法 HTML5让我兴奋的一个最大的原因是，它里面实现的新功能和新特征都是我们长久以来一直期待的。比如，我以前一直在使用p...

红太狼/ 2020年06月23日 15:55/ 0 赞/ 746 阅读