通过正确的 <script> 标签放置优化页面性能-js教程-PHP中文网

通过正确的 <script> 标签放置优化页面性能

王林

发布： 2024-09-09 08:33:48

转载

326人浏览过

通过正确的 <script> 标签放置优化页面性能标签放置优化页面性能" />

脚本标签
script 标签是一个非常有趣的标签。
它对 html 页面的功能发挥着重要作用，因为它包含控制用户如何与页面交互的 javascript 或 typescript。

html页面中有很多部分的标签应该在.

HTML 文档中 <script> 标记的放置对于脚本执行时如何与页面交互起着重要作用。</script>

放置 <script> 标记的位置决定了页面加载速度以及页面的一些其他功能。</script>

这里详细介绍了放置 <script> 标签的常见位置、标准及其重要性。</script>

i。 将 <script> 放在 </script>

部分中：

when 被放置在

部分中，浏览器在解析 HTML. 时读取它后就会执行脚本

这发生在渲染任何主体元素（内容）之前。

什么时候将 <script> 放在 <head> 部分很重要？</script>

如果脚本是非交互式的或者不需要操作 DOM 元素（例如，分析、元数据处理、与样式相关的 JS），则将其放在

中是值得推荐的。

但是，将标签放入

部分时需要考虑一些缺点。

⦁它可以延迟页面的渲染，因为浏览器将停止加载其他资源（HTML，CSS），直到脚本完全执行。

⦁如果脚本尝试访问尚未加载的DOM元素，它将失败或导致错误。

示例:

<code> <span class="nt"><head></span>
<span class="nt"><title></title></span>
   <span class="nt"><脚本 </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">>< /脚本></ >
  <span class="nt"></head></span>
…………
</code>登录后复制

ii。将 <script></script> 放在的底部：

另一个好位置是在

部分。

这里的脚本放置在结束正文标记之前 .

在此位置，HTML内容被浏览器解析并渲染后执行脚本。
当您的 JavaScript 需要操作 DOM 元素（例如，添加事件侦听器、修改内容、动画）时，这是理想的选择

这很重要，因为在脚本运行时，正文中的所有元素都已加载并可访问。

当然这种方法有好处：

允许页面内容优先加载，提高页面加载性能。
避免在 DOM 元素存在之前尝试访问它们相关的错误。

示例:

<code> <span class="nt"><body></span>
    <span class="c"><!-- 页面内容 --></span>
    <span class="nt"><脚本 </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">>< /脚本></ >
  <span class="nt"></body></span>
</code>登录后复制

i*ii。使用 defer 属性 *

在此方法中，<script> 放置在 <head> 中，但具有 <code>defer 属性。 </script></p> <p>该脚本将在解析 HTML 时在后台加载，但直到文档完全解析后才会执行。</p> <p> 与将脚本放置在正文底部类似，但通过将其保留在 <code> </code>.</p> 中，可以实现更好的结构和组织 <p> 当您想要尽早加载脚本但确保它仅在 DOM 准备好后运行时，这非常有用。<br> 以下是将 <script> 标签放置在带有 defer 属性的位置的一些好处。</script>

⦁脚本与其他资源（如图像和CSS）并行下载，从而提高了整体页面加载性能。
⦁ DOM 完全加载后脚本仍然会运行，因此与 DOM 元素交互是安全的
示例：

<code> <span class="nt"><head></span>
    <span class="nt"><脚本 </span><span class="na">src=</span><span class="s">"script.js"</span> <span class="na">deferphpcnlt phpcn/span><span 类=“nt” >></脚本></span>
  <span class="nt"></head></span>
</code>登录后复制

iv。使用 async 属性

在此方法中， <script> 标记放置在 <code><head> 部分中，但使用 <code>async 属性，就像前面提到的带有“defer”的方法一样。属性.</script></p> <p> 在此方法中，一旦脚本可用，脚本就会被异步获取并执行，而不会阻塞 HTML 解析。 </p> <p>这意味着脚本可以在解析HTML文档之前、期间或之后执行。</p> <p> 将此方法与 <code>async</code> 属性一起用于不依赖于 DOM 或其他脚本（例如分析、广告或跟踪脚本）的非阻塞脚本。</p> <p>但是这种方法可能会出现一些缺点<br> 由于脚本的执行与 HTML 解析过程无关，如果脚本操作或依赖 DOM，则可能会导致错误。</p> <p>示例:<br></p> <div class="highlight"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="highlight html"><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></pre><div class="contentsignin">登录后复制</div></div></div> <p></p> <div class="highlight"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="highlight plaintext"><code> **建议的最佳实践** </code></pre><div class="contentsignin">登录后复制</div></div></div> <p>对于 DOM 密集型脚本或框架（如 React 或 jQuery 操作），通常最好将脚本放在 </p> 的底部；靠近或使用 <code>defer</code> 属性. <p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kq06lqcecz2xwg85bqlw.jpg" alt="图片描述"><br> 对于小型、不依赖 DOM 的脚本（例如分析或跟踪脚本），将脚本放置在 <code></code> 中并使用 <code>async</code> 属性是一个不错的选择。</p> <p>您尝试在 HTML 文档中放置 <script> 标记吗？它对您的 HTML 文档有何影响？.</script>

以上就是通过正确的 <script> 标签放置优化页面性能的详细内容，更多请关注php中文网其它相关文章！