冯森林：手机淘宝中的那些 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』行为。