1.使用HTML5表單和輸入框
HTML5 引入很多全新的表單屬性和輸入框型別，雖然並不是所有的瀏覽器都支援，但它們的確都很有用：
autofocus 使得頁面載入完畢後自動為某個輸入框設定輸入焦點
placeholder 允許你為輸入框設定預設文字，並在獲取焦點時自動清除
required 屬性要求必須填寫值後才能提交表單
pattern 可以通過正則表示式指定輸入框允許輸入的內容
因為這些功能都是內建的，無需使用 JavaScript 方法來實現，第一是節省開發時間，同時也讓頁面具有更好的適應性。
2. 使用 CSS 轉換效果
使用 CSS 轉換效果來替換 JavaScript 的方法可以提升頁面元素在兩種狀態進行轉換的速度，通過使用 totheleft 和 totheright 你可以迅速移動一個框。例如：
{
left:50px;
//for webkit browsers
-webkit-transition: all 0.3s ease-out;
//for mozilla
-moz-transition: all 0.3s ease-out;
//for opera
-o-transition: all 0.3s ease-out;
//other browsers
transition: all 0.3s ease-out;
}
eleft {
left: 0px;
}
eright {
left: 80px;
}
3.使用 HTML5 Web 儲存
但你需要在瀏覽器上儲存一些資料時，你可能會首先考慮到 Cookie，這些 Cookie 在每次瀏覽器請求時都會附帶上。而 HTML5 更有效的方法就是本地儲存 —— Web Storage。
有兩個 Web Storage 物件分別是：sessionStorage 和 localStorage ，這些儲存的資料是不會通過 HTTP 請求來傳輸的，因此不會對請求的時間引數任何影響，下面是一小段示例程式碼：
//check to see if localstorage is present (browser supports HTML5)
if (('localStorage' in window) && lStorage !== null) {
//store items
list = '["Bear", "Cow", "Pig"]';
}
從上面程式碼我們可看到，比使用 Cookie 的方法更加簡單，無需指定失效時間。
4. 使用 Web Workers
Web Workers 是 HTML5 規範內容之一，用於提供後臺指令碼執行支援。相當於是多執行緒的處理環境。示例程式碼：
var worker = new Worker('');
ventListener('message', function(e) {
('Worker said: ', );
}, false);
Message('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 只是一個簡單的文字檔案，下面是一個示例：
CACHE MANIFEST
# 2011-06-18:v3
# Explicitly cached entries
# will be displayed if the user is offline
FALLBACK:
/ /
你需要在HTML頁面中啟用快取
...
Manifest 快取檔案可以定義快取任意的副檔名，但你需要在 Web 伺服器上設定對應的 MIME 型別，例如在 Apache 上：
AddType text/cache-manifest ache
使用應用程式快取，你只需要簡單幾步就可以建立離線的 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 請求，還可以大大降低伺服器負載。