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

php中文网 2024-10-15 11:47:08

标签放置优化页面性能" />

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

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

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

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

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

i。 将 <script> 放在

部分中：

when 被放置在

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

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

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

如果脚本是非交互式的或者不需要操作 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> 放在 <body> 的底部：

另一个好位置是在<body>部分。

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

在此位置，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 属性 <head>*

在此方法中，<script> 放置在 <head> 中，但具有 defer 属性。

该脚本将在解析 HTML 时在后台加载，但直到文档完全解析后才会执行。

与将脚本放置在正文底部类似，但通过将其保留在 <head> .

中，可以实现更好的结构和组织

当您想要尽早加载脚本但确保它仅在 DOM 准备好后运行时，这非常有用。
以下是将 <script> 标签放置在带有 defer 属性的位置的一些好处。

⦁脚本与其他资源（如图像和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 属性 <head>

在此方法中， <script> 标记放置在 <head> 部分中，但使用 async 属性，就像前面提到的带有“defer”的方法一样。属性.

在此方法中，一旦脚本可用，脚本就会被异步获取并执行，而不会阻塞 HTML 解析。

这意味着脚本可以在解析HTML文档之前、期间或之后执行。

将此方法与 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 文档中放置 <script> 标记吗？它对您的 HTML 文档有何影响？.

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

本文地址： http://www.ipsmc.com/web/9663.html