script中defer和async的区别

JavaScript是一种客户端脚本语言，通常用于开发Web应用程序，实现动态效果和交互性。在Web页面中，JavaScript通常通过<script>元素嵌入到HTML文档中。当浏览器解析HTML文档时，会按照文档中<script>元素的顺序执行其中的JavaScript代码。

然而，当页面中包含多个<script>元素时，这些元素的加载和执行顺序可能会影响页面性能和功能。为了更好地控制脚本加载和执行的方式，HTML5引入了两个属性：defer和Async。这两个属性可以用于控制脚本的加载顺序和执行时间，从而优化页面性能。

defer属性

defer属性是一个布尔属性，可以用于延迟脚本的执行。当浏览器解析到带有defer属性的<script>元素时，会将其加载到文档中，但不会立即执行其中的JavaScript代码。相反，它会等到整个文档解析完成后，再按照文档中<script>元素的顺序执行这些代码。

下面是一个使用defer属性的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
  <script defer src="script1.js"></script>
  <script defer src="script2.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在这个例子中，我们在页面头部引入了两个JavaScript文件，这两个文件都带有defer属性。当浏览器解析这个页面时，它会按照以下步骤执行这些脚本：

1.加载script1.js和script2.js文件，但不会立即执行其中的JavaScript代码。

2.等到整个文档解析完成后，按照文档中<script>元素的顺序执行这些代码。

3. 当浏览器执行<script>元素时，它会阻塞页面的渲染，直到该脚本执行完成。

使用defer属性的优点是：

·脚本加载不会阻塞页面渲染。这可以提高页面的响应速度和用户体验。

·脚本会在整个文档解析完成后才执行。这可以确保脚本可以访问到页面中的所有DOM元素和其他资源。

·多个脚本可以按照文档中的顺序执行，避免出现加载和执行顺序混乱的情况。

但是，需要注意的是，defer属性只对外部脚本文件有效。对于内嵌脚本（即在<script>标签中直接编写JavaScript代码），defer属性会被忽略。

async属性

与defer属性不同，async属性可以用于异步加载脚本文件。当浏览器解析到带有async属性的<script>元素时，它会立即开始下载该脚本文件，并在下载完成后立即执行其中的JavaScript代码。与此同时，浏览器会继续解析文档和渲染页面。

下面是一个使用async属性的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Example Page</title>
  <script async src="script1.js"></script>
  <script async src="script2.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

在这个例子中，我们在页面头部引入了两个JavaScript文件，这两个文件都带有async属性。当浏览器解析这个页面时，它会按照以下步骤执行这些脚本：

1.加载script1.js和script2.js文件，但不会阻塞页面的渲染。

2.当script1.js下载完成后，立即执行其中的JavaScript代码。

3.当script2.js下载完成后，立即执行其中的JavaScript代码。

4.当浏览器执行<script>元素时，它会阻塞页面的渲染，直到该脚本执行完成。

使用async属性的优点是：

·脚本加载不会阻塞页面渲染。这可以提高页面的响应速度和用户体验。

·脚本可以在下载完成后立即执行，从而加快页面的加载速度。

·多个脚本可以并行加载和执行，提高页面的性能。

但是，需要注意的是，使用async属性加载的脚本文件可能会出现加载和执行顺序混乱的情况。因此，在编写使用async属性的脚本时，需要确保它们不依赖于其他脚本文件中的代码和资源。

defer和async的比较

defer属性和async属性都可以用于控制脚本加载和执行的方式，但它们的工作原理和适用场景有所不同。下面是它们之间的比较：

	defer属性			async属性
加载方式	延迟加载，等待文档解析完成后执行			异步加载，下载完成后立即执行
加载顺序	按照文档中的顺序加载和执行			并行加载和执行，可能出现加载和执行顺序混乱的情况
适用场景	需要确保脚本可以访问到页面中的所有DOM元素和其他资源			脚本不依赖于其他脚本文件中的代码和资源
页面渲染		在DOMContentLoaded事件之前执行	在DOMContentLoaded事件之前执行
兼容性		兼容所有现代浏览器和IE10及以上版本	兼容所有现代浏览器和IE10及以上版本

综上所述，defer属性和async属性都有各自的优缺点和适用场景。在编写使用脚本的时候，需要根据实际需要选择合适的加载和执行方式。

最佳实践

在使用defer属性和async属性时，需要遵循一些最佳实践，以确保脚本可以正确加载和执行：

1.在使用defer属性和async属性时，应该将<script>元素放在页面的<head>元素或<body>元素中。如果把<script>元素放在其他地方，可能会导致页面加载和渲染出现问题。

2.在使用defer属性时，需要注意脚本的执行顺序。如果某个脚本依赖于其他脚本中的代码或资源，就应该将其放在依赖脚本之后的位置。

3.在使用async属性时，需要注意脚本的依赖关系和执行顺序。如果某个脚本依赖于其他脚本中的代码或资源，就应该将其放在依赖脚本之后的位置。

4.在使用defer属性和async属性时，应该避免在脚本中使用document.write()方法。这个方法会在页面加载期间动态地修改页面的内容，可能会导致页面的渲染出现问题。

5.在使用defer属性和async属性时，应该避免在脚本中使用全局变量和函数名。这可能会导致与其他脚本文件中的全局变量和函数名发生冲突，从而导致意想不到的错误。

6.在使用defer属性和async属性时，应该尽可能地将脚本文件压缩和合并。这可以减少HTTP请求次数，提高页面的加载速度。

结论

在使用<script>元素加载JavaScript文件时，defer属性和async属性可以用于控制脚本文件的加载和执行方式。defer属性会在文档解析完成后执行脚本文件，而async属性会在脚本文件下载完成后立即执行。

在选择defer属性和async属性时，需要考虑脚本文件的依赖关系和执行顺序，以及页面的加载和渲染速度等因素。在实际开发中，可以根据需要选择合适的属性和加载方式，以提高页面的性能和用户体验。同时，需要遵循最佳实践，避免脚本加载和执行过程中出现问题。