async和defer的区别和应用场景你真的讲清楚了吗？ import和require的区别呢

为了WLB努力

已于 2024-03-12 10:13:08 修改

阅读量419

点赞数 11

文章标签： javascript

于 2024-03-08 19:45:55 首次发布

本文链接：https://blog.csdn.net/weixin_47622005/article/details/136570695

版权

本文详细比较了JavaScript中的async和defer在异步加载脚本中的作用，以及import和require在ES6模块化中的区别，帮助开发者根据实际需求选择合适的加载策略。

摘要由CSDN通过智能技术生成

async 和 defer 是用于异步加载 JavaScript 文件时的两种不同方式，它们有各自的应用场景和特点。

async：
- 当浏览器遇到带有 async 属性的 <script> 标签时，它会开始下载脚本文件，但不会阻止 HTML 解析过程。
- 脚本文件下载完成后，浏览器会立即执行该脚本，而不管 HTML 解析是否已经完成。
- 多个带有 async 属性的脚本文件，可能以不确定的顺序执行，因为它们在下载完成后会立即执行。
- 主要适用于独立的脚本，不依赖于页面其他内容的加载顺序，且无需等待 HTML 解析完毕即可执行的情况。
defer：
- 当浏览器遇到带有 defer 属性的 <script> 标签时，它会开始下载脚本文件，但会延迟脚本的执行，直到 HTML 解析完成后再执行。
- 多个带有 defer 属性的脚本文件会按照它们在页面中出现的顺序依次执行。
- 与 async 不同，defer 保证脚本文件会按照指定的顺序执行，并且会在文档解析完成后执行，但仍然在 DOMContentLoaded 事件之前执行。
- 适用于那些需要等待文档解析完成后执行的脚本，但又不需要阻塞其他资源的加载的情况。

应用场景：

总之，async 用于独立脚本的快速异步加载和执行，而 defer 用于需要等待页面解析完成后再执行的脚本。

import和require的区别你知道吗？

两者区别

require在运行时调用，理论上可以放在代码的任何地方，例如react中可以用require去图片引入的方式
require 是赋值过程，通过require引入基础数据类型时，属于复制该变量。通过require引入复杂数据类型时，属于浅拷贝该对象。

import在编译时调用，所有只能在文件开头调用，import 是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

关注