加速HTML5應(yīng)用的九大方法

　　1.使用HTML5表單和輸入框

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

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

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

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

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

　　因為這些功能都是內(nèi)置的，無需使用 JavaScript 方法來實現(xiàn)，第一是節(jié)省開發(fā)時間，同時也讓頁面具有更好的適應(yīng)性。

　　2. 使用 CSS 轉(zhuǎn)換效果

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

　　div.box {

　　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;

　　}

　　div.box.totheleft {

　　left: 0px;

　　}

　　div.box.totheright {

　　left: 80px;

　　}

　　3.使用 HTML5 Web 存儲

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

　　有兩個 Web Storage 對象分別是：sessionStorage 和 localStorage ，這些存儲的數(shù)據(jù)是不會通過 HTTP 請求來傳輸?shù)�，因此不會對請求的時間參數(shù)任何影響，下面是一小段示例代碼：

　　//check to see if localstorage is present (browser supports HTML5)

　　if (('localStorage' in window) && window.localStorage !== null) {

　　//store items

　　localStorage.wishlist = '["Bear", "Cow", "Pig"]';

　　}

　　從上面代碼我們可看到，比使用 Cookie 的方法更加簡單，無需指定失效時間。

　　4. 使用 Web Workers

　　Web Workers 是 HTML5 規(guī)范內(nèi)容之一，用于提供后臺腳本運行支持。相當(dāng)于是多線程的處理環(huán)境。示例代碼：

　　var worker = new Worker('doWork.js');

　　worker.addEventListener('message', function(e) {

　　console.log('Worker said: ', e.data);

　　}, false);

　　worker.postMessage('Hello World'); // Send data to our worker.

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

　　5. 使用 Web Sockets

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

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

　　6. 使用應(yīng)用程序緩存

　　應(yīng)用程序緩存可以讓你創(chuàng)建完全支持離線瀏覽的 Web 應(yīng)用，降低服務(wù)器負載以及更快的體驗速度�？赏ㄟ^緩存的 manifest 文件來指定要緩存的文件，manifest 只是一個簡單的文本文件，下面是一個示例：

　　CACHE MANIFEST

　　# 2011-06-18:v3

　　# Explicitly cached entries

　　index.htm

　　style.css

　　# offline.htm will be displayed if the user is offline

　　FALLBACK:

　　/ /offline.htm

　　你需要在HTML頁面中啟用緩存

　　...

　　Manifest 緩存文件可以定義緩存任意的文件擴展名，但你需要在 Web 服務(wù)器上設(shè)置對應(yīng)的 MIME 類型，例如在 Apache 上：

　　AddType text/cache-manifest .appcache

　　使用應(yīng)用程序緩存，你只需要簡單幾步就可以創(chuàng)建離線的 Web 應(yīng)用，訪問是非�？焖伲�適合用來處理一些不經(jīng)常更新的靜態(tài)文件。

　　7. 使用 CSS 替代圖片

　　使用 CSS 特效而不是圖片是一個很簡單的用來提升網(wǎng)頁速度的方法，因為你無需重開 HTTP 請求來獲取圖片，而且一般圖片大小也比幾行 CSS 代碼要大得多，下面是一些你可以用來替換圖片的 CSS 特效：

　　CSS Masks

　　Box-shadow

　　Transforms

　　RGBA/Alpha opacity

　　Border-radius

　　Linear and radial gradients

　　8. 使用硬件加速

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

　　9. 使用客戶端數(shù)據(jù)庫

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