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 语义元素。
• 在所有表单输入字段上使用文本标签。
• 确保焦点状态可见。