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

1.淘宝手机客户端是否使用了HTML5技术?能简单介绍下吗?

手机淘宝大量使用了Web技术,但对于HTML5,由于兼容性的要求,我们相对比较保守,使用到的特性并不多。主要是一些与触屏体验相关的HTML5特性,大部分运用在基础JS库中,业务开发直接使用的场景不多。优点在于可以更好的支持一些优化的体验,充分发挥新技术优势和移动端独有的能力。缺点也很明显,兼容性上需要考虑较多的适配问题。
 
2.我们知道Web页面与原生的页面在性能上还是有很大差距的,手机淘宝是如何处理Web页面的体验瓶颈的?
 
通过使用缓存技术,可以在再次加载页面(及用到的资源)时避免缓慢和不可靠的网络请求,从本地缓存加载基本可以做到即时完成,接近于原生应用的加载体验。为了解决首次加载,我们在缓存机制的基础上引入了预缓存机制(采用与AppCache一致的协议),提前将需要的页面及资源缓存到本地,即使在用户首次打开时,也相当于打开已经缓存过的页面。
 
 
3.在Web页面中不可避免的会调用一些Native的功能,手机淘宝是如何实现的?
 
我们采取了类似于PhoneGap的实现(但更轻量级),在Android和iOS两个平台上分别实现了JsBridge,在JavaScript的命名空间内创建可映射到native对象的代理。并在业界通行的实现基础上,我们还加入了一些安全增强和保护机制,封堵常见的JS注入漏洞。
 
 
4.看来手机淘宝在HTML页面方面做了大量的技术投入,能分享下你们的经验吗?
 
 
其实,无论是缓存还是网络方面的优化,都是在传统Web开发领域内已经相对成熟的实践。在App内,由于我们所能掌控的部分大幅度的下移,能影响一部分以往受制于浏览器实现的技术层次,所以可以在这两方面做的更多更深入。但是兼容Web的既有标准和实践是我们做这些优化的基本前提,比如使用AppCache协议支持预缓存,这样有助于前端技术和实践的跨平台兼容和复用。
 
 
5.

淘宝自己实现的WebView 缓存机制模块同时兼容iOS 和 Android吗? 能否具体讲一下大概的实现思路?图片缓存有特殊处理吗?
 
是的,在两个平台上,我们都采用了相似的实现。实现思路上完全参照标准的HTTP Cache-Control协议,在一些特定的场景下使用ETag。图片与API采用一致的缓存实现,唯服务端的缓存策略配置不同而已。
 
 
6.手机淘宝开发Web页面时有没有用到过一些开源框架?如果有自研框架,是否考虑开源?
 
 
机淘宝中使用到的大部分是前端业界成熟的开源框架,如JQuery、Mustache,也有一些我们自己构建的框架,如已经开源的Kissy。基本上,除了对接私有设计的框架之外,我们都优先考虑使用成熟的开源项目,并且将我们的补充反馈给开源社区。
 
 
7.淘宝对安全性要求很高,请问在Web与Native交互的过程中,是否进行过一些加密和其它的处理?
 
Web与Native的交互,本身还是受到OS安全性保护的。无论在Android还是iOS下,这都是App内部的通信通道,因此在非越狱/ROOT的设备上不存在已知的安全风险。由于越狱和ROOT在国内环境中的普遍性,所以在安全问题上,我们整体性的策略是将整个客户端视同安全藩篱较低的终端,从云端通信及行为分析上去强化安全保护。比如我们已经在Web容器中加入的『人机识别』模块,可有效识别各种利用Web页面和接口进行的自动『刷XX』行为。
 
还可以再深入的阅读:http://bluereader.org/article/52429965

手机淘宝中的那些Web技术-使用了类似PhoneGap的实现的更多相关文章

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

    Native APP与Web APP的技术融合已经逐渐成为一种趋势,使用标准的Web技术来开发应用中的某些功能,不仅可以降低开发成本,同时还可以方便的进行功能迭代更新.但是如何保证Web APP的流畅 ...

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

    上篇文章<Android无线开发的几种常用技术>我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到dalvik虚拟机和android ...

  3. Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性

    简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...

  4. EMAS,一部淘宝十年移动互联网技术的演进史

    导读 本文根据2018云栖大会深圳峰会·EMAS专场—移动互联的进化论,阿里巴巴高级技术专家泠茗< EMAS全景介绍>的演讲整理而成,文中就EMAS的起源史及EMAS的五大移动研发场景解决 ...

  5. 关于手机淘宝3.25bug我的一些思考与建议

    这两天被手淘ios版3.25bug刷屏了,影响还是挺大的,仅3.25日当天截止到下午5点在微博上的话题阅读量,已经突破8000万.给广大网友带来一次吃瓜盛宴.我们先简单回顾下这个bug的故事线: 我查 ...

  6. iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

    这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动.于是乎就有了今天这篇博客,看到“手机淘宝”这个 ...

  7. 手机淘宝UWP

    各位园主好! bug 走势: 哪天bug 足够少,哪天就可以发布了  :) 2015/10/23: 49 2015/10/26: 40 2015/10/27: 36 2015/10/28: 30 20 ...

  8. Appium(Python)驱动手机淘宝App

    请注意操作步骤: 1. 用数据线连接手机, 打开开发者模式, 并赋予相关权限, 并保持不锁屏状态: 2. 启动Appium桌面服务端: 3. 运行程序: 首次运行, Appium会在手机上安装3个Ap ...

  9. [转载] 关于“淘宝应对"双11"的技术架构分析”

    微博上一篇最新的关于“淘宝应对"双11"的技术架构分析”.数据产品的一个最大特点是数据的非实时写入.

随机推荐

  1. 【WiFi密码破解详细图文教程】ZOL仅此一份 详细介绍从CDlinux U盘启动到设置扫描破解-破解软件论坛-ZOL中关村在线

    body { font-family: Microsoft YaHei UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-ser ...

  2. jsp设置footer底部内容

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. Android USER 版本与ENG 版本的差异--MTK官方解释

     分类: Android(4)  Description]Android USER 版本与ENG 版本的差异 [Keyword]USER ENG user eng 用户版本 工程版本 差异 [Solu ...

  4. Android的init过程详解(一)

    Android的init过程详解(一) Android的init过程(二):初始化语言(init.rc)解析 本文使用的软件版本 Android:4.2.2 Linux内核:3.1.10 本文及后续几 ...

  5. javascript 函数 add(1)(2)(3)(4)实现无限极累加 —— 一步一步原理解析

    问题:我们有一个需求,用js 实现一个无限极累加的函数, 形如 add(1) //=> 1; add(1)(2)  //=> 2; add(1)(2)(3) //=>  6; add ...

  6. 【HighCharts系列教程】三、图表属性——chart

    一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...

  7. Java模拟post提交表单数据

    package test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOExcep ...

  8. CSS实现三角形方法一--rotate+relative

    方法说明:两个正方形,一个小的,一个大的,将大的正方向进行旋转,然后移动到小的正方形的合适位置,覆盖小正方形的一部分,使小正方形剩余部分为三角形,再把大正方形的背景色改为浏览器窗口的颜色. 用到知识: ...

  9. 17.4.3 使用MulticastSocket实现多点广播(2)

    // 让该类实现Runnable接口,该类的实例可作为线程的target public class MulticastSocketTest implements Runnable { // 使用常量作 ...

  10. ArcEngine 关于缩放至一定比例显示地图的问题

    有这一句就行了.axMapControl.get_Layer(i).MinimumScale=j;i为该图层的indexj为比例尺的分母