在 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