冯森林:手机淘宝中的那些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  ,如需转载请自行联系原作者


相关文章
|
7天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
1月前
|
前端开发 数据库 UED
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用的关键技术,包括前端优化、后端优化、数据库优化等方面。通过深入讨论各项技术的原理和实践方法,帮助开发者们提升Web应用的响应速度和用户体验。
|
1月前
|
存储 前端开发 JavaScript
从前端到后端,探索现代Web开发技术
本文探索了现代Web开发技术的各个方面,包括前端和后端开发以及多种编程语言的应用。通过对JavaScript、Java、Python、C、PHP和Go等语言的介绍,深入探讨了前端和后端开发的基本原理和常用工具。同时,还涵盖了数据库技术在Web开发中的重要性和应用场景。无论你是初学者还是有经验的开发者,本文都能为你提供全面的视角和实用的知识,帮助你在Web开发领域取得更好的成果。
|
1月前
|
前端开发 开发者
探索前端技术的新趋势:Web组件化开发
【2月更文挑战第11天】 在这篇文章中,我们将深入探讨Web组件化开发的概念及其对前端开发领域的影响。不同于传统的摘要方式,我们通过一个故事来引入主题:想象在一个快速变化的数字世界里,有一座由各种小型、独立、可复用的建筑块构成的城市,每个建筑块都拥有独特的功能和风格,它们可以自由组合,创造出无限可能的城市景观。这座城市,就像是使用了Web组件化开发技术的前端项目。接下来,我们将详细探讨Web组件化开发的优势、实现方式以及面临的挑战,为前端开发者提供一个全面的视角来理解和应用这一重要的技术趋势。
61 5
|
2月前
|
IDE Java API
使用Java Web技术构建RESTful API的实践指南
使用Java Web技术构建RESTful API的实践指南
|
1月前
|
SQL 存储 数据库
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
基于Web技术的在线考试系统的设计与实现(论文+源码)_kaic
|
1月前
|
网络协议 安全 网络性能优化
基于web技术的企业网设计与实现_kaic
基于web技术的企业网设计与实现_kaic
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
1月前
|
网络协议 安全 网络性能优化
基于web技术的企业网设计与实现_kaic
基于web技术的企业网设计与实现_kaic
|
1月前
|
缓存 前端开发 JavaScript
现代Web开发中的前后端分离技术探究
本文旨在探讨现代Web开发中的前后端分离技术,包括前端框架、后端接口设计、数据交互等方面。通过深入分析,我们将了解如何优化开发流程、提高性能和用户体验,以及如何选择适合项目需求的技术栈。