区分defer和async

Posted wuxianqiang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了区分defer和async相关的知识,希望对你有一定的参考价值。

今天要介绍的让脚本延迟加载,让脚本延迟加载的方式有多种,最简单粗暴的方法就是将 <script> 标签放在 <body> 标签的最下面,这样就可以按照先后顺序依次执行了,但是你有些情况还是想放在 <head> 标签的下面,但是这个时候就要让脚本延迟执行,因为页面要先解析DOM再执行脚本。


 

方法一:使用html4.01为 <script> 标签定义的 defer 属性,IE4~7支持

方法二: 使用HTML5为 <script> 定义的 async 属性,IE8己以上支持

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" defer="defer" src="example1.js"></script>
  <script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
  <div>hello world</div>
</body>
</html>

注意上面两个脚本都使用了  defer 属性,但是这两个脚本文件执行的先后顺序是不确定,所以一个页面最好只使用一个脚本延迟,除非他们没有依赖关系才会这么用。 async 属性也同样存在这样的问题,他们两唯一的区别就是兼容性问题了。如果想安先后顺序依次执行,唯一的办法就是放在 body 里面才是更好的选择。

 

今天是父亲节,祝天下所有的父亲节日快乐·!

以上是关于区分defer和async的主要内容,如果未能解决你的问题,请参考以下文章

defer=“defer”和async=“async”

您可以在 HTML 脚本标签上同时使用 async 和 defer 属性吗?

script标签中defer和async属性的区别

script标签中defer和async的区别

defer和async的区别

defer 和 async的区别