一起了解script标签中的async和defer属性(2)-木庄网络博客

这个属性在标准中，同时也支持通过 JavaScript 动态插入 <script> 的情况。例如：

const script = document.createElement('script')
script.src = "/something/awesome.js"
document.body.append(script)

动态创建的 <script>，默认就是异步载入；但可以通过设定属性将它关闭：

1	`script.async = false`

type=”module”

在主流的现代浏览器中，<script> 的属性可以加上 type="module"。这时浏览器会认为这个文件是一个JavaScript 模块，其中的解析规则、执行环境会略有不同；这时 <script> 的默认行为会像是 defer 一样，在后台下载，并且等待 DOM 解析、渲染完成之后才会执行，所以 defer 属性无法在 type="module" 的情况下发生作用。但同样可以通过 async 属性使它在下载完成后即刻执行。

用法

现在你应该明白这两个属性的特点了，那么该怎样正确地使用呢？

defer 由于后台载入、不打断渲染及确保执行顺序的特点，基本上在没特殊需求的情况下，在 <script> 中设置一下就行了；当然 <script> 本身的摆放顺序还是要稍微留心一下。

async 比较特别，因为在下载后会立刻执行，且不保证执行顺序，一般常见的应用是设定在完全独立的小小模块中，例如背景Logo、页面广告等，在避免造成使用者体验变差的同时，尽量早的产生效果。

现在前端开发大都通过 Webpack 等打包工具来辅助处理，很少有自己设定这些属性的机会；开发者可以通过 script-ext-html-webpack-plugin 等插件的帮助，将切分好的 Chunk 设定个别需要的 <script> 属性。

总结

async 及 defer 是 <script> 专属的属性，对于网页中的其他资源，可以通过 <link> 的preload、prefetch 属性，来帮我们延迟加载 未来才需要用到的资源。

虽然 <script> 的async、defer 这些属性的设置大都已经包含在现代框架的打包流程中了，但只有扎实的认识这些网页最基础的规范，才能明白自己写出来的代码最后会产生什么效果。

更多编程相关知识，请访问：编程视频课程！！

以上就是一起了解script标签中的async和defer属性的详细内容，更多文章请关注木庄网络博客！

返回前面的内容