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

1.使用 HTML5 表單和輸入框

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

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

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

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

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

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

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

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

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

3.使用 HTML5 Web 存儲

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

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

4.使用 Web Workers

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

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

5.使用 Web Sockets

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

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

6.使用應用程序緩存

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

7.使用 CSS 替代圖片

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

8.使用硬件加速

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

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

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

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

如你所見，HTML5 帶來很多很強大的新特性可以幫你加速 Web 開發(fā)以及響應速度，提供更好的用戶體驗。