<code class=" language-html><head>
<script>
// JavaScript code here
</script>
<title>Script in Head</title>
</head>
<h1>Hello, World!</h1>
</p>
<p><strong>执行过程：</strong></p>
<ol>
<li>浏览器从上到下解析 HTML 文档。</li>
<li>在 <code><script></code> 中遇到 <code><head></code> 标签时，HTML 渲染会在脚本下载和执行时暂停。</li>
<li>脚本执行后，浏览器恢复 HTML 处理。</li>
</ol>
<p><strong>缺点：</strong></p>
<ul>
<li>大型或加载缓慢的脚本可能会延迟页面渲染，导致黑屏。</li>
<li>尝试在此脚本中操作 DOM 元素可能会因元素尚未加载而失败。</li>
</ul>
<p><strong>理想用例：</strong></p>
<ul>
<li>包含不立即需要的功能的脚本，例如分析或配置代码。</li>
</ul>
<p><strong>2。 <code><script></code> 标签位于 <code><body></code></strong></p> 末尾
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code class="language-html"><title>Script at Bottom</title>
<h1>Hello, World!</h1>
<script>
// JavaScript code here
</script></code>
执行过程：
<script>末尾的<body>标签在页面渲染后处理并执行。优点：
缺点：
理想用例：
3。 <script> 带有 async 属性的标签
<code class="language-html"><head> <script async src="script.js"></script> <title>Script with Async</title> </head> <h1>Hello, World!</h1></code>
执行过程：
async 脚本时，它会在继续 HTML 加载的同时同时下载该脚本。优点：
缺点：
async 脚本，脚本可能会以不可预测的顺序执行。理想用例：
4。 <script> 带有 defer 属性的标签
<code class="language-html"><head>
<script>
// JavaScript code here
</script>
<title>Script in Head</title>
</head>
<h1>Hello, World!</h1></code>执行过程：
defer 脚本与 HTML 同时下载，但仅在解析整个 HTML 后才执行。DOMContentLoaded事件之前。优点：
defer 脚本，则保持脚本执行顺序。理想用例：
比较表
| 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 |
<script><body>
<script async> 末尾使用 <body>将 <head>如果没有使用任何属性，请将脚本放在 async 的底部，以实现页面平滑加载。defer
的 <script> 中，除非绝对有必要防止渲染阻塞。
以上是在 HTML 中使用
