引言
当我们构建一个网站时，通常需要使用外部JavaScript文件，这些文件可以包含各种功能，例如动态更新内容、处理表单、操作DOM等等。
但是，在页面中引入外部JavaScript文件时，如果没有异步存在的话，加载过程就会一直等待，可能会阻塞页面的加载和渲染，导致用户体验变差。为了解决这个问题，我们就可以使用异步加载外部JS脚本的方式，其中包括<script>标签中的async和defer属性。
异步加载外部JS脚本
传统的同步加载
在传统的同步加载方式中，当浏览器遇到<script>标签时，它会停止解析文档并立即下载并执行脚本，然后再继续解析文档。如果脚本文件很大，或者服务器响应时间很长，那么这个过程可能会很慢，导致页面渲染缓慢。
异步加载
异步加载外部JS脚本可以让脚本文件在后台下载，而不会阻塞页面的加载和渲染。这意味着页面可以更快地呈现给用户，提高用户体验。
异步加载外部JS脚本的方式通常有两种：async和defer属性。
async属性
async属性告诉浏览器立即开始下载脚本文件，但不会阻塞页面的解析和渲染。当脚本文件下载完毕后，它会立即执行，而不会等待其他资源加载完成。
<script src="example.js" async></script>
使用async属性时需要注意以下几点：
- 脚本文件的下载和执行是异步进行的，因此不能保证脚本文件的执行顺序。
- 如果脚本文件依赖于其他资源（例如样式表或其他脚本文件），则可能会导致执行错误。
- 由于脚本文件的下载和执行是异步进行的，因此无法保证脚本文件在页面完全加载之前执行完成。
defer属性
defer属性告诉浏览器延迟脚本文件的执行，直到文档解析完成。这意味着脚本文件的下载和执行不会阻塞页面的解析和渲染。
<script src="example.js" defer></script>
使用defer属性时需要注意以下几点：
- 脚本文件的执行顺序与它们在页面中的出现顺序相同。
- 脚本文件的下载和执行是异步进行的，因此无法保证脚本文件在页面完全加载之前执行完成。
- 与
async属性不同，defer属性保证脚本文件在文档解析完成后执行，因此脚本文件可以放在文档的<head>或<body>标签中。
异步加载外部JS脚本的区别
在异步加载外部JS脚本时，async和defer属性之间有几个重要的区别：
1. 执行顺序
当页面中有多个<script>标签时，async属性的脚本不会按照在页面中出现的顺序执行，而是在加载完毕后立即执行。这意味着如果某个脚本依赖于另一个脚本，那么它可能会在依赖脚本执行之前执行，导致错误。
而defer属性则可以保证脚本按照在页面中出现的顺序执行，因为它会等到文档解析完成后按照顺序执行。
2. 是否立即执行
async属性的脚本加载完毕后会立即执行，而不管页面是否已经解析完毕。这意味着如果脚本依赖于DOM元素，那么它可能会在元素加载之前执行，导致错误。
而defer属性的脚本会等到文档解析完成后执行，因此不会出现上述问题。
3. 兼容性
async和defer属性的兼容性在不同浏览器中有所不同。async属性在支持它的浏览器中可以提高页面的加载速度，但是由于它不保证脚本执行的顺序，因此可能会导致一些问题。defer属性在兼容性方面要更好，但是它可能会延迟脚本的执行时间。
为了最大化兼容性，最好将脚本放在<body>标签的底部，并且不要在同一个<script>标签中同时使用async和defer属性。另外，如果脚本依赖于其他资源（例如样式表或其他脚本文件），则最好使用defer属性，以确保脚本文件的执行顺序。
那么这篇文章就到这里结束啦~
如果你想了解更多这类文章，点赞关注作者更新更多~
