HTML中JS代码执行顺序问题？defer与async属性设置解析

js在html中的执行顺序受script标签处理方式影响，默认阻塞html解析。解决方案是使用defer或async属性异步加载脚本。1.defer保证脚本按文档顺序执行，且在html解析完成后执行，适合依赖dom或需顺序执行的脚本；2.async不保证执行顺序，下载后立即执行，适合不依赖dom或顺序无关的脚本。此外，避免阻塞还可将script放在body末尾、使用cdn、代码分割、懒加载和tree shaking等方法。选择合适的策略能有效优化页面性能并提升用户体验。

JS代码在HTML中的执行顺序，简单来说，就是浏览器解析HTML时，遇到<script>标签的处理方式。默认情况下，浏览器会停止解析HTML，下载并执行JS代码，执行完毕后再继续解析HTML。这就是阻塞渲染的原因。而defer和async属性，就是用来解决这个问题的。</script>

解决方案

defer 和 async 都是用来异步加载 JavaScript 脚本的，但它们的执行时机有所不同，直接影响到页面渲染和用户体验。理解它们之间的差异是优化前端性能的关键。

立即学习“前端免费学习笔记（深入）”；

• 默认情况（没有 defer 或 async）: 浏览器会立即下载并执行脚本，在脚本执行完成之前，会阻塞 HTML 解析。

• defer: 浏览器会并行下载脚本，但会按照它们在 HTML 中出现的顺序执行，并且只有在 HTML 解析完成之后才会执行。这意味着脚本可以访问完整的 DOM 结构。

• async: 浏览器也会并行下载脚本，但是脚本下载完成后会立即执行，不会按照它们在 HTML 中出现的顺序执行。这意味着脚本执行时，HTML 可能还没有完全解析完成，因此脚本不应该依赖于特定的 DOM 结构。

简单来说，defer 保证执行顺序，async 不保证。

defer和async的区别？

这个问题可以从多个角度来理解。最核心的区别在于执行时机和执行顺序。defer 脚本会延迟到整个页面解析完毕后再执行，并且会按照它们在文档中出现的顺序执行。而 async 脚本一旦下载完成，就会立即执行，不会等待页面解析完成，也不会按照文档顺序执行。

假设你有三个脚本：script1.js、script2.js 和 script3.js，它们都带有 defer 属性，那么它们会按照 script1.js、script2.js、script3.js 的顺序执行。如果它们都带有 async 属性，那么它们的执行顺序就无法预测，取决于哪个脚本先下载完成。

一个实际的例子：假设 script1.js 定义了一个全局变量 myVariable，script2.js 依赖于这个变量。如果这两个脚本都使用了 async，那么 script2.js 可能会在 script1.js 之前执行，导致错误。而如果使用 defer，就可以避免这个问题。

什么时候使用defer，什么时候使用async？

这取决于你的脚本是否依赖于 DOM 结构和执行顺序。如果你的脚本需要操作 DOM 元素，或者依赖于其他脚本的执行结果，那么应该使用 defer。例如，你的脚本需要使用 jQuery 来操作 DOM，那么应该使用 defer，确保 jQuery 库加载完成后再执行你的脚本。

如果你的脚本不依赖于 DOM 结构，也不依赖于其他脚本的执行结果，那么可以使用 async。例如，统计分析脚本，或者广告脚本，它们通常不需要操作 DOM 元素，也不需要等待其他脚本执行完成。

但需要注意的是，async 脚本的执行可能会阻塞 onload 事件。onload 事件会在所有资源（包括脚本、图片、样式表等）加载完成后触发。如果你的脚本使用了 async，那么 onload 事件可能会被延迟触发，影响用户体验。

如何避免JS阻塞页面渲染？

除了使用 defer 和 async 之外，还有其他一些方法可以避免 JS 阻塞页面渲染。

• 将 <script> 标签放在 </script>

以上就是HTML中JS代码执行顺序问题？defer与async属性设置解析的详细内容，更多请关注php中文网其它相关文章！