--- highlight: xcode --- ## 引言当我们构建一个网站时，通常需要使用外部JavaScript文件，这些文件可以包含各种功能，例如动态更新内容、处理表单、操作DOM等等。但是，在页面中引入外部JavaScript文件时，如果没有异步存在的话，加载过程就会一直等待，可能会阻塞页面的加载和渲染，导致用户体验变差。为了解决这个问题，我们就可以使用异步加载外部JS脚本的方式，其中包括` ``` 使用`async`属性时需要注意以下几点： - 脚本文件的下载和执行是异步进行的，因此不能保证脚本文件的执行顺序。 - 如果脚本文件依赖于其他资源（例如样式表或其他脚本文件），则可能会导致执行错误。 - 由于脚本文件的下载和执行是异步进行的，因此无法保证脚本文件在页面完全加载之前执行完成。 ### defer属性 `defer`属性告诉浏览器延迟脚本文件的执行，直到文档解析完成。这意味着脚本文件的下载和执行不会阻塞页面的解析和渲染。 ``` ``` 使用`defer`属性时需要注意以下几点： - 脚本文件的执行顺序与它们在页面中的出现顺序相同。 - 脚本文件的下载和执行是异步进行的，因此无法保证脚本文件在页面完全加载之前执行完成。 - 与`async`属性不同，`defer`属性保证脚本文件在文档解析完成后执行，因此脚本文件可以放在文档的``或``标签中。 ## 异步加载外部JS脚本的区别在异步加载外部JS脚本时，`async`和`defer`属性之间有几个重要的区别： ### 1. 执行顺序当页面中有多个`