鬼道: MAP(tMall fe Architecture & Publication)是天猫 Web 端的架构代号。MAP涵盖了一张页面的代码管理、开发环境、模板、数据接口、发布、终端判断、线上监控、性能标准等各个方面。在本次双十一中,我们全链路的性能都处于竞品的顶尖水平,如首页第一、搜索结果页第二、商品详情页第一。
同时,天猫客户端会根据网络状态展示不同质量的图片,如Wi-Fi下展示高清图片,非Wi-Fi网络下展示普通图片,这个策略在图片质量和响应速度上做了很好的折中。另外,减少图片请求在移动端上效果尤其明显。Icon Font 用于维护一组图标,在享受矢量图形缩放和文字颜色可变的优势上,也是减少图片请求的一种方式;未使用 Icon Font 的图标会通过 split 工具自动合并成大图,同样可以减少图片请求数量。天猫的主要页面上都已经做到在高清屏(移动和PC设备)上展示高清图片,非高清屏上降级展示普通图片。图片格式方面,我们也有新的尝试,在天猫商品详情页面上也部分启用了WebP,主要是考虑WebP相对JPG有更高的压缩率,但WebP在移动端解压速度的问题也不容忽视。
今年的双十一电商大战完满结束,各大电商也随后相继公布了各自的订单数量和销售总额。在这一次的电商大战中,各大公司已经从单纯的价格较量延伸到平台稳定性和用户体验上的竞争,而这些较量背后需要有相应的强大技术做支撑。其中,Web前端直接和用户交互,它的稳定性、流畅性直接决定着整个系统的用户体验。InfoQ也采访了天猫的前端架构负责人鬼道,以期与读者分享天猫在Web前端方面的成熟经验。
InfoQ:我们可以看到在整个双十一的过程中,与用户打交道的前端页面访问基本都很流畅。能介绍下天猫Web端的架构么?
InfoQ:为了保证业务峰值时用户顺滑的用户体验,淘宝对前端页面做了哪些特殊处理?
InfoQ:不管是在首页还是商品页中,图片都占了很大一部分,在如此大的高并发访问情况下,网站的图片仍然可以在短时间内显示出来,真是一件不可思议的事情,图片这块,淘宝有用什么先进技术么?
InfoQ:不同地区的用户可能访问的速度也不一样,天猫在前端这块有相应的监控手段么?
InfoQ:用户可能会在不同的屏幕上访问天猫,天猫是如何保证跨终端的一致性的?
InfoQ:在本次双十一活动中,有哪些好的经验可以分享给我们的读者?