簡介
大部分的 HTML5 目標是為我們至今透過 JavaScript 程式庫實現的元件和技巧提供原生瀏覽器支援。使用這些功能 (如有) 可為使用者提供更快速的體驗。在本教學課程中，我不會重述您在 Yahoo 的「Exceptional Performance 網站」或 Google 的「Page Speed 說明文件」和「讓網路更快速」網站中看到的優異成效研究。我會著重說明如何運用 HTML5 和 CSS3，讓您的網路應用程式更具回應性。
提示 1：使用網頁儲存空間取代 Cookie
雖然 Cookie 多年以來一直用於追蹤不重複使用者資料，但這類技術存在嚴重缺點。最大的缺點是，所有 Cookie 資料都會新增至每個 HTTP 要求標頭。這可能會對回應時間產生可測量影響，尤其是在 XHR 期間。因此，最佳做法就是縮減 Cookie 大小。在 HTML5 中，我們可以做得更好：使用 sessionStorage 和 localStorage 取代 Cookie。
這兩個 Web Storage 物件可用於在用戶端上保留使用者資料，保留時間可為工作階段長度，也可以無限期保留。他們的資料也不會透過每個 HTTP 要求傳送至伺服器。他們有一個 API，可讓您輕鬆擺脫 Cookie。以下是兩個 API，使用 Cookie 做為備用方案。
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = '["Unicorn","Narwhal","Deathbear"]';
} else {
// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API :(
var date = new Date();
date.setTime(date.getTime()+(365*24*60*60*1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["Unicorn","Narwhal","Deathbear"];'+
' expires='+expires+'; path=/';
document.cookie = cookiestr;
}
提示 2：使用 CSS 轉場效果，而非 JavaScript 動畫
CSS 轉場效果可讓您在兩種狀態之間提供引人入勝的視覺轉場效果。大多數樣式屬性都可以轉換，例如操控文字陰影、位置、背景或顏色。您可以使用轉場效果進入 :hover 之類的偽選取器狀態，或是從 HTML5 表單的 :invalid 和 :valid 進入 (附有表單驗證狀態的範例)。但它們功能更強大，只要在元素中新增任何類別，就能觸發這些事件。
div.box {
left: 40px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }
只要新增 totheleft 和 totheright 的切換類別，即可移動方塊。請比較這段程式碼與 JavaScript 動畫程式庫的程式碼。很明顯，使用 CSS 動畫時，傳送至瀏覽器的位元組數會大幅減少。此外，透過 GPU 層級加速功能，這些視覺轉場效果將盡可能流暢。
提示 3：使用用戶端資料庫，而非伺服器來回通訊
網路 SQL 資料庫和 IndexedDB 會將資料庫引入用戶端。您可以利用這些用戶端資料庫，而非透過 XMLHttpRequest 或表單提交，以常見模式將資料發布至伺服器。減少 HTTP 要求是所有效能工程師的主要目標，因此將這些要求做為資料儲存庫，可減少透過 XHR 或表單回傳至伺服器的往返次數。localStorage 和 sessionStorage 可用於某些情況，例如擷取表單提交進度，且比用戶端資料庫 API 速度明顯更快。舉例來說，如果您有資料資料欄元件或收件匣，且其中含有數百封訊息，將資料儲存在本機資料庫中，就能在使用者想要搜尋、篩選或排序時，減少 HTTP 往返次數。每按下一個按鍵，系統就會篩選好友清單或文字輸入自動完成內容，提供更即時的使用者體驗。
提示 4：改善 JavaScript 可帶來顯著的效能優勢
在 JavaScript 1.6 中，許多額外方法已新增至陣列原型。目前大多數瀏覽器都支援這些功能，但 IE 除外。例如：
// Give me a new array of all values multiplied by 10.
[5, 6, 7, 8, 900].map(function(value) { return value * 10; });
// [50, 60, 70, 80, 9000]
// Create links to specs and drop them into #links.
['html5', 'css3', 'webgl'].forEach(function(value) {
var linksList = document.querySelector('#links');
var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
linksList.innerHTML += newLink;
});
// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
return number < 2;
});
// [1.618]
// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});
在大多數情況下，使用這些原生方法比使用一般 for 迴圈 (例如 for (var i = 0, len = arr.length; i < len; i++)) 更快。原生 JSON 剖析 (透過 JSON.parse()) 取代了我們之前用於包含的 json2.js 檔案。原生 JSON 比使用外部指令碼更快速、更安全，而且已在 IE8、Opera 10.50、Firefox 3.5、Safari 4.0.3 和 Chrome 中實現。原生 String.trim 就是另一個很好的例子，它不僅比冗長的 JS 等價項目更快，也可能更準確。這些 JavaScript 附加元件在技術上並非 HTML5，但屬於近期推出的技術。
提示 5：請為實際網站使用快取資訊清單，而非僅用於離線應用程式
兩年前，WordPress 使用 Google Gears 新增「WordPress Turbo」功能。這項功能會在本機快取管理面板使用的許多資源，加快檔案存取速度。我們可以使用 HTML5 的 applicationCache 和 cache.manifest 複製這項行為。應用程式快取相較於設定 Expires 標頭，具有一些優勢；因為您會建立宣告檔案，指出可快取的靜態資源，瀏覽器就能大幅最佳化這些資源，甚至在您使用前預先快取這些資源。將網站的基本架構視為範本。您有可能變更的資料，但周圍的 HTML 通常會保持一致。您可以透過應用程式快取，將 HTML 視為一系列純模板，透過 cache.manifest 快取標記，然後透過網路傳送 JSON 來更新內容。這個模式與 iPhone 或 Android 原生新聞應用程式非常相似。
提示 6：啟用硬體加速功能，提升視覺體驗
在主要瀏覽器中，許多視覺作業都能利用 GPU 層級加速功能，讓高度動態視覺作業更加順暢。Firefox Minefield 和 IE9 已宣布支援硬體加速功能，而 Safari 在第 5 版中也加入了硬體層級加速功能。(行動版 Safari 早在更早之前就已支援這個功能)。Chromium 剛剛為 Windows 新增 3D 轉換和硬體加速功能，其他兩個平台也即將推出。
GPU 加速功能只會在相當受限的情況下啟用，但 3D 轉換和動畫不透明度是觸發此功能最常見的方式。有一種比較不明顯，但也比較不易察覺的方式可以開啟這項功能：
.hwaccel { -webkit-transform: translateZ(0); }
但我們無法保證。:) 支援並啟用硬體加速功能後，使用 GPU 合成功能時，動畫的平移、旋轉、縮放和不透明度效果將會更流暢。這些圖層的優點是可直接在 GPU 上處理，且不需要重繪圖層內容。不過，任何影響網頁版面配置的屬性仍會相對緩慢。
提示 7：針對 CPU 密集作業，Web Workers 可提供
Web Workers 有兩項重大優點：1) 速度快。2) 在執行工作時，瀏覽器仍可正常回應。請參閱 HTML5 簡報，瞭解 Worker 的實際運作情形。以下是一些可能需要使用 Web Workers 的情況：
- 長文件的文字格式
- 語法醒目顯示
- 圖片處理
- 圖像合成
- 處理大型陣列
提示 8：HTML5 表單屬性和輸入類型
HTML5 引入一組新的輸入類型，將 text、password 和 file 升級為 search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range 和 color。瀏覽器對這些功能的支援程度各不相同，目前 Opera 實作了大部分的功能。透過功能偵測，您可以判斷瀏覽器是否原生支援 (並提供日期選擇器或顏色挑選器等 UI)，如果沒有，您可以繼續使用 JS 小工具來完成這些常見工作。除了類型之外，我們也為一般輸入欄位新增了一些實用功能。輸入 placeholder 會提供預設文字，當您點選時，系統會清除該文字，而 autofocus 會在頁面載入時將插入符號設為焦點，讓您能立即與該欄位互動。輸入驗證是 HTML5 另一項新功能。新增 required 屬性後，瀏覽器就會在該欄位填入資料前，禁止表單提交。此外，pattern 屬性可讓您指定自訂規則運算式，以便測試輸入內容；如果輸入值無效，系統就會阻止表單提交。這種宣告式語法不僅可提升來源可讀性，還能大幅減少 JavaScript 的使用量。同樣地，如果沒有原生支援這些功能，您可以使用功能偵測來提供備用解決方案。使用原生小工具表示您不需要傳送大量的 JavaScript 和 CSS，才能使用這些小工具，因此可加快網頁載入速度，並可能改善小工具的回應速度。如要試用部分輸入強化功能，請參閱 HTML5 簡報。
提示 9：使用 CSS3 效果，而非要求大量圖片合併圖片
CSS3 提供許多新的樣式選項，可取代使用圖片來準確呈現視覺設計。以 100 個位元組的 CSS 取代 2k 圖片，可說是重大勝利，更不用說您還移除了另一個 HTTP 要求。以下是幾個您需要熟悉的屬性：
- 線性和放射漸層
- 圓角的 Border-radius
- 使用 Box-shadow 建立投射陰影和發光效果
- RGBA 的 Alpha 透明度
- 旋轉轉換
- CSS 遮罩
舉例來說，您可以透過漸層建立非常精緻的按鈕，並複製許多其他效果，而無須使用圖片。瀏覽器支援這些功能的程度非常穩定，您可以使用 Modernizr 等程式庫，找出不支援這些功能的瀏覽器，以便在備用情況下使用圖片。
提示 10：使用 WebSockets 可加快傳送速度，且所需頻寬比 XHR 少
WebSockets 的設計目的是因應 Comet 日益普及的趨勢。目前使用 WebSocket 確實有優勢，而非使用 Comet over XHR 模式。
WebSocket 的框架非常輕量，因此所耗用的頻寬通常比 XHR 還少。部分報告指出，透過網路傳送的位元組數量減少了 35%。此外，在較大量的情況下，傳送訊息的成效差異會更加明顯；在這個測試中，XHR 的總時間比 WebSockets 長 3500%。最後，Ericsson Labs 考量 WebSocket 的效能，發現透過 HTTP 的 ping 時間比透過 WebSocket 的長 3 至 5 倍，因為前者有更大量的處理需求。他們得出的結論是，WebSocket 通訊協定顯然更適合即時應用程式。
其他資源
如需測量和效能最佳化建議，請務必使用 Firefox 擴充功能 Page Speed 和 YSlow。此外，Chrome 的 Speed Tracer 和 IE 的 DynaTrace Ajax 也提供更詳細的記錄分析功能。