双十一特辑 · 买买买的背后,电商如何做好前端优化?(一)

16,276 阅读4分钟

双十一除了帮媳妇清空购物车之外,(前提是你得有)作为开发者,双十一狂欢的背后是技术层面的较量。小编整理了天猫前端 2015年双十一总结,帮助你更好了解双十一的背后,同样关注前端,更要关注在人肉 DDOS 的背后,有强大的架构支撑!明天继续带来电商的架构合集!
记得关注标签 双十一 更快了解双十一热门技术文章!


双11前端分享系列(一):活动页面的性能优化
无线优先从去年开始推行,今年更是全面无线化,双11无线业务成交拿到了不错的结果,性能也迈出了一大步,对比去年双十一页面整体load时间提升了2s秒左右,秒开率达到了70%


双11前端分享系列(二):天猫双11页面服务容灾方案大揭秘
会场活动页,承载了促销商品导流功能,是消费者的购物入口,在双11活动中的地位可谓重中之重。保障活动页的快速稳定可用,是非常非常重要的。这次天猫双11会场页面渲染由wormhole来承担(wormhole本身会在后续的文章中详细介绍),下面介绍一下wormhole的容灾方案。


双11前端分享系列(三):浅谈 React Native与双11
希望能透过 react-native 的动态性,将 react native 的优势带入客户端,如手淘、手猫,让使用客户端浏览体验更佳,并且保持动态性,快速协助响应业务。


双11前端分享系列(四):大规模 Node.js 应用
在刚刚过去的 15 年天猫双十一中,Node.js(后文简称 node) 大放异彩,不仅帮助前端团队快速、高效的解决双十一各个业务上的页面渲染问题,同时在性能和稳定性上也表现非常出色,大大降低了双十一硬件成本的同时,在整个双十一期间未出现任何一起由 node 引发的线上故障。


双11前端分享系列(五):解密2015狂欢城
Canvas Cache就是使用一个额外的Canvas来保存已经绘制过的内容,下一次使用的时候直接从这个Canvas上读取,这样就可以大大减少Canvas的绘制次数,例如原先首屏绘制次数约为75左右,使用cache后的次数约为28,减少了62.67%,在三四环会更明显,因为没有动画,所有内容都可以cache。


双11前端分享系列(六):大规模 Node.js 应用(续)
第四篇文章讲述了我们是怎样应用 Node.js 解决模板渲染的实际问题的,而这一篇我们来看看天猫是如何一步步将 node 推广到各个业务线上的。


双11前端分享系列(七):如何精确识别终端
首先,要先说声抱歉,因为,其实目前我们还没有做到精确地做到识别99%的终端设别,其中原因,一部分是因为终端类型和UA实在难以覆盖,另外一部分原因也是因为使用了一些错误的识别策略。


双11前端分享系列(八):双11密令红包的前端技术方案
这个玩法几乎所有的页面都需要适配Phone、Pad和PC。使用响应式开发,一套页面适配所有端曾经是我们的梦想,但是也得回归现实。不管是从设计方面,还是技术实现方面,密令红包的PC版本都与Phone版本存在着较大的差异,针对PC和Phone做两套页面的实现是无法避免的。


双11前端分享系列(九):vue+webpack在“双十一”导购产品的技术实践
双十一中,无线前端的产品可以说非常的丰富。在双十一中,互动始终是重头的一部分,但是与以往不一样的地方是,导购产品在本次双十一中有着不俗的表现。而今年的双11导购业务占据了5大模块里的后三个,除了必抢,其它业务均是由手淘的同学来完成的,笔者作为导购产品的一员,选择导购产品来给大家解读其中的技术实践。


双11前端分享系列(十): 如何为用户省电
我们要做的还有很多,怎样在小细节上让用户的手机在电量上更坚挺,提升用户浏览网页的快感,让性福与高潮更持久一点,就是今天的主题了。


双11前端分享系列(十一): H5性能最佳实践
手淘中大量的业务采用H5的方式开发,H5体验好坏全面影响着手淘的使用体验。今年手机淘宝在技术上重点解决“顿”,“卡”,“慢”的问题,并提出了“521法则” 。


好东西要分享喔,记得朋友圈分享!