HTML 5應用效能調優工具WAPA簡介

WAPA來源

WAPA是Web Application Performance Analyzer(Web應用效能分析器)的簡稱，其來源於Intel軟體與服 務部門全球夥伴關係事業部HTML5應用團隊的創新項目。旨在給開發人員提供如何編寫高效能HTML5應用程式提供代碼層級 的建議。

眾所周知，Web應用很長一段時間因為其效能底下的問題，無法和本地應用在使用者體驗上相媲美，隨著 HTML5以及移動終端效能的快速發展，Web應用即將呈現一個井噴的趨勢，不管是在其數量上，還是品質上。但是如何編寫高 效的Web應用卻是橫在開發人員面前的一道坎，這主要體現在三個方面：

1. Web開發不同於本地開發，實現同樣的功能 有幾種寫法，DOM Selector就是一個典型的例子；哪種方法在Web應用的開發中是高效的相信困擾了很多開發人員。

2. W3C的HTML5標準已經塵埃落定，但是各大廠商的實現卻是百花齊放，同樣的一個功能，實現的方法各不相同，相應的介面也 不一樣。

3. Web的發展日新月異，越來越多的最新的高效能的API開放給了廣大的開發人員，CSS3 animation就是其中 的典型，如何及時充分使用這些高效能的介面去開發應用呢？

基於解決以上三個問題，我們開發了WAPA工具。接下 來將會由系列文章給大家介紹WAPA的架構，構成，分析規則和策略，協助開發人員開發高效能HTML5應用程式。

WAPA工 作流程

WAPA的工作 流程如上圖所示：

1. 首先解包目標Web應用的安裝包；

2. 接下來解析相應的原始碼檔案(.html, .js. .css)

3. 如果是JS檔案，則產生相應的文法樹；如果是html和CSS檔案，則靜態解析檔案；

4. 將解析後的文 件或者文法樹和WAPA中預置的最佳化規則進行匹配和識別；

5. 根據匹配和識別的結果產生相應的report，供開發人員選 擇。

WAPA系列內容安排

本文是WAPA介紹的開篇，接下來會依次講解：WAPA使用篇，WAPA規則詳解篇，和WAPA 總結篇。

在WAPA使用篇中將具體介紹如何使用WAPA，WAPA會彙報出什麼樣的提示給開發人員；

在規則詳解篇中 將為開發人員詳解每個規則提示的效能原因和改進方法；

在總結篇中將會給大家總結WAPA分析案例中常見的HTML5應用 開發效能障礙點以及如何避免