馮森林：手機淘寶中的那些Web技術

Native APP與Web APP的技術融合已經逐漸成為一種趨勢，使用標準的Web技術來開發應用中的某些功能，不僅可以降低開發成本，同時還可以方便的進行功能迭代更新。但是如何保證Web APP的流暢性也一直是業內討論的熱點。InfoQ此次專訪了手機淘寶客戶端高階技術專家馮森林來談談手機淘寶在Web技術方面的一些實踐經驗，另外作為ArchSummit深圳2014大會《移動網際網路，一浪高過一浪》專題的講師，馮森林將會分享手機淘寶的客戶端架構探索之路。

InfoQ：淘寶手機客戶端是否使用了HTML5技術？能簡單介紹下嗎？

馮森林：手機淘寶大量使用了Web技術，但對於HTML5，由於相容性的要求，我們相對比較保守，使用到的特性並不多。主要是一些與觸屏體驗相關的HTML5特性，大部分運用在基礎JS庫中，業務開發直接使用的場景不多。優點在於可以更好的支援一些優化的體驗，充分發揮新技術優勢和移動端獨有的能力。缺點也很明顯，相容性上需要考慮較多的適配問題。

InfoQ：我們知道Web頁面與原生的頁面在效能上還是有很大差距的，手機淘寶是如何處理Web頁面的體驗瓶頸的?

馮森林：通過使用快取技術，可以在再次載入頁面（及用到的資源）時避免緩慢和不可靠的網路請求，從本地快取載入基本可以做到即時完成，接近於原生應用的載入體驗。為了解決首次載入，我們在快取機制的基礎上引入了預快取機制（採用與AppCache一致的協議），提前將需要的頁面及資源快取到本地，即使在使用者首次開啟時，也相當於開啟已經快取過的頁面。

InfoQ：在Web頁面中不可避免的會呼叫一些Native的功能，手機淘寶是如何實現的？

馮森林：我們採取了類似於PhoneGap的實現（但更輕量級），在Android和iOS兩個平臺上分別實現了JsBridge，在JavaScript的名稱空間內建立可對映到native物件的代理。並在業界通行的實現基礎上，我們還加入了一些安全增強和保護機制，封堵常見的JS注入漏洞。

InfoQ：看來手機淘寶在HTML頁面方面做了大量的技術投入，能分享下你們的經驗嗎？

馮森林：其實，無論是快取還是網路方面的優化，都是在傳統Web開發領域內已經相對成熟的實踐。在App內，由於我們所能掌控的部分大幅度的下移，能影響一部分以往受制於瀏覽器實現的技術層次，所以可以在這兩方面做的更多更深入。但是相容Web的既有標準和實踐是我們做這些優化的基本前提，比如使用AppCache協議支援預快取，這樣有助於前端技術和實踐的跨平臺相容和複用。

InfoQ：淘寶自己實現的WebView 快取機制模組同時相容iOS 和 Android嗎？ 能否具體講一下大概的實現思路？圖片快取有特殊處理嗎？

馮森林：是的，在兩個平臺上，我們都採用了相似的實現。實現思路上完全參照標準的HTTP Cache-Control協議，在一些特定的場景下使用ETag。圖片與API採用一致的快取實現，唯服務端的快取策略配置不同而已。

InfoQ：手機淘寶開發Web頁面時有沒有用到過一些開源框架？如果有自研框架，是否考慮開源？

馮森林：手機淘寶中使用到的大部分是前端業界成熟的開源框架，如JQuery、Mustache，也有一些我們自己構建的框架，如已經開源的Kissy。基本上，除了對接私有設計的框架之外，我們都優先考慮使用成熟的開源專案，並且將我們的補充反饋給開源社群。

InfoQ：淘寶對安全性要求很高，請問在Web與Native互動的過程中，是否進行過一些加密和其它的處理？

馮森林：Web與Native的互動，本身還是受到OS安全性保護的。無論在Android還是iOS下，這都是App內部的通訊通道，因此在非越獄/ROOT的裝置上不存在已知的安全風險。由於越獄和ROOT在國內環境中的普遍性，所以在安全問題上，我們整體性的策略是將整個客戶端視同安全藩籬較低的終端，從雲端通訊及行為分析上去強化安全保護。比如我們已經在Web容器中加入的『人機識別』模組，可有效識別各種利用Web頁面和介面進行的自動『刷XX』行為。

本文轉自ljianbing51CTO部落格，原文連結：http://blog.51cto.com/ljianbing/1623828 ，如需轉載請自行聯絡原作者