Web 開發者經常在找一些新的方法來不斷的提升頁面的速度和性能，而 HTML5 的很多新特性可以實現，讓用戶有著更好的體驗。中培偉業《HTML5開發最佳實踐應用》培訓專家姚老師在這里介紹了 9 種簡單易于實現的 HTML5 技巧。

1.使用 HTML5 表單和輸入框

HTML5 引入很多全新的表單屬性和輸入框類型，雖然并不是所有的瀏覽器都支持，但它們的確都很有用：

autofocus 使得頁面加載完畢后自動為某個輸入框設置輸入焦點

placeholder 允許你為輸入框設置默認文本，并在獲取焦點時自動清除

required 屬性要求必須填寫值后才能提交表單

pattern 可以通過正則表達式指定輸入框允許輸入的內容

因為這些功能都是內置的，無需使用 JavaScript 方法來實現，第一是節省開發時間，同時也讓頁面具有更好的適應性。

2.使用 CSS 轉換效果

使用 CSS 轉換效果來替換 JavaScript 的方法可以提升頁面元素在兩種狀態進行轉換的速度，通過使用totheleft 和 totheright 你可以迅速移動一個框。

首先使用CSS的方法可減少頁面的代碼量，而且動畫的執行也更加快速。

3.使用 HTML5 Web 存儲

但你需要在瀏覽器上存儲一些數據時，你可能會首先考慮到 Cookie，這些 Cookie 在每次瀏覽器請求時都會附帶上。而 HTML5 更有效的方法就是本地存儲 —— Web Storage。

有兩個 Web Storage 對象分別是：sessionStorage 和 localStorage ，這些存儲的數據是不會通過 HTTP 請求來傳輸的，因此不會對請求的時間參數任何影響。

4.使用 Web Workers

Web Workers 是 HTML5 規范內容之一，用于提供后臺腳本運行支持。相當于是多線程的處理環境。示例代碼：

Web Workers 可在很多場景下使用，例如圖片處理、文本格式和以及大文件接收和處理等等。

5.使用 Web Sockets

Web Sockets 用來實現跟遠程主機的雙路通訊，例如在 Web 瀏覽器和遠程服務器之間，這是一個非常輕量級的通訊架構，帶寬占用以及性能方面比標準 HTTP 要減少 3~5 倍。

因為 Web Sockets 必須使用 80 端口，因此 Web Sockets 不僅用來創建跟快速的通訊接口，還可以在 HTTP 之上實現跟高級的雙路通訊。

6.使用應用程序緩存

應用程序緩存可以讓你創建完全支持離線瀏覽的 Web 應用，降低服務器負載以及更快的體驗速度?？赏ㄟ^緩存的 manifest 文件來指定要緩存的文件，manifest 只是一個簡單的文本文件。使用應用程序緩存，你只需要簡單幾步就可以創建離線的 Web 應用，訪問是非?？焖伲m合用來處理一些不經常更新的靜態文件。

7.使用 CSS 替代圖片

使用 CSS 特效而不是圖片是一個很簡單的用來提升網頁速度的方法，因為你無需重開 HTTP 請求來獲取圖片，而且一般圖片大小也比幾行 CSS 代碼要大得多。

8.使用硬件加速

現在瀏覽器對硬件加速的支持還不普遍。如果你的應用有動畫或者 3D 效果，那么啟用硬件加速直接讓 GPU 進行處理會大大提升這些動畫和3D的速度。要使用硬件加速你需要用 HTML5 的 Canvas。

9.使用客戶端數據庫

目前，主流瀏覽器在客戶端數據庫的支持上還沒達成一致，除了 Web SQL 數據庫和 IndexedDB 以外。通過對數據庫的使用可以大大提升客戶端數據存儲的速度，而不是將數據重新發給服務器端。不僅可以減少 HTTP 請求，還可以大大降低服務器負載。

但不幸的是，大多數瀏覽器支持 Web SQL DB ，但 Mozilla 只支持 IndexedDB，這是你必須要考慮的問題。

如你所見，HTML5 帶來很多很強大的新特性可以幫你加速 Web 開發以及響應速度，提供更好的用戶體驗。