标签放置优化页面性能" />
脚本标签
script 标签是一个非常有趣的标签。
它对 html 页面的功能发挥着重要作用，因为它包含控制用户如何与页面交互的 javascript 或 typescript。
html页面中有很多部分的标签应该在.
HTML 文档中
放置
这里详细介绍了放置
i。 将
部分中：when 被放置在
部分中，浏览器在解析 HTML. 时读取它后就会执行脚本这发生在渲染任何主体元素（内容）之前。
什么时候将
如果脚本是非交互式的或者不需要操作 DOM 元素（例如，分析、元数据处理、与样式相关的 JS），则将其放在
中是值得推荐的。但是，将标签放入
部分时需要考虑一些缺点。⦁它可以延迟页面的渲染，因为浏览器将停止加载其他资源（HTML，CSS），直到脚本完全执行。
⦁如果脚本尝试访问尚未加载的DOM元素，它将失败或导致错误。
示例:
ii。将 放在 的底部：
另一个好位置是在
部分。这里的脚本放置在结束正文标记之前 .
在此位置，HTML内容被浏览器解析并渲染后执行脚本。
当您的 JavaScript 需要操作 DOM 元素（例如，添加事件侦听器、修改内容、动画）时，这是理想的选择
这很重要，因为在脚本运行时，正文中的所有元素都已加载并可访问。
当然这种方法有好处：
允许页面内容优先加载，提高页面加载性能。
避免在 DOM 元素存在之前尝试访问它们相关的错误。
示例:
<脚本 src="script.js">< /脚本>
i*ii。 使用 defer 属性 *
在此方法中，
该脚本将在解析 HTML 时在后台加载，但直到文档完全解析后才会执行。
与将脚本放置在正文底部类似，但通过将其保留在 .
当您想要尽早加载脚本但确保它仅在 DOM 准备好后运行时，这非常有用。
以下是将
⦁脚本与其他资源（如图像和CSS）并行下载，从而提高了整体页面加载性能。
⦁ DOM 完全加载后脚本仍然会运行，因此与 DOM 元素交互是安全的
示例：
<脚本 src="script.js" deferphpcnlt phpcn/span>>
iv。使用 async 属性
在此方法中，
在此方法中，一旦脚本可用，脚本就会被异步获取并执行，而不会阻塞 HTML 解析。
这意味着脚本可以在解析HTML文档之前、期间或之后执行。
将此方法与 async 属性一起用于不依赖于 DOM 或其他脚本（例如分析、广告或跟踪脚本）的非阻塞脚本。
但是这种方法可能会出现一些缺点
由于脚本的执行与 HTML 解析过程无关，如果脚本操作或依赖 DOM，则可能会导致错误。
示例:
<脚本 src=“script.js” asyncphpcnlt phpcn/span>>
**建议的最佳实践**
对于 DOM 密集型脚本或框架（如 React 或 jQuery 操作），通常最好将脚本放在
的底部；靠近 或使用defer 属性.
对于小型、不依赖 DOM 的脚本（例如分析或跟踪脚本），将脚本放置在 中并使用 async 属性是一个不错的选择。
您尝试在 HTML 文档中放置
