HTMX - 提升效能

HTMX 提升效能是一種透過使用 **hx-boost** 屬性來提升 HTML **錨點** 和 **表單** 的方法。提升效能會將所有錨點標籤和表單轉換為 AJAX 請求，並將其目標設定為頁面的主體。

HTMX 提升效能示例

在以下示例中，錨點標籤將觸發對 /content 的 AJAX GET 請求，並將結果替換到 body 標籤中。

<div hx-boost="true">
   <a href="/content">Content</a>
</div>

漸進增強提升效能

在漸進增強中，當 JavaScript 未啟用時，所有連結和表單都將繼續工作，而無需使用 Ajax 請求。它還允許更多使用者使用您網站的功能。其他 htmx 模式也可以適應以實現漸進增強。

在此程式碼中，它不會優雅地降級。如果使用者停用 JavaScript，則搜尋功能將無法工作。如果您可以將 **htmx-增強** 的輸入包裝在一個表單元素中。如果 JavaScript 未啟用，使用者仍然可以搜尋。您可以新增一個搜尋按鈕，並使用反映 **action** 屬性的 **hx-post** 更新表單，或者可以使用 **hx-boost** 屬性。

<form action="/search" method="POST">
   <input class="form-control" type="search"
 name="search" placeholder="Search your course.."
 hx-post="/search"
 hx-trigger="keyup changed delay:500ms, search"
 hx-target="#search-results"
 hx-indicator=".htmx-indicator">
</form>

可訪問性

透過 **hx-boost** 屬性使用漸進增強將使您的應用程式能夠被更廣泛的使用者訪問。基於 htmx 的應用程式更簡單，因為 htmx 以 HTML 為中心。

可訪問性建議

• 透過更好的排版最大化應用程式的可讀性。
• 儘可能使用 HTML 語義元素。
• 在所有表單輸入欄位上使用文字標籤。
• 確保焦點狀態可見。