- 相關(guān)推薦
加速HTML5應用的九大方法
1.使用HTML5表單和輸入框
HTML5 引入很多全新的表單屬性和輸入框類(lèi)型，雖然并不是所有的瀏覽器都支持，但它們的確都很有用：
autofocus 使得頁(yè)面加載完畢后自動(dòng)為某個(gè)輸入框設置輸入焦點(diǎn)
placeholder 允許你為輸入框設置默認文本，并在獲取焦點(diǎn)時(shí)自動(dòng)清除
required 屬性要求必須填寫(xiě)值后才能提交表單
pattern 可以通過(guò)正則表達式指定輸入框允許輸入的內容
因為這些功能都是內置的，無(wú)需使用 JavaScript 方法來(lái)實(shí)現，第一是節省開(kāi)發(fā)時(shí)間，同時(shí)也讓頁(yè)面具有更好的適應性。
2. 使用 CSS 轉換效果
使用 CSS 轉換效果來(lái)替換 JavaScript 的方法可以提升頁(yè)面元素在兩種狀態(tài)進(jìn)行轉換的速度，通過(guò)使用 totheleft 和 totheright 你可以迅速移動(dòng)一個(gè)框。例如：
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í)，你可能會(huì )首先考慮到 Cookie，這些 Cookie 在每次瀏覽器請求時(shí)都會(huì )附帶上。而 HTML5 更有效的方法就是本地存儲 —— Web Storage。
有兩個(gè) Web Storage 對象分別是：sessionStorage 和 localStorage ，這些存儲的數據是不會(huì )通過(guò) HTTP 請求來(lái)傳輸的，因此不會(huì )對請求的時(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 的方法更加簡(jiǎn)單，無(wú)需指定失效時(shí)間。
4. 使用 Web Workers
Web Workers 是 HTML5 規范內容之一，用于提供后臺腳本運行支持。相當于是多線(xiàn)程的處理環(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 可在很多場(chǎng)景下使用，例如圖片處理、文本格式和以及大文件接收和處理等等。
5. 使用 Web Sockets
Web Sockets 用來(lái)實(shí)現跟遠程主機的雙路通訊，例如在 Web 瀏覽器和遠程服務(wù)器之間，這是一個(gè)非常輕量級的通訊架構，帶寬占用以及性能方面比標準 HTTP 要減少 3~5 倍。
因為 Web Sockets 必須使用 80 端口，因此 Web Sockets 不僅用來(lái)創(chuàng )建跟快速的通訊接口，還可以在 HTTP 之上實(shí)現跟高級的雙路通訊。
6. 使用應用程序緩存
應用程序緩存可以讓你創(chuàng )建完全支持離線(xiàn)瀏覽的 Web 應用，降低服務(wù)器負載以及更快的體驗速度�？赏ㄟ^(guò)緩存的 manifest 文件來(lái)指定要緩存的文件，manifest 只是一個(gè)簡(jiǎn)單的文本文件，下面是一個(gè)示例：
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頁(yè)面中啟用緩存
...
Manifest 緩存文件可以定義緩存任意的文件擴展名，但你需要在 Web 服務(wù)器上設置對應的 MIME 類(lèi)型，例如在 Apache 上：
AddType text/cache-manifest .appcache
使用應用程序緩存，你只需要簡(jiǎn)單幾步就可以創(chuàng )建離線(xiàn)的 Web 應用，訪(fǎng)問(wèn)是非�？焖�，適合用來(lái)處理一些不經(jīng)常更新的靜態(tài)文件。
7. 使用 CSS 替代圖片
使用 CSS 特效而不是圖片是一個(gè)很簡(jiǎn)單的用來(lái)提升網(wǎng)頁(yè)速度的方法，因為你無(wú)需重開(kāi) HTTP 請求來(lái)獲取圖片，而且一般圖片大小也比幾行 CSS 代碼要大得多，下面是一些你可以用來(lái)替換圖片的 CSS 特效：
CSS Masks
Box-shadow
Transforms
RGBA/Alpha opacity
Border-radius
Linear and radial gradients
8. 使用硬件加速
現在瀏覽器對硬件加速的支持還不普遍。如果你的應用有動(dòng)畫(huà)或者 3D 效果，那么啟用硬件加速直接讓 GPU 進(jìn)行處理會(huì )大大提升這些動(dòng)畫(huà)和3D的速度。要使用硬件加速你需要用 HTML5 的 Canvas。
9. 使用客戶(hù)端數據庫
目前，主流瀏覽器在客戶(hù)端數據庫的支持上還沒(méi)達成一致，除了 Web SQL 數據庫和IndexedDB 以外。通過(guò)對數據庫的使用可以大大提升客戶(hù)端數據存儲的速度，而不是將數據重新發(fā)給服務(wù)器端。不僅可以減少 HTTP 請求，還可以大大降低服務(wù)器負載。
【加速HTML5應用的九大方法】相關(guān)文章：
Web Workers加速移動(dòng)Web應用03-30
網(wǎng)頁(yè)中HTML5與CSS3的應用03-31
形體訓練立拉伸加速恢復方法12-26
色彩在設計中的應用方法12-19
績(jì)效考核方法及應用03-05
廚房清潔應用對方法03-30
HTML5的發(fā)展03-27