用一个示例说明一下javascript中的async和defer

作者

JavaScript引用外部脚本的时候,可以使用两个属性 async和defer , 两个选项都很有用。 async表示异步方式,不阻塞页面的其他的部分。 defer表示延迟执行。这里用仪式示例说明一下。

准备两个js脚本文件

文件1: file1: js.js

alert('js.js')

文件2: file2: js2.js

alert('js2.js')

准备一个 html文件

文件3: file1: index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script src="/js.js" ></script>
</head>
<body>
    liuhaolin.com
</body>
</html>

如果执行这个页面,弹出js.js,这个时候页面是空白的,点击确定后页面显示内容。
alert
修改 <script src="/js.js" ></script><script async src="/js.js" ></script>
这个时候,首先是显示内容,然后弹出对话框。
如果使用的是 defer ,同样也是先显示内容。 从显示的顺序看,两者差不多。其实这是执行的晚了一会。其实他们的运行方式完全不同。

async 不会造成阻塞

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script async src="/js.js" ></script>
    <script src="/js2.js" ></script>
</head>
<body>
    liuhaolin.com
</body>
</html>

不阻塞执行
可以看到首先是弹出了 js2.js,然后弹出 js.js,后输出了内容。js脚本的文件是没有被阻塞的。

不用async 导致的阻塞

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <script src="/js.js" ></script>
    <script src="/js2.js" ></script>
</head>
<body>
    liuhaolin.com
</body>
</html>

pending

async 和 defer

async -- 异步的加载,加载后执行,加载结束前不影响页面的其他部分。
defer -- 页面显示后执行

回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注