你也不想页面加载被阻塞吧，来看看async和defer属性

引言

当我们构建一个网站时，通常需要使用外部JavaScript文件，这些文件可以包含各种功能，例如动态更新内容、处理表单、操作DOM等等。

但是，在页面中引入外部JavaScript文件时，如果没有异步存在的话，加载过程就会一直等待，可能会阻塞页面的加载和渲染，导致用户体验变差。为了解决这个问题，我们就可以使用异步加载外部JS脚本的方式，其中包括<script>标签中的async和defer属性。

在传统的同步加载方式中，当浏览器遇到<script>标签时，它会停止解析文档并立即下载并执行脚本，然后再继续解析文档。如果脚本文件很大，或者服务器响应时间很长，那么这个过程可能会很慢，导致页面渲染缓慢。

异步加载外部JS脚本可以让脚本文件在后台下载，而不会阻塞页面的加载和渲染。这意味着页面可以更快地呈现给用户，提高用户体验。

异步加载外部JS脚本的方式通常有两种：async和defer属性。

async属性告诉浏览器立即开始下载脚本文件，但不会阻塞页面的解析和渲染。当脚本文件下载完毕后，它会立即执行，而不会等待其他资源加载完成。

xml 复制代码

<script src="example.js" async></script>

使用async属性时需要注意以下几点：

defer属性告诉浏览器延迟脚本文件的执行，直到文档解析完成。这意味着脚本文件的下载和执行不会阻塞页面的解析和渲染。

xml 复制代码

<script src="example.js" defer></script>

使用defer属性时需要注意以下几点：

在异步加载外部JS脚本时，async和defer属性之间有几个重要的区别：

当页面中有多个<script>标签时，async属性的脚本不会按照在页面中出现的顺序执行，而是在加载完毕后立即执行。这意味着如果某个脚本依赖于另一个脚本，那么它可能会在依赖脚本执行之前执行，导致错误。

而defer属性则可以保证脚本按照在页面中出现的顺序执行，因为它会等到文档解析完成后按照顺序执行。

async属性的脚本加载完毕后会立即执行，而不管页面是否已经解析完毕。这意味着如果脚本依赖于DOM元素，那么它可能会在元素加载之前执行，导致错误。

而defer属性的脚本会等到文档解析完成后执行，因此不会出现上述问题。

async和defer属性的兼容性在不同浏览器中有所不同。async属性在支持它的浏览器中可以提高页面的加载速度，但是由于它不保证脚本执行的顺序，因此可能会导致一些问题。defer属性在兼容性方面要更好，但是它可能会延迟脚本的执行时间。

为了最大化兼容性，最好将脚本放在<body>标签的底部，并且不要在同一个<script>标签中同时使用async和defer属性。另外，如果脚本依赖于其他资源（例如样式表或其他脚本文件），则最好使用defer属性，以确保脚本文件的执行顺序。

那么这篇文章就到这里结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多~