簡介
許多 HTML5 的目標是針對我們至今透過 JavaScript 程式庫達成的元件和技術，提供原生瀏覽器支援。只要適時使用這些功能，就能帶給使用者更快速的使用體驗。本教學課程不會回顧一下而是著重在立即採用 HTML5 和 CSS3 來提升網頁應用程式回應速度。
提示 1：使用網頁儲存空間取代 Cookie
雖然 Cookie 多年來用於追蹤不重複使用者資料，但還是有嚴重的缺點。最大的缺點是，所有 Cookie 資料都會加進每個 HTTP 要求的標頭中。進而對回應時間產生可量化的影響，尤其是在 XHR 期間。因此最佳做法是縮減 Cookie 大小。在 HTML5 中，我們有許多更好的選擇：以 sessionStorage 和 localStorage 取代 Cookie。
這兩個網路儲存空間物件可用於在工作階段期間永久保存用戶端上的使用者資料，或是無限期保留資料。使用者資料也未透過每個 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 中有許多其他方法新增至 Array 原型。這些 API 目前適用於大部分瀏覽器，但 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 (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 Gboard 新增 WordPress Turbo 功能。基本上，系統在本機快取了管理控制台使用的許多資源，因此可加快檔案存取速度。我們可以使用 HTML5 的 applicationCache 和 cache.manifest 複製該行為。與設定 Expires 標頭相比，應用程式快取稍微有利。由於您製作了宣告式檔案，指出可快取的靜態資源，瀏覽器可以大幅進行最佳化，甚至可能會在使用前預先快取這些資源。請將網站的基本結構視為範本。您的資料可能會有變動，但其所在 HTML 通常仍保持不變。透過應用程式快取，您可以將 HTML 視為一系列純範本，並透過 cache.manifest 快取標記，然後透過線路傳送 JSON，藉此更新內容。這種模型與 iPhone 或 Android 原生新聞應用程式非常類似。
提示 6：啟用硬體加速功能，提升視覺體驗
在領先業界的瀏覽器中，許多視覺作業都能利用 GPU 層級的加速功能，讓高度動態的視覺操作更加順暢。Google 已針對 Firefox Minefield 和 IE9 和 Safari 宣布硬體加速功能第 5 版新增了硬體層級加速功能。(不久後才出現在 Mobile Safari 中)。Chromium 剛新增 Windows 的 3D 轉換及硬體加速功能，另外兩個平台即將推出。
GPU 加速功能只會在一組相當限制的條件下啟動，但 3D 轉換和動畫不透明度是跳脫切換模式的最常見方法。開啟這項功能可能有點奇怪，而且不會造成乾擾：
.hwaccel { -webkit-transform: translateZ(0); }
不過無法保證一定能沒問題。:) 在支援及啟用硬體加速的情況下，使用 GPU 合成功能時，動畫翻譯、旋轉、縮放和不透明度將絕對更加順暢。這類模型的優點是直接在 GPU 上處理，不需要重新繪製圖層內容。不過，任何影響網頁版面配置的屬性仍會相對緩慢。
提示 7：使用網路工作處理序會耗用大量 CPU 資源
網路工作處理序有兩大優點：1) 速度很快。2) 處理工作時，瀏覽器會持續回應。如需工作人員的實際應用相關資訊，請參閱 HTML5 投影片簡報。 以下是您可以使用網路工作站的幾種可能情況：
- 長文件的文字格式設定
- 語法醒目顯示
- 圖片處理
- 圖片合成
- 處理大型陣列
提示 8：HTML5 表單屬性和輸入類型
HTML5 導入一組新的輸入類型，升級了 text、password、email、datetime、date、month、week、time、datetime-local、number、range和 color。filesearchtelurl瀏覽器支援上述差異，而且目前仍在實作 Opera。您可以透過功能偵測功能，判斷瀏覽器是否支援 (此外還會提供日期挑選器或顏色挑選器等使用者介面)，如果不支援，可以繼續使用 JS 小工具完成這些常見工作。
除了類型以外，一般輸入欄位中新增了幾項實用功能。輸入 placeholder 提供預設文字，一旦點按這些文字就會清除，autofocus 則聚焦於載入網頁的插入點，讓您可以立即與該欄位互動。使用 HTML5 時，輸入驗證也同樣需要進行。新增 required 屬性後，如果沒有填入任何欄位，瀏覽器就不會允許提交表單。此外，pattern 屬性可讓您為輸入內容指定自訂規則運算式，用於測試輸入內容；如果值無效，則會影響表單提交。這項宣告式語法不僅能大幅升級原始碼的可讀性，還能大幅縮減必要的 JavaScript。同樣地，如果應用程式沒有原生支援，您可以使用功能偵測來提供備用解決方案。只要使用這裡的原生小工具，您就不必傳送消耗這些小工具所需的繁複 JavaScript 和 CSS，進而加快網頁載入速度，進而提升小工具的回應速度。如要試用這些輸入強化功能，請參閱 HTML5 簡報投影片。
提示 9：使用 CSS3 效果，而非要求大量的合併圖片
CSS3 提供許多新的樣式設定，我們取代了使用圖片來準確呈現視覺設計。將 2k 的 CSS 大小替換為 100 位元組的配置能大大獲益良多，事實上，您已移除了另一個 HTTP 要求。以下列出幾個您必須熟悉的屬性：
- 線性和放射漸層
- 圓角的框線半徑
- 適用於投射陰影和光暈的方塊陰影
- RGBA (Alpha 不透明度)
- 旋轉的轉換
- CSS 遮罩
舉例來說，您可以透過漸層效果建立精美的按鈕，也可以複製許多其他效果 Sanst 圖片。瀏覽器支援其中大部分的功能，已經十分穩定，而你可以使用 Modernizr 等程式庫來找出不支援這類功能的瀏覽器，以在備用情況下使用圖片。
提示 10：使用 WebSocket 提升傳送速度，且頻寬低於 XHR
WebSockets 是為因應日益增加的 Comet 而設計。相較於使用 XHR 模型，現在使用 WebSocket 確實有優點。
WebSocket 的框架非常輕微，因此其使用的頻寬通常比 XHR 少。 部分報表指出整個網路傳送的位元組減少了 35%。此外，訊息傳送之間的效能差異越大，顯然更明顯；這項測試已記錄 XHR，匯總時間比 WebSocket 長 3500%。最後，Ericcson Labs 考慮了 WebSocket 的效能，並發現透過 HTTP 的連線偵測 (ping) 時間比 WebSocket 高出 3 到 5 倍，這是因為處理需求更大。結論是 WebSocket 通訊協定顯然比較適合即時應用程式。
其他資源
如需評估成效和效能建議，請務必使用 Firefox 擴充功能 Page Speed 和 YSlow 擴充功能。此外，Chrome 的 Speed Tracer 和 IE 版 DynaTrace Ajax 提供了更詳細的分析記錄。