【QCon筆記】Native 和 Web 融合

簡介

理清 Native 和 Web 的亮點和痛點，借鑑對方亮點解決自身的痛點，並給出淘系 App 在這些方面的實踐。

Mobile Web 的協做能力底層來自 Webkit，上層有 html/js/css 控制頁面的結構/行爲/樣式，URI 鏈接不一樣的資源，這樣的機制能夠被 Native 借鑑，構建 Native 的分層架構。

資源

• PPT

內容

天貓移動端GMV42% 年末推達 70%

Native 和 Web 的亮點和痛點

Native 融合 Web 的能力 VS Web 融合 Native 能力：

native一般用在：首頁、搜索頁、詳情頁、交易頁等重要核心的頁面，保證DNS垮了用戶依然可使用native完成核心交易
web頁：頻道、活動、促銷等不是很重要或者頻繁變更的頁面

融合

• native基礎
• web體驗
• react native

native基礎

主要就是業務複用
兩邊分層架構對比
挑戰：解耦
工具：耦合圖-->清晰直觀、發現問題、評估集成複雜性
//todo工具怎麼用？

web體驗

首次加載

問題：首次請求資源-->白屏、用戶體驗差
解決：業內廣泛使用：打包靜態資源到端，而後push到客戶端

二次加載

利用瀏覽器自身的緩存機制，二次加載不用向服務器請求全部資源，速度明顯快了不少
//todo打包系統？發佈系統？有現成工具？

WebView  Crash  監控

監控：

• crash上下文//todo 如何理解？
• xcode自帶調試工具[模擬器]
  • 應用：我司頁面最高才耗74m內存，在安全範圍內

crash緣由：

• js頻繁執行佔用內存
• web自己在內存管理上是弱項
• 圖片解碼也很佔用內存

action：

• 釋放隱蔽內存：優化js性能
  • 困難：web生命週期內存釋放不徹底
• 優化圖片：
  • 無損壓縮：使用1.5倍-2倍尺寸就行
  • lazyload
  • cdn質量控制：壓縮到50%，內存優化大，視覺效果無差異

Hybrid API

問題： 各BU私有API
解決： 統一Hybrid方案

總結

打包、xList//todo、性能監控、HybridAPI、Native基礎

react native

slogan： write once，run anywhere！learn once,write anywhere！

Native有更好的手勢識別、動畫效果、原生控件、合適的線程模型儘管Web Worker//todo能夠解決一部分問題，但如圖像解碼、文本渲染仍沒法多線程渲染，影響了Web的流暢性
咱們須要native的人機交互+web的開發效率和發佈能力

猜你喜歡 Web vs Native vs RN:

• 內存
• CPU
• 啓動時間

規劃：

組件：

其餘問題：

思考

本身的組件庫//todo
引入RN//todo成本未知，暫時不

應用

我司暫時木有crash的問題