微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

历时7年又见双11,天猫如何将前端技术发挥到极致?

2018-10-17 20:39 前端之巅

如阿里 CEO 逍遥子(张勇)所说:“在双 11 这样一个现实场景下,大商家们厉兵秣马,技术团队通过不断的创新,建立了一个新高度,使得在整个开场交易洪峰下,仍能保证交易系统的稳健,用户体验如丝般顺滑。”

而每次丝滑般体验都离不开前端团队的努力,保证电商活动页面的性能稳定,也要承担内部各个监控页面的数据精准展示。从 2011 年天猫双 11 开始,经历了 7 年天猫双 11 大促,我们整理一小部分天猫在前端上所做的技术变革,或许对于当前一些技术团队有帮助。


活动页面的性能优化


当时为了避免跳失率过高,天猫做了一些动作,例如

体积优化:全局图片开关管控,针对商品、店铺、页头、入口图等图片通过开关全局系数裁剪压缩处理,降低页面图片整体体积;请求优化:通过全局开关控制,针对走节点懒加载模块图片做域名收敛管控,降低 Mobile 端的 http 建连和 dns 握手的成本;常用图标 iconfont 化,减少请求;渲染优化:gif 动画去处和部分模块高度计算有误兼容避免引起重绘性能耗损;等等。

这么做有很多好处:体积优化通过预加载的方式减少静态资源请求;域名收敛提升资源加载速度;去除空白请求等等。


大规模 Node.JS 应用


在 2015 年的双 11 活动期间,基本上天猫大部分的 Web 页面都是通过 Node 渲染出来:天猫首页、大部分天猫频道页、双十一会场以及所有天猫的活动页面都全部基于 Node 应用提供服务;商品详情、店铺和搜索页等主流程链路上,以及天猫超市和天猫会员等业务线上的页面渲染;提供给内部运营小二的天猫页面搭建平台 Web 层基于 Node 进行开发,双十一期间在此平台上搭建了超过 1000+ 个双十一相关活动页面。

在当年的双 11 中,Node 支撑了天猫消费者端在无线设备上绝大多数的 Web 页面渲染,PC 上除了核心链路外的绝大部分页面渲染工作,并且表现非常稳定,未出现任何一起由 Node 引发的线上故障,而基于缓存化 CDN 的活动页面渲染服务,支撑双十一零点高峰的访问量也毫无压力,用少量的机器完成了去年双十一巨量投入才解决的问题。


前端极限挑战


在 2016 年双 11 大促上,天猫做了这些完善事项:100% 的服务能力:由前端主导的服务端渲染构(Wormhole)成为了电商系的基础渲染构架,当它面临瞬间十数倍的负载时要实现从前到后 100% 可用、全链路的稳定性。秒级终端体验:双 11 团队推进了“秒开项目”,目标是 90% 的页面能实现秒级体验,进行了 HTTP 协议、WebP、埋点、Zcache 等方案的改进,并将 Weex 升级为终端渲染的基础方案。VR & 3D 互动体验: VR 和 3D 的兴起、声势浩大的双 11 晚会,让双 11 中的互动技术在难度及稳定上有了更严苛的目标。可视化的前端监控:在量化和评估性能、稳定性、体验,将抽象变为具象并落地到做到系统可视,天猫也做了很多尝试。无障碍的端体验:帮助 600 万拥有智能设备的视力障碍人士在双 11 中拥有购物的平等权利。

除此以外,天猫前端基础技术体系还做出很多其他突破,我们也期待 2018 年双 11 期间,天猫能有更多的惊艳的技术表现。

12 月 7-8 日在北京举办的 ArchSummit 全球架构师技术峰会,邀请到了天猫团队双 11 总技术负责人来分享今年双 11 大促中做了哪些优化举措。


同时,阿里大数据 PaaS 平台<御膳房>数据服务和 SaaS 平台<品牌数据银行>数据架构负责人、天猫技术部技术专家樊景雪也将分享《基于人群场景的触发式数据计算》的演讲,通过用户来选择哪些数据以及指定数据处理逻辑,逻辑可以是简单查询、复杂 ETL 处理 (UDF、MR 等)、机器学习任务等方式中的一种或多种,满足品牌商 / 商家对人群运营的个性化诉求。


前端发展至今,社区中出现了很多高质量的框架与解决方案,在有限的研发资源下,团队需要尽可能多地使用社区的方案解决问题。12 月 7-8 日在北京国际会议中心举办的 ArchSummit 全球架构师技术峰会邀请了超过百位的国内外专业讲师,并设置了前端技术专题,分享他们的最新黑科技和研发经验。


目前大会 8 折优惠购票火热进行中,点击“阅读原文”了解更多详情!如有疑问欢迎咨询票务经理灰灰:17326843116(微信同号)


 
前端之巅 更多文章 Vue CLI 2&amp;3 下的项目优化实践:CDN + Gzip Mozilla是如何提升JS和WASM之间的调用速度的? Chrome 70正式版发布:Windows端将支持PWA 浏览器页面渲染机制,你真的弄懂了吗? 每个前端开发者都要了解的发布和订阅模式
猜您喜欢 Chrome 61 Beta版已支持JavaScript模块,Web支付API,Web Share JavaScript的未来 Django最牛逼,史上强无敌!最详细的教程!框架认证源码分析! IOS开发:安卓1080P界面设计规范标准 统计师的Python日记:第四天的补充