提高html5的性能體驗系列之四使用原生ui

原生UI即nativeUI的設計目的

HTML和css有一個優點就是靈活的樣式設計。
在大多數狀況下，咱們都應該使用HTML+css來負責UI。可是有些狀況下，咱們發現HTML+css的UI不知足需求。
1. 絕對置頂
HTML的video等元素，以及5+的map等原生元素，這些原生控件的層級高於div。
對於一些彈出的須要置頂的控件，會形成div模式的控件沒法絕對置頂，就像在web開發裏彈出的div被flash遮住同樣。
使用div方式開發的以下彈出控件：alert、confirm、actionSheet、waiting、date、time、prompt、toast，都存在這個問題。
爲此，HTML5+擴展了上述nativeUI控件，保證能夠絕對置頂。
2. 跨webview
若是界面使用webview方式的tab選項卡，但想從底部彈出一個菜單actionsheet，此時使用div方式的彈出菜單因爲沒法跨webview，只能看到一部分。
此時就須要使用nativeUI裏的actionsheet才能跨webview。
3. 全屏遮罩
彈出控件時，須要對整個屏幕的其餘部分作陰影遮罩。
使用div遮罩，一樣沒法矇住video、map等原生控件，也沒法跨webview。
並且原生的遮罩還能夠矇住手機頂部狀態條，這都是div遮罩作不到的。
HTML5+擴展的nativeUI控件，保證能夠全屏遮罩。

原生UI即nativeUI的特色

爲解決上述問題，HTML5+規範封裝了nativeUI規範。參考：http://www.html5plus.org/#specification#/specification/nativeUI.html

nativeUI的特色有：
1. 絕對置頂，不擔憂被其餘原生控件遮擋
2. 能夠跨webview顯示
3. 全屏遮罩，保證手機屏幕其餘部分處於蒙灰狀態
4. 原生樣式及高性能體驗
nativeUI的特色是，調用OS的UI控件，確保和本機體驗一致。
在iOS六、iOS7+、Android2.三、Android4.x、Android5上，OS是不一樣的設計風格，但彈出框和當前OS風格一致。
而且原生的控件展現，比div+css的方式執行效率更高。

nativeUI的侷限性

相比div+css，nativeUI也有一個缺點就是可定製性差。
開發者沒法使用css修飾這些彈出控件的樣式，它們長的、且只能長得和本機OS的風格同樣。
因此在須要個性化設計控件且不在乎絕對置頂、跨webview、全屏遮罩這些問題時，也能夠使用div+css方式製做彈出控件。

mui框架的封裝

與nativeUI全原生不一樣，mui同時也補充封裝了一些div方式的彈出控件。
mui補充提供了div方式的actionSheet、popover，能夠在nativeUI遇到限制時使用。

彈出半透明的webview，萬能但消耗內存

有時咱們發現nativeUI彈出的東西無法知足定製需求，而div方式的彈出控件又沒法絕對置頂。
此時也是有辦法的，就是多消耗點內存，即乾脆彈出一個半透明webview。
webview的WebviewStyle對象中能夠設置zindex來置頂，能夠設置高寬，能夠設置遮罩，能夠設置透明度。
在webview裏能夠隨便自定義界面，而後經過webview的evaljs方法作webview之間的窗體通信並返回結果