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