HTML5的效能不輸原生app 可以用拼積木的方式做HTML5產品

　　可能你已經發現了，一個好玩有趣的 HTML5 頁面在微信朋友圈裡獲得的使用者關注度會遠超過那些普通的獨立應用。在移動應用越來越多，推廣越來越難做的情況下，你的產品是不是也應該有一個 HTML5 頁面？

　　如果答案是肯定的，那麼或許可以試試 Amaze UI 這套開源的 HTML5 前端框架，利用它提供的 Web 元件、JS 外掛和層疊樣式表（CSS），你可以快速的搭建出一款 HTML5 產品。

　　對於那些經常在移動裝置上訪問 Web 頁面的使用者來說，你可能已經注意到了，一個 Web 頁面基本可以分為選單、標題欄、圖片畫廊、內容列表、分割線這幾大塊。在 Amaze UI 裡面，官方提供了各種各樣的 Web 元件，你甚至可以像拼積木那樣來搭建 HTML5 產品。

　　除了上面提到的那幾個主要網頁元件之外，像摺疊皮膚、頁頭、頁尾、圖片輪播、選項卡、簡介、段落這些都是 Amaze UI 中開發者可以直接使用的 Web 元件。由於 Amaze UI 是一款開源產品，所以一些第三方的開發者也在不斷向其貢獻特色化的元件。比如來說，在涉及到地理位置的時候，使用者可能會需要一個地圖指引，這時你就可以集 成“百度地圖”的元件；在文章下面你可能需要評論體系，這時又可以用“多說”的元件；一些服務性的網頁又可能需要客服，這時“美洽客服”元件自然也就派上 用場了。

　　當然，可能有些開發者會說，這些元素只是 Web 站點的一部分，當你真正來做一個 Web 站點時，你可能還需要各種各樣的互動效果和文字排班樣式。這時 Amaze UI 的 JS 元件和 CSS 元件的用處就顯現出來了。

　　通過 JS 元件，開發者可以獲得一系列的 UI 增強效果，比如，警告框、平滑滾動、載入進度條、彈出框、模態視窗、下拉元件、按鈕互動等等。通過 CSS 元件，開發者既可以直接整合像按鈕、表單、表格這樣的 HTML 元素，又可以使用小徽章、麵包屑導航、按鈕組這樣的頁面元件。

　　目前，Amaze UI 總共有近 20 個 CSS 元件、10 個 JS 元件和 17 款包含近 60 個主題的 Web 元件，按照 CEO 陳本峰的說法，和國外的一些 Web 前端框架相比，Amaze UI 會更多的考慮中文使用者的需求。比如在字型排版上，Bootstrap 這套前端框架就沒有定義中文字型，這樣你的網頁在不同的系統和瀏覽器下的展示效果可能都是不一樣的，但 Amaze UI 中由於定義了中文字型而且針對國內市場份額比較高的瀏覽器做了優化，所以就可以避免出現這樣的情況。

　　對於那些正在嘗試做 HTML5 產品的公司來說，你可能還停留在 Facebook、LinkedIn 等大公司從 HTML5 app“叛逃”到原生 app 的陰影中，因為即使到了今天，一些人在談到 HTML5 時還會舉上面的例子。不過一位曾經在 Chrome 團隊工作的工程師 Shinji Ikari 告訴 PingWest，Facebook 當初之所以會把 HTML5 app 做的那麼慢，這更多的是 Facebook 自身的原因，而不是由於 HTML5 不行。因為從技術上來說，HTML5 的缺陷不是慢，而是不能 Scale。當時，Facebook 的 HTML app 還在用 XML，所以可以說他們的技術是相當落後的。

　　為了證明 HTML5 app 的效能不輸給原生應用，Google 的兩位工程師專門做了一個 Fastbook 的 HTML5 app 來表明 Facebook 的“叛逃”並不是 HTML5 的錯。按照 Shinji Ikari 說法，兩年前 HTML5 app 的效能就可以趕上原生 app 了，何況現在！

　　那麼你或許會好奇，既然 HTML5 的效能不輸給原生 app，那麼我們平時看到的優質 HTML5 app 為什麼這麼少呢？對於這一點陳本峰覺得這更多的還是這一領域開發人員的技術積累不足。

　　Shinji Ikari 也表示，對於很多應用來講，寫成原生 app 幾乎是必然的，如果你在寫一個 3D 遊戲，而不需要任何的 DOM（文件物件模型），那麼根本沒有任何理由使用 HTML。使用 JavaScript 不僅不會簡化你的工作，還會讓你的專案推進變得更糟糕。但是，像 Facebook 的這樣手機應用，就是一個列表，沒有什麼可以超出 HTML5 的範圍的內容，使用 HTML5 應該會得心應手，所以很多時候大公司對於技術的選擇沒有太大的借鑑價值。

　　好了，在解釋了 HTML5 並不像人們想象的那麼弱之後，也許你會覺得 Amaze UI 裡的這些元件還不足於做出自己想要的產品，這也是 Amaze UI 選擇開源的原因之一—讓社群為其貢獻更多的內容。如果你現在正在打算做 HTML5 產品，那麼即便不選擇 Amaze UI 框架，也不要讓 Facebook、LinkedIn 這樣的案例成為你的絆腳石。

　　via: www.pingwest.com