Web 開發者經常在找一些新的方法來不斷的提升頁面的速度和性能，而 HTML5 的很多新特性可以實作，讓使用者有着更好的體驗，在這裡我們整理了 9 中簡單易于實作的 HTML5 技巧，或許可以對你有所幫助。
1. 使用 HTML5 表單和輸入框
HTML5 引入很多全新的表單屬性和輸入框類型，雖然并不是所有的浏覽器都支援，但它們的确都很有用：
autofocus 使得頁面加載完畢後自動為某個輸入框設定輸入焦點
placeholder 允許你為輸入框設定預設文本，并在擷取焦點時自動清除
required 屬性要求必須填寫值後才能送出表單
pattern 可以通過正規表達式指定輸入框允許輸入的内容
因為這些功能都是内置的，無需使用 JavaScript 方法來實作，第一是節省開發時間，同時也讓頁面具有更好的适應性。
2. 使用 CSS 轉換效果
使用 CSS 轉換效果來替換 JavaScript 的方法可以提升頁面元素在兩種狀态進行轉換的速度，通過使用 totheleft 和 totheright 你可以迅速移動一個框。例如：
01div.box {
02 left:50px;
03 //for webkit browsers
04 -webkit-transition: all 0.3s ease-out;
05 //for mozilla
06 -moz-transition: all 0.3s ease-out;
07 //for opera
08 -o-transition: all 0.3s ease-out;
09 //other browsers
10 transition: all 0.3s ease-out;
11}
12
13div.box.totheleft {
14 left: 0px;
15}
16
17div.box.totheright {
18 left: 80px;
19}
首先使用CSS的方法可減少頁面的代碼量，而且動畫的執行也更加快速。
3. 使用 HTML5 Web 存儲
但你需要在浏覽器上存儲一些資料時，你可能會首先考慮到 Cookie，這些 Cookie 在每次浏覽器請求時都會附帶上。而 HTML5 更有效的方法就是本地存儲 —— Web Storage。
有兩個 Web Storage 對象分别是：sessionStorage 和 localStorage ，這些存儲的資料是不會通過 HTTP 請求來傳輸的，是以不會對請求的時間參數任何影響，下面是一小段示例代碼：
1//check to see if localstorage is present (browser supports HTML5)
2if (('localStorage' in window) && window.localStorage !== null) {
3 //store items
4 localStorage.wishlist = '["Bear", "Cow", "Pig"]';
5}
從上面代碼我們可看到，比使用 Cookie 的方法更加簡單，無需指定失效時間。
4. 使用 Web Workers
Web Workers 是 HTML5 規範内容之一，用于提供背景腳本運作支援。相當于是多線程的處理環境。示例代碼：
1var worker = new Worker('doWork.js');
2
3worker.addEventListener('message', function(e) {
4 console.log('Worker said: ', e.data);
5}, false);
6
7worker.postMessage('Hello World'); // Send data to our worker.
Web Workers 可在很多場景下使用，例如圖檔處理、文本格式和以及大檔案接收和處理等等。
5. 使用 Web Sockets
Web Sockets 用來實作跟遠端主機的雙路通訊，例如在 Web 浏覽器和遠端伺服器之間，這是一個非常輕量級的通訊架構，帶寬占用以及性能方面比标準 HTTP 要減少 3~5 倍。
因為 Web Sockets 必須使用 80 端口，是以 Web Sockets 不僅用來建立跟快速的通訊接口，還可以在 HTTP 之上實作跟進階的雙路通訊。
6. 使用應用程式緩存
應用程式緩存可以讓你建立完全支援離線浏覽的 Web 應用，降低伺服器負載以及更快的體驗速度。可通過緩存的 manifest 檔案來指定要緩存的檔案，manifest 隻是一個簡單的文本檔案，下面是一個示例：
01CACHE MANIFEST
02# 2011-06-18:v3
03
04# Explicitly cached entries
05index.htm
06style.css
07
08# offline.htm will be displayed if the user is offline
09FALLBACK:
10/ /offline.htm
你需要在HTML頁面中啟用緩存
1
2 ... 3
Manifest 緩存檔案可以定義緩存任意的檔案擴充名，但你需要在 Web 伺服器上設定對應的 MIME 類型，例如在 Apache 上：
1
AddType text/cache-manifest .appcache
使用應用程式緩存，你隻需要簡單幾步就可以建立離線的 Web 應用，通路是非常快速，适合用來處理一些不經常更新的靜态檔案。
7. 使用 CSS 替代圖檔
使用 CSS 特效而不是圖檔是一個很簡單的用來提升網頁速度的方法，因為你無需重開 HTTP 請求來擷取圖檔，而且一般圖檔大小也比幾行 CSS 代碼要大得多，下面是一些你可以用來替換圖檔的 CSS 特效：
CSS Masks
Box-shadow
Transforms
RGBA/Alpha opacity
Border-radius
Linear and radial gradients
8. 使用硬體加速
現在浏覽器對硬體加速的支援還不普遍。如果你的應用有動畫或者 3D 效果，那麼啟用硬體加速直接讓 GPU 進行處理會大大提升這些動畫和3D的速度。要使用硬體加速你需要用 HTML5 的 Canvas。
9. 使用用戶端資料庫
目前，主流浏覽器在用戶端資料庫的支援上還沒達成一緻，除了 Web SQL 資料庫和 IndexedDB 以外。通過對資料庫的使用可以大大提升用戶端資料存儲的速度，而不是将資料重新發給伺服器端。不僅可以減少 HTTP 請求，還可以大大降低伺服器負載。
但不幸的是，大多數浏覽器支援 Web SQL DB ，但 Mozilla 隻支援 IndexedDB，這是你必須要考慮的問題。
如你所見，HTML5 帶來很多很強大的新特性可以幫你加速 Web 開發以及響應速度，提供更好的使用者體驗。而你準備好了嗎？
來源：OSCHINA翻譯 作者：蕃薯