挨踢部落直播課堂第二期：移動互聯網產品中如何用好HTML5？
原創【51CTO.com原創稿件】51CTO攜手APICloud為廣大開發者分享“移動互聯網產品中如何用好HTML5”，邀請到APICLoud技術專家許志鋒老師做直播分享課。內容涵蓋移動互聯網時代產品的整體架構，HTML5 For App 需要功能擴展、優化渲染、開發技巧、跨平臺產品選取等。
直播間：QQ群312724475
內容簡介：
1、移動互聯網時代產品的整體架構
2、HTML5 For App 需要功能擴展
3、HTML5 For App 需要優化渲染
4、HTML5 For App 一些開發技巧
5、HTML5 For App 跨平臺產品
一、移動互聯網時代產品的整體架構
移動互聯網時代下的產品整體架構，一種理想的架構是端到端架構，客戶端到云端。客戶端專注產品功能、UI展示以及用戶體驗；云端提供數據及服務，兩者之間通過開放API進行交互，耦合度越來越低。
移動互聯網背景下，一個典型的產品其系統架構核心應該是API，云端通常需要提供基本數據服務（NoSQL、MySQL等），系統服務（Redis、消息隊列等），聚合第三方開放平臺服務（IM、PUSH、支付、LBS等）等能力，并通過開放標準規范的API對外提供服務能力。
而客戶端通常需要包含3個端，APP端，Web端（即H5端）和微信端（微信公眾號）。APP功能全面，滿足所有功能需求，但開發周期長，成本高，難為護；H5網站開發簡單，周期短，版本迭代速度快，成本低，但功能相比APP存在不足；微信公眾號其實也是H5，但運行在封閉的微信體系內，相比H5功能限制更大。
二、HTML5 For App 需要功能擴展
接下來向大家分享，如何避開H5的不足，將H5有效的應用于APP中，實現APP的低成本快速開發。
如何將HTML5***的應用到APP中，我們認為，HTML5在現階段無法直接應用于APP，它需要進行擴展。
HTML5現階段還存在種種不足。HTML5作為一個工業標準，是一個靜態標準，迭代速度非常慢，遠遠滯后于OS、硬件技術的發展，同時微軟，Google，蘋果等瀏覽器引擎廠商各自為據，多年以來形成的商業體系難以在短時間內憑借一項標準的更新而改變，這造成了HTML5在實際使用過程中的渲染、動畫、交互不理想等兼容問題，同時HTML5是一項與平臺無關的靜態標準，基本無擴展性（比如接入推送、支持IoT等）。尤其在移動端，更是因為硬件設備的參差不齊，致使用HTML5技術實現的web產品功能及體驗遠不及APP。
我們認為可以通過對HTML5進行原生模塊擴展，并且開放API的方式，使用HTML5 + 原生模塊的APP開發模式來彌補HTML5的不足，解決HTML5功能有限，且無法擴展的問題。
需要擴展的模塊包括UI（ListView、scrollPictrue等）、設備本地功能（攝像頭、重力感應等）、數據存儲（fs、db等）、網絡（http、socket、download等）、第三方服務（支付寶、微信、融云、機制云等）等等。通過封裝模塊擴展API給JS調用，原生APP具備的功能，HTML5也完全可以實現。
三、HTML5 For App 需要優化渲染
另外一方面，為解決HTML5渲染效率低的問題，提升用戶體驗，還需對HTML5進行渲染優化。我們從HTML5和原生APP的渲染原理兩方面進行介紹。
簡單介紹一下瀏覽器引擎如何渲染一張HTML5頁面。瀏覽器渲染HTML5頁面通常分為5個步驟：
1、從遠程或者本地獲得html，html包含body、header、footer等元素
2、將html解析為dom數據結構
3、根據dom元素的屬性進行排版運算，實現layout數據結構，用于最終渲染
4、將layout流推送給渲染硬件（GPU、CPU等）
5、最終html被畫到顯示設備上，如手機屏幕等
APP的界面渲染由系統提供或者開發者自定義的各種視圖組件構成，比如ActionButton、TabBar、ImageView等。通過開發人員定義的屬性實現視圖組件的排版，定位以及層次和區域的劃分，最終展示到設備屏幕。
APICloud則將HTML5及原生APP兩者的渲染結合到一起，形成一種混合渲染機制。
APICloud APP的UI布局由 HTML5 + 原生UI模塊 構成，既使用到HTML5簡單快速開發的能力，又結合原生UI組件的高效渲染能力，使得APP的開發過程變得簡單容易，同時功能和體驗達到原生效果 。
四、HTML5 For App 一些開發技巧
下面分享一些使用HTML5進行APP開發過程中，可有效提升APP性能和用戶體驗的技巧。
充分尊重和利用HTML5的特性。去掉瀏覽器默認樣式（比如輸入框的focus框）；可點擊區域應使用div而非a標簽；使用語義化的標簽，如header、footer等，有利于代碼的可讀性和維護；充分發揮HTML5及CSS3的新特性，比如Video標簽播放多媒體，比如CSS3圓角等。
***屏幕適配。每個html頁面都必須加viewport，自適應設備屏幕；UI出圖尺寸使用1280×720；量圖標準適用2倍圖，即1280 / 2 | 720 / 2；CSS布局應使用box布局，自動適應屏幕。
避免使用一些功能大而全的重型JS/CSS框架，可以使用一些簡單的，移動優先場景下的框架，建議自己總結封裝合適APP使用的框架。
加速網絡數據加載和提升數據交互體驗。使用api.ajax，實時監聽網絡狀態，合理使用下拉刷新和加載更多，并適當的進行數據緩存，在斷網的情況下也可以保證有離線數據。
合理的使用圖片。根據不同場景使用原圖和縮略圖，減少內存占用；圖片的大小應盡量與img標簽的寬高屬性匹配，減少圖片縮放帶來的性能損失；可借助第三方存儲處理圖片，比如根據不同屏幕的手機使用不同分辨率的圖片。
提升點擊速度，優化事件響應。響應click事件的元素應增加tapmode屬性，可消除HTML5默認的300毫秒延遲；使用擴展手勢事件、全局事件管理響應操作；使用tapmode實現原生APP的點擊效果。
遵循系統特性。應當在適當的時候更新UI，理解窗口切換和HTML5渲染之間的關系，避免在窗口動畫過程中更新HTML5；避免body級別的背景圖片，可使用APICloud提供的原生方式高效實現，節省資源和復用；頁面之間傳參應避免過大，控制在數KB級別內。
五、HTML5 For App 跨平臺產品
選擇HTML5跨平臺產品的一些核心要素，引擎性能（能否開發出原生APP的體驗）、功能覆蓋范圍（能否像原生APP一樣滿足所有需求）、開放服務集成（是否支持推送、IM、支付、LBS等第三方服務的集成）、擴展機制（使用有標準的模塊擴展機制）、主流開發工具的支持（尊重開發者使用習慣，是否使用任意HTML5開發工具均可實施）、學習成本（學習曲線如何，是否快速入門）、開發者社區服務（遇到問題時是否能夠得到及時有效的技術支持）、生態完整度（比如Cordova，由adobe長期支持和維護，有開發者貢獻代碼）。
目前市面上主流的框平臺產品分為兩個方向。一個是圍繞HTML5，以HTML5+原生的混合模式，典型代表為APICloud，PhoneGap等，開發簡單，跨平臺；另一個是以中間語言編譯的方式，典型代表為RN、Xamarin，開發方式為原生開發，學習成本高，開發復雜。
HTML5在微信開發中的應用：
這是一個APICloud上的典型的端到端的項目，該項目為Intel硬享公社，***別的項目，主要為Intel在IC領域提供垂直服務。他包括服務端 + APP端 + 微信端 + HTML5端。其中APP端通過APICloud使用HTML5耗時一個月快速實現。
Q&A
1、Q：H5-君-大連：以前用的1寫的APP的代碼，怎么導到APICloud Studio 2 中？
A：APICloud-許志鋒：直接用APICloud Studio 2 重新檢出即可使用了。
2、Q：天津-前端-小恐龍：APICloud 未來會不會和Vue 這樣的MVVM框架整合？
A：APICloud-許志鋒：恩 ,其實現在 就是支持 Vue.js 的。
3、Q：Java-劉飛-南京：安全怎么保證呢？這個在手機端具體怎么弄呢？
A：APICloud-許志鋒：App 安全,可以使用HTTPS協議，必要時可以進行雙向認證。
4、Q：天津-前端-小恐龍：直接引入 vuejs 這個腳本這樣去使用嗎 ？
A：APICloud-許志鋒：Webpack 預編譯為.js
5、
A：APICloud-許志鋒：也可以把樣式寫在單獨的CSS里。
App的代碼，如果是非原生模塊部分的話，可以直接在 Web 瀏覽器里打開。
6、Q：
A：APICloud-許志鋒：Native 就是直接拿到 Cookie 發請求；如果是想在 Web中用，那就得服務器本身支持跨越了，瀏覽器本身是不能跨越的 , 如果服務器不允許跨域訪問。
7、Q：成都-前端-莽哥：我的HTML頁面，在Chrom瀏覽器里預覽是正常的，海馬模擬器中預覽上看布局就全亂了，運用的是display：flex的布局，在APICloud里樣式都是寫在HTML里，用Postcss處理的話，有沒有方便快捷的方式？
A：APICloud-許志鋒：應該是你寫法可能不太兼容。
8、Q：H5-君-大連：那個box布局怎么用？
A：APICloud-許志鋒：可以考慮用PostCSS處理下。
9、Q：北京-unicorn-數據：接口是Rest API。是否有Graphql ？
APICloud-許志鋒：APICloud Studio 操作說明的視頻教程可以看這里>>
歡迎加群學習：312724475
【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】
