JS篇(022)-<script>标签的 defer 和 asnyc 属性的作用以及二者的区别？
最新回答
浅夏时光
2023-05-04 23:49:27
标签的defer和async属性的作用以及二者的区别
在HTML中，<script>标签用于引入JavaScript代码。为了提高页面的加载速度和用户体验，<script>标签提供了defer和async两个属性，用于控制脚本的异步加载和执行。
defer属性的作用- 异步加载：带有defer属性的<script>标签会异步加载JavaScript文件，即不会阻塞HTML文档的解析。
- 延迟执行：defer脚本会在整个页面解析完成（包括DOM结构完全生成，以及其他脚本执行完成）后，按照它们在HTML文档中出现的顺序执行。这意味着，即使defer脚本在HTML文档中较早出现，它也会等到所有内容（包括其他脚本）加载和解析完成后才执行。
- 保持执行顺序：多个带有defer属性的脚本会按照它们在HTML文档中出现的顺序依次执行。
- 异步加载：与defer类似，带有async属性的<script>标签也会异步加载JavaScript文件，不会阻塞HTML文档的解析。
- 立即执行：一旦async脚本下载完成，浏览器会立即中断页面的渲染，执行这个脚本，然后再继续页面的渲染。这意味着async脚本的执行顺序是不确定的，它可能会在任何时候执行，甚至可能在其他内容（如DOM元素）完全加载之前。
- 不保证执行顺序：多个带有async属性的脚本不会按照它们在HTML文档中出现的顺序执行，而是根据它们下载完成的先后顺序执行。
执行时机：
defer是“渲染完再执行”，即等待整个页面（包括DOM结构和其他脚本）完全加载和解析完成后，再按照顺序执行defer脚本。
async是“下载完就执行”，即一旦脚本下载完成，就立即中断页面的渲染，执行这个脚本，然后再继续渲染。
执行顺序：
多个defer脚本会按照它们在HTML文档中出现的顺序执行。
多个async脚本的执行顺序是不确定的，取决于它们下载完成的先后顺序。
使用场景：
defer适用于那些不依赖于页面其他元素或脚本，且需要在页面完全加载后执行的场景。
async适用于那些可以独立执行，不依赖于页面其他元素或脚本，且希望尽快执行的场景。
综上所述，defer和async属性都提供了异步加载JavaScript文件的能力，但它们在执行时机和执行顺序上有所不同。选择使用哪个属性取决于脚本的具体需求和页面的加载策略。
热门标签
