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

专访阿里前端工程师:淘宝移动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:请谈谈淘宝移动端业务未来几年的规划。

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

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

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

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

SanDisk发展之路:专注SSD、推新产品线 AMD发展线路图曝光,欲造500+平方毫米GPU 全球移动开发者:IAP降温,企业应用成待掘金矿 Vuforia 2014 视觉大奖赛:寻找最炫酷AR增强现实应用,迈向巅峰! MapReduce谢幕,谁将成为最终的接棒者? 变身音乐控制器!开源JavaScript库NexusUI 从112台服务器到Q2 50亿基础设施开销,谷歌只用了15年 【技术文章】微信公众平台开发教程新手解惑40则 Qualcomm承诺投入1.5亿美元 扶持中国初创企业 物联网多了把“新板凳” 联想推三款智能硬件 .NET技术+25台服务器怎样支撑世界第54大网站 基调网络发布听云平台:“听”懂App性能 《近匠》豌豆荚李大海:用搜索敲开手机娱乐平台之门 微信开发HTML5轻游戏中的几个坑 【微信大会】企业号、支付功能、智能客服与LBS、电商开发解析 【CTO俱乐部走进海尔】活动图文直播进行中 燃料电池商业化,数据中心或将永不断电? 广告教父的哲学:值得F2P游戏借鉴的8条经验 UC李云:基于Chromium的浏览器如何打造更好体验 一周消息树:颠覆互联网思维?年薪50万码农转行卖凉皮 Coconut2D:跨平台2D游戏及应用开发工具 第八届中国大数据技术大会将于12月中旬隆重召开 10个常见的缓存使用误区 用户暴增下的收入降低,AWS面临尴尬 云数据中心选址PK:微软第一,IBM第二,谷歌最少 不应错过2014微信开发者大会的八个理由 为什么软件测试需要变革? 苹果和IBM成最佳搭档 微软谷歌或受威胁 OpenStack社区又添新成员 浪潮推动开放云生态系统构建 重度使用AWS及Hadoop,Pinterest的自服务平台打造历程 《近匠》腾讯信鸽:基于大数据的推送 authorware中的按钮。 哪里有发送mail成功的php程序!! 关于上传数据的一个特殊问题,有点难 怎么用OLE实现与手机的通讯?? 汉语分词算法 grid显示问题 成为Delphi高手须看哪方面的书籍,请高高手指教? 关于属性页的小问题? 为水园增加点正气: 大家都是斯文人吗,呵呵||||| 诗经国风2001版----之桃夭 高手高手教教我 +++++++++++++一个很奇怪的问题************* 请问:有没有专门介绍C++函数使用的书籍? 提個有點難度的問題.看問題的有獎. 高手请看:这语句错在哪? 哪儿有dos的原代码? 谁能平息这几天水园的争端^^^^^^^^^^一个详和的水园^^^^^^^^^^^我只能拿分支持 为何显示黑乎乎的一片,chick!!!!!!! 原来女人也好色,欢迎MM。 心芯蕊~来拿分~~~~MM要分能不给吗??砸锅卖铁也要给啊!~~~~55555,可怜我的分啊~~~~~~~~~~~ 着急??一小段代码!!谁来看一下?? 男子汉说到做到,我在此特地向一位女士道歉 高分求救!急急! ! ! ! 奇怪,编译DIRECTX例子正常,新建一工程后改写主文件后运行BltFast函数为何这样? 急求高人!不简单:关于common dialogbox控件的问题? 怎样学可视化编程? 用Jmail收信后,为什么WORD之类的附件打开总是乱码?? 请问如何使用BCB中的PageControl创建Wizard? 别人跟的帖子也应该能回复呀! Rational Rose2000 Enterprise Edition的License Key是什么? 哪位好兄弟肯给我一个Jbuilder4的序列号? 就有两个月了,还没怎么看书,不知道能不能过高程!!! -------我和我MM系列(转)几乎是完全版 有MM和没MM的都来看看吧 当然MM也可以看~~ 建议:在此开设一个程序之家聊天室。 请教一个简单问题!! 请问各位:如何显示GIF图像??? 最近水园很没劲,看样子是要离开的时候了,虽然我来的时间不是很长。唉,为什么会这样? 这几天晚上我都会在263战网 谁能 提供超大空间 用于上传PB80光盘 月末,大富翁银行将作月结,如果跟本银行还有业务关系,速来通知 用ado怎么连接excel文件,不用odbc行吗? 软驱自动保存是怎么一回事情 请问各位大虾,在VB中,怎样才能改变PictureBox或Imagebox的形状,让它可以容纳圆形的图片.或者用其它方法实现对不规则图片的操作.比如我编了个网络象棋程序,怎样用一个PictureBox来容纳一个圆形的棋子. 请大家帮忙一下拉。http://www.csdn.net/expert/topic/216/216983.shtm 我真急啊 有知道 MPG4 格式的吗?告诉网址也给分!!! 用SDK调用数据库?? 线程 进程 钩子 各种窗口 COM 都凑凑合合 的学完了,接下来我应该去学什么呀???? 十万火急!怎样用api实现使一个程序在系统托盘上出现!要2000和98下都可以!还有在vb判断端口是否忙! 请问那里有关于CMM的相关书籍下载?最好是中文版。谢谢! 打印窗口 知道进程的 ID 或句柄 该怎么得到 进程所对应的主窗口(如果有的话) 的句柄呢???? VC菜鸟,来这吃草,各位老鸟,多多关照,高分奉上,请多指教 作业本上说KClO3+6HCl=KCl+3Cl2+3H2O的转换是KClO3中的Cl转换到KCl里得到6*e-,然后6HCl中的Cl转换到Cl2中失去6*e-,是错的,那么正确的转换应该是怎样的? 质量相等的下列物质经过化学反应后,放出氧气的量最多的是KClO3?KMnO4?HgO?H20? 氯酸钾制氧气的化学反应方程式? 在反应KClO3+6HCl=KCl+3Cl2+3H2O得电子和失电子的原子个数比?详解. 氯酸钾点燃制氧气的电子转移比如几个某某 转移几mol 成了某某 等等 氯酸钾制氧气的方程式中为什么12个电子都会转移到cl中 HNO3的电子式怎么写? C与CuO反应的化学方程式?急 MnO2与Hcl反应制取氯气,有哪些物质可以代替Hcl? 铜与硝酸反映,如果有1MOL电子,转移,则被还原的硝酸为多少A,63G B.21G C.0.5MOL D.不确定 CuO和HNO3反应的化学方程式 用MnO2和Hcl(浓)制氯气 (浓硫酸过量,并可以补充) 为什么实际称量的MnO2固体的质量必须适当多于理论量 镁和稀硝酸反应时,每有1molHNO3反应,就有0.8mol电子转移,此时硝酸的还原产物可能是 氨气与CuO反应化学方程式 用KClO3和MnO2反应剩余物制HCL怎么制方程式写下生成的是两个强电解质。你确定会发生?为什么要加热 如图,已知A、B、C三点不共线,求作一点P,使PA=PB=PC. 通过探究CuO用作KClO3分解制取氧气的催化剂实验,你能得到什么启迪如题 MnO2+HCl生成什么? 怎么用excel完成数据的计算机处理文件.要求有数据的点线图及数据拟合(线性或非线性提交一份用excel或origin完成的你在无机分析、物化、有机实验课所得数据的计算机处理文件.要求有数据 在6KOH+3Cl=5KCl+KClO3+3H2O反应中氧化剂和还原剂的质量比是 在实验室制取氯气的反应过程中,若有17.4g的MnO2被还原,则被还原的HCl的质量为()详细过程 KClO3与HCl的反应方程式一共有几个方程式啊?还有KClO3+6HCl=KCl+3Cl2(g)+3H2O这个反应为什么Cl2既是氧化产物又是还原产物啊?用归中反应规律解释一下力求浅显谢谢!(主要是后一问) 分解反应中怎样辨别氧化剂和还原剂?氧化物的定义:氧化剂是得到电子(或电子对偏向)的物质,在反应时,所含元素的化合价降低.还原剂的定义:还原剂是失去电子(或电子对偏离)的物质 分子相对质量是计算一个分子的相对质量吗? kclo3和hcl反应的离子方程式是离子方程式啊,同志们啊不要给我化学方程式 氯酸钾分解制氧气的反应中,什么是氧化剂?什么是还原剂? 计算O2 KClO3 Ca(OH)2的相对分子质量我们没学这个..本来是预习作业结果忘了带书回来..麻烦写上计算过程和答案 谢谢! KCLO3 和 浓HCL如何反应 在3Cl2+6KOH=5Kcl=Kclo3+3H2O的反应中,氧化剂与还原剂的质量比 KClO3中各元素的质量比 KClO3+6HCl=KCl+3Cl2↑+3H2O有0.5mol电子转移,则有几molCl2生成?多少个HCl被氧化?几mol+5价Cl被还原? kclo3分解反应中的氧化剂和还原剂是什么 HCl KClO3 硫酸铵 碱式碳酸铜 氧化镁 2H2O2 的相对分子质量 kClO3+6HCl===KCl+3Cl2+3H2O 中当转移的电子数目为0.5mol时,生成的cl2的质量为多少? KMNO4和KCLO3的混合物加热.KMNO4和KCLO3的混合物加热,充分反应固体质量减轻12.8G,将反应后固体溶于水,过滤、洗涤、干燥的固体8.7G,求混合物中含KCLO3的质量. 已知KClO3和MnO2混合物中,MnO2%占25%,加热一段时间后,测得混合物中MnO2为20%,求参加反应的KClO3质量占原KClO3质量的百分之几? 已知反应:Kclo3+6HCL=KCL+3CL2+3H2O,求出被氧化和未被氧化的HCL的质量之比.具体过程或者解题思路. KMNO4和...KCLO3的混合物加热 kMno4 Kclo3 HgO 分解方程式 已知氧化还原反应:KCLO3+6HCL=KCL+3CL2+3H2O,在反应中得到3molCL2转移的电子为:5mol. 用H2O2制氧气的发生装置为_________型,用KMnO4和KClO3制氧气的发生装置为_____型.在线等 kmno4和KClO3各10克分别放在质量相等的试管中加热,使其完全分解后将kmno4和KClO3的固体残余物分别放在托盘天平的左盘和右盘,则天平的指针()A.在中间B.偏左C.偏右D.无法判断 KCLO3和HCl方程如何配平 过程思路///为什么我配盐酸为5帮标一下电子转移方向和数目谢了 用H2O2制氧气的发生装置为( )型,用KMnO4或KClO3制氧气的发生装置为( )型. KMNO4和KCLO3混合加热产生的气体 已知KClO3+6HCl=3Cl2+KCl+3H2O中KClO3+6HCl=3Cl2+KCl+3H2O中 求出电子如何转移转移的数目方向 求出氧化产物和还原产物的质量之比求出被氧化和未被氧化的盐酸质量之比 H2O2、KMnO4、KClO3、H20,哪个制得的氧最多 在KClO3中加入少量KMnO4,可使KClO3分解速度加快的原因是: KClO3+6HCl=KCl+3Cl2+3H2O中转移电子为何为5e-与计量数是否有关? 请问kmno4 kclo3 h2o2 三者生成相同体积的氧气,转移的电子数之比是多少? KClO3和二氧化锰加热分解的问题!哪个元素化合价升高了?哪个降低了?哪个被氧化?哪个被还原? KCLO3+6HCL=3CL2+3H2O+KCL怎么用双线桥表示反应物中有两个CL,生成物中也有两个CL,到底是从哪个CL到哪个CL化合价在变化,最好把全部过程写出来, KMnO4是一种常用的强氧化剂,工业上以软锰矿(主要成分MnO2)为原料,通过液相法生产.即在反应器中在碱性条件下用氧气氧化MnO2得到K2MnO4,分离后得到K2MnO4,再在电解槽中用铂板作阳极,铁作阴极 用氯酸钾和二氧化锰制氧气 的化学方程式 【急】KClO3+6HCl=KCl=3Cl2+3H2O氧化还原反应详细分析在这个反应中,转移电子数为5.据说是HCl中的Cl,一个保持-1价不变,其余五个变为0价,KClO3中的Cl变为0价.我一开始是以为KClO3中的Cl变成KCl中的Cl,降 KMnO4和MNO2和H2SO4反应生成什么 氯酸钾与二氧化锰制氧气方程式 KClO3+6HCl===KCL+3CL2+3H2O中,电子是怎样转移的?双线桥怎样表示?(因为是新人,没什么积分)失电子与得电子(氧化产物,还原产物)都是在氯气上吗? 用氯酸钾、过氧化钠、氧化汞、高锰酸钾制取氧气 若制得相同质量的氧气,反应中电子转移数目之比A、2 :2:1:4 B、1:1:1:1C、2:1:2:2D、1:2:1:1 请麻烦解释一下每个化学反应里电子 氯酸钾和二氧化锰的混合物加热制氧气的化学反应方程式是甚么?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn