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

时间: 2024-08-02 17:42:15

冯森林:手机淘宝中的那些Web技术的相关文章

《转》冯森林:手机淘宝中的那些Web技术(2014年)

Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅性也一直是业内讨论的热点.InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验,另外作为ArchSummit深圳2014大会<移动互联网,一浪高过一浪>专题的讲师,冯森林将会分享 手机淘宝的客户端架构探索之路 . InfoQ:淘宝手机客户端是否使用了HT

手机淘宝中的那些Web技术-使用了类似PhoneGap的实现

Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅性也一直是业内讨论的热点.InfoQ此次专访了手机淘宝客户端高级技术专家冯森林来谈谈手机淘宝在Web技术方面的一些实践经验,另外作为ArchSummit深圳2014大会<移动互联网,一浪高过一浪>专题的讲师,冯森林将会分享手机淘宝的客户端架构探索之路. 1.淘宝手机客户端是否使用了HTML5技术?

手机淘宝推荐中的排序学习

原文:http://yq.aliyun.com/articles/122?spm=0.0.0.0.oL8bTY 周梁:淘宝推荐机器学习技术专家,中国科学院自动化研究所机器学习博士,主要研究工作方向是机器学习.大规模并行算法优化.先后从事过广告CTR预估,MPI机器学习平台搭建,手淘个性化推荐等多方面工作. 排序学习是推荐.搜索.广告的核心问题.在手机淘宝的推荐场景中,受制于展示空间的限制,排序学习显得尤为重要.在淘宝,如何从十亿的商品中,挑选出用户 今天喜欢的商品,也是个巨大的挑战. 本次我们分

电商客户端竞品分析-手机淘宝、京东、唯品会、聚美优品

市场状况 艾瑞最新统计数据显示,2013年移动网购整体交易规模1676.4亿元,同比增幅高达165.4%,而同期PC端网购规模将近16000多亿元,同比增速35.7%.预计2017年市场规模将近万亿,增速39.4%. 图1 2011-2017年中国移动购物市场交易规模 2013年中国移动网购渗透率9.1%,同比去年增长超过四个百分点.预计到2017年移动购物渗透率达到24.1%. 图2 2011-2017年中国网购交易额PC端和移动端占比 2013年移动网购企业份额中,手机淘宝占比76.1%,京

手机淘宝 521 性能优化项目揭秘

又是一年双十一,亿万用户都会在这一天打开手机淘宝,高兴地在会场页面不断浏览,面对琳琅满目的商品图片,抢着添加购物车,下单付款.为了让用户更顺畅更方便地实现这一切,做到“如丝般顺滑”,双十一前夕手机淘宝成立了“521”(我爱你)性能优化项目,在日常优化基础之上进行三个方面的专项优化攻关,分别是1)H5页面的一秒法则:2)启动时间和页面帧率提升20%:3)Android内存占用降低50%.优化过程中遇到的困难,思考后找寻的方案,实施后提取的经验都会在下面详细地介绍给读者. 第一章 一秒法则的实现 “

手机淘宝Android客户端架构

手机淘宝Android客户端有几百人开发,十几个团队.如果整个Android客户端是一个工程,那十几个团队每个人上午上班第一件事情估计就是合代码,运气不好,一天都在合代码,而且只要有一个人提交的代码编译不过,所有人都会被堵塞在那里,所以单个工程是不可能的事情. 只要是包含了很多业务的客户端,都会面临这个问题,各个业务代码量越来越多,新需求又源源不断的来,业务团队之间要是有直接依赖,那被依赖最多的团队成员,在改代码的时候都是战战兢兢的,生怕自己的改动导致其他业务奔溃.最终交付的时候,总会被一个业务

手机淘宝构架演化实践

2014年12月19日~20日,ArchSummit北京2014大会顺利举行.“移动互联网,随时随地”是非常火爆的一个专题.阿里无线事业部技术负责人庄卓然(花名南天)任出品人.来自阿里无线事业部的高级专家李敏(花名心石,微博:@allblue_华丽地低调 )分享了<手机淘宝架构演化实践>(幻灯片下载). 李敏主要负责淘宝无线客户端和无线网站基础服务.购物主链路的架构.研发方面的工作.从09年开始参与手机淘宝研发团队的组建和线上产品研发,先后负责过无线部门的社区.会员.营销.交易等多条产品线的技

Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

本文由嵌入式企鹅圈原创团队成员.阿里资深工程师Hao分享. 上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android的一些核心技术,现在就来介绍下它的一些原理. 本篇先介绍dexposed方案:https://github.com/alibaba/dexposed,它是手机淘宝团队使用的热补丁方案,后来开源到github上,取的名字dexposed表明了自己是基于

高效、稳定、可复用——手机淘宝主会场框架详解

导读: 为了让消费者在大促时能更快挑选到商品和进行平台的营销互动,手机淘宝都会有一个页面来承载大促的核心内容和主要的营销要素,称之为主会场.本文重点分享 了从技术和业务上如何提升主会场效能,将浏览体验做到最优,让用户能够更快地找到自己感兴趣的内容,提高转化率,应对任何业务变化,保障大促的顺利进行. 每次为了让消费者在大促时能更快挑选到商品和进行平台的营销互动,都会有一个页面来承载大促的核心内容和主要的营销要 素,我们称之为主会场.以前主会场开发,都是前端通过页面搭建系统或者以源码方式制作PC页面