<img src="https://img.php.cn/upload/article/000/465/014/172584203024406.jpg" alt="通过正确的 标签放置优化页面性能”> 标签放置优化页面性能” />
脚本标签
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 属性 *
在此方法中， 放置在 中，但具有 defer 属性。 </script></p><p>该脚本将在解析 HTML 时在后台加载，但直到文档完全解析后才会执行。</p><p> 与将脚本放置在正文底部类似，但通过将其保留在 <code> .
中，可以实现更好的结构和组织
当您想要尽早加载脚本但确保它仅在 DOM 准备好后运行时，这非常有用。
以下是将 标签放置在带有 defer 属性的位置的一些好处。
⦁脚本与其他资源（如图像和CSS）并行下载，从而提高了整体页面加载性能。
⦁ DOM 完全加载后脚本仍然会运行，因此与 DOM 元素交互是安全的
示例：
<脚本 src="script.js" deferphpcnlt phpcn/span>> iv。使用 async 属性
在此方法中， 标记放置在 <head> 部分中，但使用 <code>async 属性，就像前面提到的带有“defer”的方法一样。属性.</script></p><p> 在此方法中，一旦脚本可用，脚本就会被异步获取并执行，而不会阻塞 HTML 解析。 </p><p>这意味着脚本可以在解析HTML文档之前、期间或之后执行。</p><p> 将此方法与 <code>async 属性一起用于不依赖于 DOM 或其他脚本（例如分析、广告或跟踪脚本）的非阻塞脚本。
但是这种方法可能会出现一些缺点
由于脚本的执行与 HTML 解析过程无关，如果脚本操作或依赖 DOM，则可能会导致错误。
示例:
<code> <span class="nt"><head></span> <span 类=“nt”><脚本 </span><span 类=“na”>src=</span><span 类=“s”>“script.js”</span> <span 类=“na”>asyncphpcnlt phpcn/span><span 类=“nt” >></脚本></span> <span class="nt"></head></span></code>
<code> **建议的最佳实践**</code>
对于 DOM 密集型脚本或框架（如 React 或 jQuery 操作），通常最好将脚本放在
的底部；靠近 或使用 defer 属性.
对于小型、不依赖 DOM 的脚本（例如分析或跟踪脚本），将脚本放置在 中并使用 async 属性是一个不错的选择。
您尝试在 HTML 文档中放置 标记吗？它对您的 HTML 文档有何影响？.
以上就是通过正确的 标签放置优化页面性能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491245.html
微信扫一扫 
支付宝扫一扫 
