Web 開(kāi)發(fā)者經(jīng)常在找一些新的方法來(lái)不斷的提升頁(yè)面的速度和性能，而 HTML5 的很多新特性可以實(shí)現(xiàn)，讓用戶有著更好的體驗(yàn)。中培偉業(yè)《HTML5開(kāi)發(fā)最佳實(shí)踐應(yīng)用》培訓(xùn)專(zhuān)家姚老師在這里介紹了 9 種簡(jiǎn)單易于實(shí)現(xiàn)的 HTML5 技巧。

1.使用 HTML5 表單和輸入框

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

autofocus 使得頁(yè)面加載完畢后自動(dòng)為某個(gè)輸入框設(shè)置輸入焦點(diǎn)

placeholder 允許你為輸入框設(shè)置默認(rèn)文本，并在獲取焦點(diǎn)時(shí)自動(dòng)清除

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

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

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

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

使用 CSS 轉(zhuǎn)換效果來(lái)替換 JavaScript 的方法可以提升頁(yè)面元素在兩種狀態(tài)進(jìn)行轉(zhuǎn)換的速度，通過(guò)使用totheleft 和 totheright 你可以迅速移動(dòng)一個(gè)框。

首先使用CSS的方法可減少頁(yè)面的代碼量，而且動(dòng)畫(huà)的執(zhí)行也更加快速。

3.使用 HTML5 Web 存儲(chǔ)

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

有兩個(gè) Web Storage 對(duì)象分別是：sessionStorage 和 localStorage ，這些存儲(chǔ)的數(shù)據(jù)是不會(huì)通過(guò) HTTP 請(qǐng)求來(lái)傳輸?shù)模虼瞬粫?huì)對(duì)請(qǐng)求的時(shí)間參數(shù)任何影響。

4.使用 Web Workers

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

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

5.使用 Web Sockets

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

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

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

應(yīng)用程序緩存可以讓你創(chuàng)建完全支持離線瀏覽的 Web 應(yīng)用，降低服務(wù)器負(fù)載以及更快的體驗(yàn)速度。可通過(guò)緩存的 manifest 文件來(lái)指定要緩存的文件，manifest 只是一個(gè)簡(jiǎn)單的文本文件。使用應(yīng)用程序緩存，你只需要簡(jiǎn)單幾步就可以創(chuàng)建離線的 Web 應(yīng)用，訪問(wèn)是非常快速，適合用來(lái)處理一些不經(jīng)常更新的靜態(tài)文件。

7.使用 CSS 替代圖片

使用 CSS 特效而不是圖片是一個(gè)很簡(jiǎn)單的用來(lái)提升網(wǎng)頁(yè)速度的方法，因?yàn)槟銦o(wú)需重開(kāi) HTTP 請(qǐng)求來(lái)獲取圖片，而且一般圖片大小也比幾行 CSS 代碼要大得多。

8.使用硬件加速

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

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

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

但不幸的是，大多數(shù)瀏覽器支持 Web SQL DB ，但 Mozilla 只支持 IndexedDB，這是你必須要考慮的問(wèn)題。

如你所見(jiàn)，HTML5 帶來(lái)很多很強(qiáng)大的新特性可以幫你加速 Web 開(kāi)發(fā)以及響應(yīng)速度，提供更好的用戶體驗(yàn)。