Script的async和defer
在HTML中，＜script＞标签用于嵌入或引用JavaScript代码。async和defer都是＜script＞标签的属性，用于改变脚本的加载和执行方式，以优化页面加载性能。
定义：async属性表示异步地加载脚本。当浏览器遇到带有async属性的＜script＞标签时，它会并行下载脚本，而不阻塞HTML文档的解析。
行为：当脚本下载完成后，浏览器会暂停文档的解析，执行这个脚本，然后再继续HTML文档的解析。
使用场景：适用于那些与页面其余部分相互独立的脚本，比如广告加载和数据追踪脚本。因为async脚本不保证按照指定的顺序执行，所以不适用于相互依赖的脚本。
定义：defer属性表示在文档解析和显示完成后，再延迟执行脚本。
行为：带有defer属性的脚本将被并行下载，但不会阻断文档的解析。这些脚本直到整个页面都解析完成后，才会按照它们在文档中出现的顺序执行。
使用场景：适用于那些需要等待DOM树构建完成后才能执行的脚本，比如操作DOM的脚本。defer脚本保证了执行顺序，适用于有依赖关系的脚本。
执行时间：async脚本在下载完成后立即执行，这可能会在文档解析过程中发生；而defer脚本则要等到文档解析完成后，才会按顺序执行。
执行顺序：多个async脚本不能保证按照它们在HTML文档中的顺序执行，而多个defer脚本则总是会按照它们在文档中出现的顺序依次执行。
＜!-- 异步加载脚本，不保证执行顺序 --＞
＜script async src="script1.js"＞＜/script＞
＜script async src="script2.js"＞＜/script＞
＜!-- 延迟执行脚本，保证按照出现顺序执行 --＞
＜script defer src="script1.js"＞＜/script＞
＜script defer src="script2.js"＞＜/script＞
在实际开发中，根据脚本的功能和依赖关系选择使用async或defer，可以在不阻塞页面渲染的同时，优化用户体验。
在JavaScript中动态创建并插入一个具有async属性的＜script＞标签，可以按照以下步骤进行：
使用document.createElement()方法创建一个新的＜script＞元素。
设置这个新创建的＜script＞元素的src属性，指定需要加载的脚本URL。
设置async属性为true，使其异步加载。
将这个＜script＞元素添加到文档中，通常是添加到＜head＞或＜body＞元素中。
以下是具体的代码示例：
// 创建一个新的script元素
var script = document.createElement('script');
// 设置script元素的src属性
script.src = 'https://example.com/some-script.js';
// 将async属性设置为true
script.async = true;
// 将script元素添加到文档的＜head＞部分
document.head.appendChild(script);
这段代码将创建一个新的＜script＞元素，将其src属性设置为指定的脚本URL，并通过设置async属性为true来实现异步加载。最后，这个＜script＞元素被添加到文档的＜head＞部分，从而开始异步加载并执行指定的JavaScript文件。
通过这种方式动态添加的＜script＞标签，其行为与在HTML中直接使用＜script async src="..."＞标签相同，即不会阻塞页面的解析和渲染，提高了页面加载的性能。
作者：Struggle_zhu
链接：https://juejin.cn/post/7362080157191651354
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
