说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

专访阿里前端工程师:淘宝移动Web开发那些事儿

HTML文档下载 WORD文档下载 PDF文档下载
近日,淘宝移动前端开发工程师寒泉@寒冬winter 接受了CSDN的采访。从技术选型、Web信息处理、浏览器适配、安全支付以及业务支撑多个角度,全方位解析电商巨头阿里的前端开发理念。

寒泉,阿里无线事业部前端工程师,从事淘宝移动Web前端开发工作。曾就职于微软和盛大,去年12月,加入了淘宝移动前端这支年轻的团队。近日,CSDN记者采访了寒泉,他为我们讲述了淘宝移动Web前端开发的故事。


寒泉 @寒冬winter

CSDN:请做一个自我介绍并谈谈您的个人从业经历。

寒泉:我是寒泉,网名是winter,微博上叫做@寒冬winter。我08年加入微软做Windows CE上的IE浏览器开发,2010年开始在盛大做电子书和基于Web的操作系统,2012年12月加入阿里,现在在阿里巴巴无线事业部前端团队。

CSDN:请介绍一下淘宝移动前端团队及成员。

寒泉:我们是一支相当年轻的团队 ,主要成员大多在2012年加入淘宝,成员也以85后为主——几乎与移动前端技术一样年轻。作为技术职能团队,我们和同样有激情的产品和运营团队配合,开发淘宝客户端的内嵌网页和移动端的淘宝网站。


CSDN:有人说手游是最适合使用HTML5技术进行开发的,其次是新闻和地图类App——WebGL能够很好地渲染3D动画,SVG以及Canvas能够帮助图形进行各种动态变幻,而淘宝这样的电商类型产品为何要使用HTML5技术呢?HTML5能够帮助淘宝移动Web应用实现哪些功能?

寒泉:毫无疑问HTML5在图形方面的增强让大家一下子想到了游戏,事实上HTML5也的确带给了网页游戏全新的机会,然而决定一项技术适合产品的,不是"增强"的部分,"增强"加上原来的强度才是我们最终考量的指标。相比于其它图形平台,即使HTML5提供了如此多的新特性,它仍显太过薄弱,所以我想HTML5手游的出路并非与其它平台竞争炫丽的效果,而是更充分地利用Web的链接和开放特性去增强社交化。

对于我们来说,选择HTML5与否是个伪命题,我们应该回答的是"为什么不使用HTML?"——请注意到我没有加"5"。从淘宝过去的十年来看,几乎所有的产品都是使用HTML构建的,那么在移动端继续使用这项技术是非常自然和理所当然的了。至于版本是4或者5,实际上完全取决于大多数淘宝用户浏览器的支持情况—— 我们从未指望过W3C的标准能够被完全地实现,即使是更早版本的HTML规范中的功能,我们在使用前也会小心翼翼地调研它的实现情况。


实际上HTML5的功能总是客户端功能的真子集,但是这不意味着它更弱,通过Hybrid技术,基于Web实现的功能可以快速地发布给用户,不需要经过苹果和其它软件市场冗长的审核周期,同时,完全开放的Web版内容,也让一些第三方厂商可以方便地引用我们的功能到他们的客户端。

CSDN:前端内容展示方面,淘宝移动Web应用在宝贝介绍、图片信息方面的处理,与移动客户端有哪些不同?

寒泉:大部分情况是相同的,不同之处主要有四点:

  1. Web上对缓存的使用更多,我们会通过manifest来把功能型图片长期保存在本地。
  2. WebP、SVG等新格式使用较多,当然,也要进行适配。
  3. 响应式布局中我们需要弹性图片,这一点我们还在探索中。
  4. 用户对流量更敏感,所以要使用懒加载策略。

CSDN:在移动后端开发方面,淘宝运用了哪些技术和策略?

寒泉:Node.JS我们主要用在一些内部工具中,服务端严格来说我们算是Java。展现逻辑基本在前端,后端还是集群技术比较重要。

CSDN:在购买和支付环节,淘宝移动Web应用如何针对这部分内容进行技术方面的处理,保证用户的财产安全?

寒泉:事实上,移动设备比起桌面,是个更安全的环境,尤其iOS是半封闭的平台。所以我们几乎沿用桌面淘宝的安全策略。对于支付宝,我们采用的仍然是严格的域隔离策略。

CSDN:移动Web前端技术对用户购买行为有哪些影响?

寒泉:移动终端往往输入更困难,屏幕也更小,网络环境更复杂,用户在这方面遇到困难时就更容易放弃。我们在移动平台上努力缩短交易流程和减少页面跳转。同时,因为用户层次比PC用户略微偏高,受到苹果的用户体验教育也比较多,所以对体验也更加敏感,所以前端需要配合设计师为用户提供更流畅的体验。我们花费了相当长的时间来找到苹果风格回弹、摩擦力等等。


CSDN:在浏览器适配方面,如何保证在不同的手机浏览器上保证良好的用户体验?

寒泉:在移动前端开发中,尽管可以告别IE6,但是我们要面对更多的机型、更多屏幕尺寸、以及更多浏览器种类。比如Android,看上去都差不多,但是一些无良二线厂商经常会自以为是地搞些"深度定制",说白了就是乱改Webkit内核,他们的这些patch基本没有逆向集成回Android Webkit的打算,于是这些代码没有经过内核维护者的review,也没经过严谨的测试,质量可想而知。遇到这样的bug,我们基本只有绕开,技术绕不开的,业务和体验就要妥协。 

CSDN:请谈谈淘宝移动端业务未来几年的规划。

寒泉:不久前,我们刚刚上线了微淘,这会是全新的尝试,将来我们的服务会更加定制化,我们会帮助用户找到更适合自己的内容,而不是所有人都看到一模一样的首页和运营信息。同时卖家也会更容易做更加精准的营销和积累自己的用户群体——我们也在努力去通过技术降低卖家营销的技术成本。

我们也会更充分地利用移动设备的新特性:地理位置、摄像头、传感器。对于这些特性的利用,现在业内还是非常浅层次的,我们也在积极地探索,其中一些可以引入全新的产品形态,另一些可以让产品变得更有趣或者更方便。前期尝试可能会在时效性较强的运营活动中,逐渐它们会在产品中被深度使用。

关于产品方面的规划,大家可以关注下我们的产品和运营总监的新浪微博 @尚文 。

(文/杨依帆 责编/张宁)

朝鲜:探寻最神秘的移动互联网王国 如何让IE 10玩转响应式网站 Windows Server 2012:令CIO激动的三个新特性 高德和新浪微博战略合作 打通账号互调数据 乐观锁和悲观锁 你更钟情于哪一个? Apple索30%分成 iOS版微软SkyDrive更新搁浅 [简讯] Linux 3.7发布 开源图形卡驱动程序 高效敏捷的十大经验法则 佛瑞斯特资讯公司预测2013年云计算的十个变化 百会中小企业CRM年会成功举办 发布CRM选型指南 诺基亚创新体验中心NEIC训练团正式开班 新威胁:IE新漏洞允许网站跟踪鼠标 少编码多思考:代码越多 问题越多 [简讯] JDK 7u10发布 修复安全漏洞 搜狗茹立云:为何搜狗语音助手比Siri更精准? BlackBerry 10最终版SDK Gold发布 谷歌地图正式登陆App Store 为开发者推出SDK 你的云数据的三个最大威胁 公开叫板:Google不打算推出Win8版Gmail和Drive APP备案风波:开发者何去何从? 32位和64位的JVM 我该选择哪个呢? 黑莓“Got Game Port-a-Thon”活动将于12月22日在北京举行 专访Moti Joseph:浏览器安全的经验之谈 四大开源云平台的命运基因 FPS移动游戏:画质不是第一位,操控才是死穴 微软2013年的五个安全预测 应用成武器 王淮,大城小胖论辩HTML5 局部有小雨 技术人员创业后就不再适合继续编码了? Google Dremel vs Apache Hadoop 低功耗之争:英特尔 VS ARM NEIC-诺基亚体验创新中心 助力开发者创享新移动互联时代 有谁知道windows屏幕保护的通用密码? 请教光标定位 如何使用PFXImportCertStore函数将.pfx文件注册到系统中啊! 有谁知道windows屏幕保护的通用密码 有关JSP运行的问题。分数多多 一个非常菜的问题! 如何利用socket截获80端口的数据? ji.ji.ji... 如何防止内存泄漏001 有谁知道windows屏幕保护的通用密码, xiaoxi777(小溪):请教你刚才的问题 有谁知道windows屏幕保护的通用密码,帮帮忙 在Unicode转换中,_T()与L到底怎么用,有什么区别? 关于利用QQ广告入侵 有没有深圳的阿,我快失业了,哪里要PB程序员啊 有谁知道windows系统的屏幕保护的通用密码 如何自动刷新网页?在线等待! 有谁知道window系统的屏幕保护的通用密码 怎样建设Java服务器?? 我用DELPHI打开了一个FOXPRO表,我想把FOX表的一个数字型字段(N.9.2)的一个数据(99.9)传给DELPHI中的一个变量,问这个变量是什么型的,是string,integer.? 请教Powerdesigner??? 一个ADO的问题,送上38分! 怎样在VB.NET中运行IE 在对话框显示时,怎样得到其位置? 上午62,下午54,有希望不? 关于串口打操作 一个关于InstallShield的小问题 本人朱小军,专门发帖子说有好东东,但是呢,每次都失信,各位,不要再相信我了。进来投一票吧。 关于串口的操作 如何在Delphi中调用函数StrTok? 那位大哥能否帮一下忙,详细告诉一下怎么安装fastreport,谢谢 请教一个 runtime的问题! 怎样使网页自动关闭且不出现提示框? double 和 str 如何转换? 如何将数据保存的二进制文件及如何读到及如何查询其中的数据??? 请教一个关于SQL语句的问题 高手请进,或许你知道 TechnoFantasy(www.applevb.com) 请进来取分,Taozc。 问大家一个基础问题? 怎么让FRAME启动时就为最大化的状态? 我想向各位高手请教关于对象序列化的问题! 现在很急,多谢各位! 如何获得像资源管理器上的桌面上的我的电脑,网上邻居等等 求救,关于打印机。 紧急!!!请教各位大虾: VC6上的MDI程序,我要在VC。net上运行,该怎么合理的修改?? 我也要《全套国标软件设计文档》,有谁收到了可以发一份给我吗?谢谢. mdb删除的问题,应该很简单吧 紧急求助,各位大虾: VC6上的MDI程序,我要在VC。net上运行,该怎么合理的修改?? 关于失去焦点的问题,求教 求教:怎样屏蔽系统的英文错误信息,而显示中文信息提示用户操作? 请教一个用delphi5做的录入图片的程序 crack对收入影响好大啊 两个镁离子用数字和符号怎么表示 讲解初三有关圆的知识 硫酸铝钾和水反应生成什么 !“有一只质量为10g的瓶子,单独装满某种液体时,总质量为40g,单独装金属块时总质量为90g,先装入金属块,再加满液体,质量为100克,金属块的密度为8乘10的三次方千克/立方米.求液体的密度为? 不 用圆的知识解释井盖为什么是圆的 冬天在菜窖放几桶水 防止菜被冻坏 这是什么原理啊 从物理角度回答升华是升温还是降温 凝华呢 一个瓶子装满水后称得瓶子和水的总质量为500g,若在瓶中投入金属块若干粒,称得溢水的质量为100克.此时剩余水瓶及金属块的总质量为670g.求金属块的密度呃,用公式求.其他答案我没看懂 浓硫酸与浓硝酸配成王水的比例是多少 氧化铝怎么生成氢氧化铝 向氯化铝溶液中滴加氢氧化钠溶液至过量,反应方程式 少量氨与氯化铝溶液反应能产生氢氧化铝沉淀吗? 在北方,冬天的菜窑里放几桶水,这样做是为了利用水的_____来使菜窑保持一定的温度,使菜不能冻坏. 氢氧化铝和氢氧化钠的反应方程式 次氯酸,浓硝酸,浓硫酸,Cl2,王水,F2,那个氧化性强N和S的非金属性那个强次氯酸能和Cu反应吗方程式是什么 王水 金箔 方程式 向Alcl3溶液中加入过量NaoH溶液的总反应方程式是什么 将氯化铝溶液和氢氧化钠溶液等体积混合,得到的沉淀物中铝元素的质量和溶液中铝元素的质量相等,试求原氯本题存在两个化学方程式:AlCl3+3NaOH=Al(OH)3+3NaClAl(OH)3+NaOH=NaAlO2+2H2O设:AlCl3和 铝—氧化铝—氢氧化铝—偏铝酸钠这个过程中每个转化是否可以一步实现?那么氮气—氨气—一氧化氮—二氧化氮—硝酸—二氧化氮这个过程呢?最好能写出方程式, 王水是什么?请谈谈王水的化学原理及前沿应用. 为什么王水的酸性那么强?讲的越基础越好,2009-11-5 07:14回答的同学,我记得是盐酸和硝酸吧 铝能一步变成氢氧化铝吗 加什么呢? 逆王水的原理是什么 瓶子为什么会瘪?矿泉水瓶子装了开水后.盖紧就会变瘪.这是为什么?为什么会变瘪? 偏铝酸根为什么能和二氧化碳和水反应出氢氧化铝和碳酸氢根呢?原理是什么 每日c的那种塑料瓶子能装开水吗?经常看到有人这么装,有问题吗?瓶子会烫溶化漏水吗?我不是拿来喝的,是用来当暖水袋的 瓶子瘪了的教案 铜和银怎么分辨怎么分辨、 哪种塑料瓶子可以装开水? 怎样使瓶子变瘪? 如何区别银与铜 大瓶午后红茶的瓶子能够装开水吗,这种塑料能够承受开水吗 为什么瓶子会变瘪?我把一个软矿泉水瓶中装了三分之一的水,然后把它放入冰箱,一段时间取出发现瓶子变瘪,瓶子为何会变瘪? 为什么有的银的颜色有点想铜,怎么分辨真假? 塑料瓶子可以装开水喝吗?塑料的杯子和饮料瓶子可以装开水喝吗? 为什么瘪气球在瓶子里吹不大?行不. 三氧化二铝及氯化铝各为共价化合物还是离子化合物 王水化学式,化学名称是? 把碳酸钠溶液预氯化铝混合,产生的沉淀是氢氧化铝吗? 冬天,我省的许多菜农利用温室栽培蔬菜.在温室中,蔬菜可直接在土壤中栽培,也可利用人工配制的营养液进行无土栽培.请回答下列有关问题:(4)某温室从16点开始持续密封48小时,测得温 向20ml某物质的量浓度的氯化铝溶液中滴加2mol/lNaOH溶液时,得到氢氧化铝沉淀质量与所滴加NaOH溶液的体积关系如图.(1)图中A点表示的意义(2)图中B点表示的意义(3)上述两步反应的总的离子方程式 用0.5N的力匀速拉动一块木块,和用0.8N匀速拉动同一块木块,请问木块两次受到的摩擦力相同吗?不是说物体处于平衡状态时,两边受力是相同的吗?照这么说用0.8N匀速拉动同一块木块时,木块受到 冬天我国北方的许多菜农利用温室栽培蔬菜,菜农常采用白天适当增强光照,夜晚适当降低室温的措施,以提高 为什么将底部有孔的瓶子的盖子拧紧 力物体发生形变时会产生一个反抗形变的力,叫做( ),物体的( )越大,这个力就越大. 菜农李伟种植的某蔬菜计划以每千克5元的单价对外批发销售,由于部分菜农盲目扩大种植,造成该蔬菜滞销.李伟为了加快销售,减少损失,对价格经过两次下调后,以每千克3.2元的单价对外批发 给瓶子里的水加热时,盖上盖子,是使瓶子里气压增大还是减小?1、水烧开后,盖上盖子,使瓶子里气压增大还是减小?2、为什么烧瓶中的水加热至沸腾,用橡皮塞塞紧瓶口,倒置瓶口,热水停止了沸 物理学是研究力热声光电等方面的知识,请各举一例力:热:声:光:电: bacl2 FeCl3 AlCl3为什么是共价化合物?按理说盐应该是离子化合物的啊 为了是AlCl3溶液中的铝离子尽可能全部转化为Al(OH)3沉淀,最合适的试剂是 A.氢氧化钠溶液 B.KOH溶液C氨水 D盐酸 熟悉陌生的力.1.贝贝用绳拴住水桶从井中提水,水桶受到一个向上的拉力,它的施力物体是 ;手受到一个向下的拉力,它的施力物体是 .2.在跳板跳水这一运动项目中,运动员对跳板施力的同时,也 FECL3是离子化合物还是共价化合物?请专业人士回答! 要使硫酸铝溶液中的铝离子全部沉淀下来,适宜的试剂是A、盐酸B、氨水C、氢氧化钠D、二氧化碳 要王水溶解Au,Pt,Ir的化学式及还原方法和还原的化学式 请问铜和什么反应,变黑?放在外面的铜经过长时间的存放会变成黑色,请问是铜背氧化了吗?如果铜长时间加热的话,会不会出现这种黑色? 用圆的知识解释一下瓶子的盖为什么是圆的? 什么和水反应生成甲烷和氢氧化铝? 北方冬天的菜窖里,通常要放几桶水,原因:利用水的 ,防止蔬菜冻坏(用物理知识回答) 镁离子的微粒符号怎么写 用圆的知识解释日常生活中,人们围观时为什么会自然地形成圆形呢?更好的加10. 硫酸铝钾与水的反应后你即然说酸碱不共存,并且我们知道此反应必生成氢氧化铝,所以你说错了,不信你查书
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn