馮森林：手機淘寶中的那些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』行爲。