在 HTML 中使用 <script> 标签进行更好的 Web 开发的有效方法-js教程-PHP中文网

首页 > web前端 > js教程 > 在 HTML 中使用

ffective Ways to Use the <script> HTML 中的标签以实现更好的 Web 开发”/></p>
<p>HTML 文档中 <code><script></code> 标签的放置会显着影响相对于 HTML 内容呈现的 JavaScript 执行时间。本指南探讨了四种关键方法，详细介绍了它们的执行流程和最佳用例。</p>
<p><strong>1。 <code><script></code> <code><head></code></strong></p> 内的标签
<div class=

<head>
  <script>
    // JavaScript code here
  </script>
  <title>Script in Head</title>
</head>
<h1>Hello, World!</h1>

登录后复制

执行过程：

浏览器从上到下解析 HTML 文档。
在 <script> 中遇到 <head> 标签时，HTML 渲染会在脚本下载和执行时暂停。
脚本执行后，浏览器恢复 HTML 处理。

缺点：

大型或加载缓慢的脚本可能会延迟页面渲染，导致黑屏。
尝试在此脚本中操作 DOM 元素可能会因元素尚未加载而失败。

理想用例：

包含不立即需要的功能的脚本，例如分析或配置代码。

2。 <script> 标签位于 <body>

末尾

<title>Script at Bottom</title>
<h1>Hello, World!</h1>
<script>
  // JavaScript code here
</script>

登录后复制

执行过程：

浏览器加载并呈现整个 HTML 内容。
<script>末尾的<body>标签在页面渲染后处理并执行。

优点：

确保脚本执行前完成 HTML 加载。
防止渲染延迟，改善用户体验。
DOM 元素可以随时进行操作。

缺点：

由于 JavaScript 在完整 HTML 渲染后执行，因此页面加载时间略有增加。

理想用例：

与页面内容交互的脚本（例如，事件侦听器、元素修改）。

3。 <script> 带有 async 属性的标签

<head>
  <script async src="script.js"></script>
  <title>Script with Async</title>
</head>
<h1>Hello, World!</h1>

登录后复制

执行过程：

浏览器按顺序加载 HTML。
遇到 async 脚本时，它会在继续 HTML 加载的同时同时下载该脚本。
下载后，脚本立即执行，短暂暂停渲染，然后恢复 HTML 加载。

优点：

非阻塞：脚本加载在后台发生，不会延迟页面渲染。
由于并行下载，页面加载速度更快。

缺点：

如果存在多个 async 脚本，脚本可能会以不可预测的顺序执行。
依赖 HTML 结构的脚本可能会过早执行，从而导致错误。

理想用例：

独立脚本，如分析、广告或社交媒体小部件，不依赖于其他脚本或 HTML 元素。

4。 <script> 带有 defer 属性的标签

<head>
  <script>
    // JavaScript code here
  </script>
  <title>Script in Head</title>
</head>
<h1>Hello, World!</h1>

登录后复制

执行过程：

浏览器按顺序加载 HTML。
defer 脚本与 HTML 同时下载，但仅在解析整个 HTML 后才执行。
执行发生在DOMContentLoaded事件之前。

优点：

确保页面加载完成后脚本执行。
如果使用多个 defer 脚本，则保持脚本执行顺序。
适合依赖于完全可用的 DOM 的脚本。

理想用例：

完全加载 DOM 后操作 DOM 的脚本。

比较表

<表> <标题> 方法执行时间块渲染最佳用例 <正文>

Method	Execution Time	Blocks Rendering	Best Use Case
`<script>` in `<head>`	Before HTML load	Yes	Configuration, early execution logic
`<script>` at end of `<body>`	After HTML load	No	DOM manipulation, event handling
`<script async>`	When script is downloaded	No (except during execution)	Analytics, ads, independent scripts
`<script defer>`	After HTML parse	No	DOM-dependent scripts