延迟脚本和异步脚本

最新推荐文章于 2024-09-16 08:47:17 发布

chengmei851791

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量94

点赞数

文章标签： javascript xhtml ViewUI

原文链接：https://my.oschina.net/evanyan/blog/301528

版权

延迟脚本

一般情况下，想要把脚本延迟到整个页面都加载完毕后再运行，把<script>标签放在</body>上面便可。

但也可以这样子：

<script type="text/javascript" defer="defer" src="example1.js"></script>

这样也可将达到同样的目的，并保持代码的整洁性。

异步脚本

与defer类似，async都只用于外部脚本文件，并告诉浏览器立即下载文件。

但与defer不同的是，async的脚本并不保证按照指定他们的先后顺序执行。

使用async也和defer有点不同：

<script type="text/javascript" async src="example1.js"></script>

注意：在xhtml文档中，必须这个样子：

<script type="text/javascript" async="async" src="example1.js"></script>

然后看看下面一段代码：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" async src="example1.js"></script>
        <script type="text/javascript" async src="example2.js"></script>
    </head>
    <body>
        <!--内容-->
    </body>
</html>

在以上这段代码中，example2.js可能在example1.js之前执行。因此，确保两者间互不依赖相当重要。

指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载其他内容。所以，异步脚本不可再加载期间修改DOM。

转载于:https://my.oschina.net/evanyan/blog/301528