今年双十一的整体节奏从以往的“光棍节”变成了今年的“双节棍”。“唯一不变的就是变化”。面对这些变化，既是挑战，也是机遇。我们要做的是，“不仅”要高效支撑，确保业务先赢，“还要”保证体验和稳定性带给用户极致体验，“还要”追求创新，让前端不断进化。为了做到“有必要、有必要、有必要”，在技术方案、流程机制、人员组织等各个方面都进行了大量的设计和保障。最终，双峰的第一个双十一圆满结束，桃园前端也实现了目标，包括大量优化方法和创新方案的应用，提升业务转型；FaaS、PHA、ESR等技术在更多场景的应用，进一步将前端的能力和边界分别扩展到服务端、客户端、CDN节点；应用视觉还原、集成研发等方式提升研发效率，极大缓解资源瓶颈。下面就今年双十一淘宝前端的思考和沉淀做一个整体的介绍，希望对大家有所帮助。以后还会有各种话题的系列文章，希望大家继续关注。（更多干货内容请关注【淘科技】公众号）Changes&Challenges今年的双十一，首先让你感受到的是不断的变化。单峰变双峰：双十一从之前的一个波段变成了今年的两个波段，大促、预售、预热、官网三个阶段也相应翻了一番。首先，带来研发工作量的大幅增加。第一个挑战是在进度不变、工作量增加、人员不变的情况下，高效完成需求研发；其次，面对六个阶段的状态变化，如何保持精准切换、稳定运行、流畅体验，是双峰时期要保障的重点；最后，面对20多天的超长作战期，安全生产、人员状态维护、快速反应都需要强有力的组织和机制。保证。图：双十一节奏首页大改版：最新的淘宝首页在首屏内容上有颠覆性的变化，比如首屏内容简化，推荐进阶，频道内嵌为内容推荐。在没有固定流量入口的情况下，每个业务都需要主动调整，包括运营策略、产品策略、设计方案、技术方案等。同时，各种场景下的推荐能力也需要不断提升。今年双十一将坑位扩充到1000+，理论上可以无限扩坑；通过智能UI提高用户点击率。图：手淘版vs商业变革：商业创新和新玩法层出不穷。包括迷你详情、旗舰店、价格表达、笔笔返利、芝麻狗等诸多业务，都是全新的表达方式和颠覆升级。即使是业务上的新尝试，也需要从技术上解决架构选择、对账、一致表达、调度等问题。做好本职工作首先要做好本职工作，确保需求发展和稳定。在需求研发方面，我们通过D2C实现了大部分UI模块的自动化开发，通过Eva交互系统的搭建降低了交互研发成本，通过Eva交互系统提升了研发运维效率。Serverless的集成研发，让前端不再成为资源瓶颈。在稳定性方面，也是通过一系列的机制和工具系统来保证的。同时，增加平时可能不太注意的资产流失防控策略和预案。D2C研发提效我们去年双十一专门设立了一个研发提效项目。核心是通过DesigntoCode（D2C）平台Imgcook提升研发效率。最终，78.94%的新模块代码在去年的双十一促销大会上自动生成，代码可用率达到79.34%。今年，前端智能化将助力前端研发模式升级。多个BU将联合构建前端设计稿识别算法模型和数据集，全面升级设计稿生成代码技术体系，如UI多态、视频直播组件、循环智能识别增强等。今年双十一会场承担了90.4%的新模块代码智能生成，代码可用率达到79.26%（相比去年升级的设计稿智能检测能力，可视化稿无需人工调整）。得益于D2C研发效率的提升，今年没有往年借资源投入场地开发的情况。与传统模组开发模式相比，采用设计稿生成代码技术后编码效率（模组复杂度与研发耗时之比）提升68%，固定人力单位时间模组需求吞吐量提升约1.5倍。图：D2C运营流程交互研发升级在电子商务领域，交互是重要的用户增长方案，对提高用户粘性、活跃度、吸引新用户具有重要作用。今年双11，淘喜互动团队推出了“超星秀猫”。我们不盖楼，不开汽车，大家都参与养猫。三款造型各异的萌猫一经问世，瞬间俘获了无数消费者的芳心。.通过EVA交互系统的整套解决方案，大大提高了研发效率，支持淘宝、猫客、支付宝等多个APP互通。借助客户端能力和EVA交互系统，很好的控制性能和内存，让大部分用户体验高清稳定的交互，实现零失败秒开，同时参与人数在星修贸上又创新高。后续系列文章将详细阐述淘客互动前端团队如何在双11期间快速、良好、稳定地进行交互，内容涵盖交互基础、EVA研发体系和全球稳定计划三个方面。图：交互效果图NodeFaaS集成研发serverless云+端研发模式将页面代码和服务代码集成进行集成研发，使得前端能够全面支持前端页面到后端服务，节省中间通信和联合调试费用。天猫榜和V榜的落地，让NodeFaaS相关业务在双11的整体研发效率提升了38.89%。双十一对行业导购的需求也支撑了云+端新模式下外包的快速进入，使得整体效率提升约20%。稳定性保障稳定性保障贯穿于项目启动到结束的整个双十一周期。下面从几个重点方面做一下简单介绍：变化考核：每年的双十一都是站在巨人的肩膀上，经历了最后一次双十一的考验。主要风险是新零件和改零件。这里的变化既包括技术变化，也包括人员变化。要充分评估变化，在第99次大促中加以验证，确保第99次大促后不做任何改动，以稳定的状态迎接双十一。压力测试：首先需要进行流量评估。根据去年的数据和今年的变化，准备相应的机器、带宽等资源。完成单线压测，保证自己的业务和上下游在预估流量模型下都能正常运行。进行全链路压测，核心验证0点高峰时并发服务的运行情况，特别是一些底层公共服务和优先级保障。Coverage&ContingencyPlan：覆盖一般是指在大流量或其他不可控因素的情况下，如何将用户体验和业务损失降到最低。该计划需要评估可能遇到的各种情况，以及相应的处理方案。验收：功能预演，根据所有用户的使用路径进行操作。目前，这项工作仍然是手工的。时间穿梭，将页面和系统的状态调整到活跃时间进行验证，需要打通上下游系统形成联动。机型验收基本上分为高端机、中端机、低端机，分别验收。很多商家需要针对低端机进行功能降级。稳定性验收，个别页面的性能和稳定性单独保证，但业务叠加后可能会出现问题，尤其是会场、互动、直播、旗舰店等大内存消费端，需要整体全链路验收。Change&Emergency：以往的故障数据表明，大部分问题都是由变更引起的，如何管控变更尤为重要。按时间分为弱控期和强控期；按业务层次分为集团核心应用、BU核心应用、非核心应用等；建立变更CR和审批机制。应急响应主要是指核心活动过程中问题、舆情、故障的流转机制，对发现问题、定位问题、修复问题的时间提出要求，对如何决策作出层层安排。监控：淘系前端持续建设升级监控能力。要保证促销高峰的可用性和实时告警，覆盖所有业务场景。对于越来越复杂的场景，需要端到端的监控和数据分析平台。灰度过程缺乏指标和定点监控。jstracker针对这些问题和需求，提供安全生产整体解决方案，搭建端到端的前端监控和数据分析平台，打造实时监控、多终端覆盖、数据分析、智能化数据平台。同时根据页面状态、错误日志、源站数据、FaaS日志等，制作了一个双十一的前端数据面板。资产流失防控前端资产流失防控一直是平台非常薄弱的??环节，前端引发的资产流失和舆论问题较多。以往都是靠发展学生的经验和意识来保证，缺乏系统的资产流失防控能力。去年我们开始组织团队层面的集中筛选和人工排练，耗费了大量的人力和时间，质量难以保证，积累和沉淀。因此，为了有一种成本更低、预防效果更好的资金流失防控方法，在2020年S1伊始，我们将着重设计和实施资金防御的相关产品。同时，今年还重点加大了商户和中后台运营的资金流失防控力度。我们把资金流失防控氛围分为三个阶段，研发阶段、运营阶段、运营阶段。在研发阶段，标记存在资金流失风险的仓库，列举常规价格、折扣、默认文案等案例，通过静态扫描和UI测试用例扫描进行防控。运营阶段主要是指商家和运营设置优惠和权益的阶段。通过统一表述方式（避免50折和0.5折造成理解差异）、二次确认、限定边界值、低价预警等方式进行防控。运行阶段有快照比对、服务端数据对账等方式。运营阶段防控相对滞后，大概率在发现时已经造成实际影响。但目前仍以预防为主，不能100%保证不会出现资金流失的故障。接下来我们还在构想链路层和生产环境的防控措施，建设一些告警和自动止血来保护平台。商业价值在做好本职工作的基础上，我们希望为商业带来增量价值。本章介绍四个方面，包括场馆性能优化改造、新基础链接方案推广改造、呼叫端技术定制策略提高精准度、智能UI为不同人群提供不经过UI的点击。性能提升场馆是每年双十一的主角之一，场馆的用户体验自然是每年最受关注的点。在越来越复杂的业务需求下，如何保证我们的用户体验不恶化，甚至不被优化，是一个永恒的命题。今年分别使用预渲染方案和SSR方案进行优化。首先，重新定义二次打开的标准，将时间从原来的前端时间升级为用户点击跳转可见页面的时间，并增加了客户端路由和webview。启动等时间，让体验的衡量更接近用户的真实体感。涵盖主会场、产业会场、对外招商会场等数十个场景。预渲染预渲染是今年双11场馆为了提升开场用户体验而采用的技术方案。在原有的H5页面渲染过程中，WebView初始化、页面资源加载、部分JS执行等耗时操作都是提前执行的，在离屏状态下完成页面“渲染”。当用户真正点击进入会场时，再利用提前“渲染”的页面，大大节省了开会的时间。用户开场时间整体平均缩短约200ms至700ms，二次开场率提升10%-14%。优化的绝对收益对中低端机更高，会议会场在低端机上已经实现秒级。让用户参观场地体验更顺畅，尤其是低端手机效果更明显。在后续的文章中，我们也会讲述包括预渲染、数据快照、并行请求在内的性能优化的实践和思考。图：中低端机型预渲染效果对比SSR今年在会场使用了ServerSideRendering技术，在不改变现有架构和业务的情况下，将秒开率提升到一个新的高度（82.6%）；在优化用户体验的同时，点击率等业务指标也大幅提升，带来了良好的商业价值。后续系列文章将详细介绍前端在解决工程和业务效果评估方面的具体实践和方法论；服务端在解决前端模块代码在服务端的执行、隔离和性能优化方面的思考和解决方案。图：中低端机型SSR效果对比图基础链接基础链接是电商的核心链接，包括首页、商品详情、微详情、交易（下单、下单、购物车、支付成功）、信息流、我的淘宝等基础业务。现有的技术方案是在手机淘宝中使用Native版本，追求极致的体验和稳定性；站外流量使用H5版本，支付宝等阿里巴巴应用，追求灵活性和易用性。随着支付宝容器化体系的完善和其他APP的内聚，新的基础链接容器化版本具备了孵化的土壤；同时，H5的资源在远端、Native能力使用受限等缺点也可以得到优化。借助之前的“NewUltron”和“DinamicX”方案（主要解决业务定制和Android、iOS、H5的三端一致性，实现一次开发，三端验证），容器化版本可以快速上线扩展实现四端一致性。性能数据方面，加载时间较H5版本提升了2秒，基本实现了秒开的目标；业务数据方面，容器化版本的UV转化率相比H5版本提升了70+%。目前已覆盖支付宝、特价版、优酷、高德、淘小铺、一淘等App，并通过百川SDK集成在众多外部媒体App中。在业务方面，还接入了天天抢购、大牌直销、淘宝特价、淘宝直播、百川传媒、优酷、小朴、清店、花呗等业务。随着流量高峰和卡联科技电商大战的进一步升级，如何做好用户增长是各大企业必须完成的命题。用户增长涉及方方面面。今年淘宝系统前端重点关注的是端调用技术，即由外部流量驱动的手机淘宝APP的技术体系。呼出技术门槛很低，简单到只需要拼一个类似URL的scheme就可以触发呼出。呼叫结束技术非常复杂。不同渠道、不同OS、不同APP可能存在对端协议的限制和各种兼容性问题；呼叫端链路中的不同服务可能有各自服务的业务定制需求，如参数透传等；呼叫端链路的效率是核心关注点。不同的场景，不同的业务，效率可能不同，所以也需要监控和比较通话结束效果。为了解决这些复杂的问题，我们对呼叫端技术进行了再次升级，构建了可定制的呼叫端策略，并创建了详细的呼叫端AB测试环节。从本次双11的效果来看，不同场景下的呼出效率（呼出成功率）提升了25-40%。图：CalloutStrategySmartUI随着移动互联网和推荐系统的发展，人与物的精准匹配大大提升了业务效率。越来越多的精细化方法正逐渐应用于个性化推荐领域，如场景化推荐、人群化投资技术等。同时，商品信息比以往更加丰富（买家秀、品牌背书、购物无忧服务等），不同的用户对内容的UI表达有着差异化的需求，因此通过寻找合适的针对不同人群的UI表达肯定会提升业务绩效。在项目初期，我们通过AB实验进行了直接的量化测试，明确了同一个UI方案在不同场景下会产生差异，不同的UI方案在同一个场景下也会产生差异。也就是说，针对不同的场景使用不同的方案是有意义的。2020年双十一大促首次大规模采用智能UI产品化方案，落地多个前端模块，包括猜你喜欢的模块、商品模块、店铺模块等，涵盖售前和双十一正式开幕。在销售阶段，它经受住了流量高峰的考验，带来了稳定的增长。覆盖300多个场馆，最高场馆PV点击率提升10%+。技术升级随着行业的技术演进和业务发展，相比去年我们在技术上也做了新的尝试和迭代升级，典型的包括FaaS的深度使用、PHA渐进式体验提升、应用边缘节点渲染等。FaaSServerless这块深海的冰，已经从深海逐渐支付到水面。阿里淘从去年的大促实践开始，逐渐将Serverless应用到前端领域的方方面面。今年的双十一，首先是覆盖场景。FaaS从淘宝行业扩展到场馆和营销业务，业务的复杂度得到了极大的丰富。容量进一步提升，支持的业务水平也从2kQPS提升到5WQPS。CPU水位较去年高QPS规模下降了约50%。在研发经验方面，构建解决方案体系、单元保障、大促管控、专家系统、功能盘点等能力，提升运维效率50%左右。在研发经验方面，打造解决方案体系，降低研发门槛，支持外包快速进入市场。PHAPHA的全称是ProgressiveHybridApp，是一个提升Hybrid体验的应用框架。提高页面加载速度和交互体验的渐进式Web应用程序。使用PHA开发的应用程序，在本质上并没有脱离前端开发和W3C标准，仍然具有原生应用程序的特点和体验。也许你已经想到了PWA，但是PHA比PWA有更强的UI能力和更快的加载速度。目前已在淘宝、特价版、Lazada、CBU等多个客户端上线，支持618、双11等多重促销。PHA联合客户端、前端团队、数据分析团队，跨界协作stacks，并且在性能优化的方向上也做了大量的优化工作，梳理了整个链路的性能，定义了新的性能口径（从用户点击到可视化），预加载，预渲染，加速等优化方法资源下载，使用离线资源。ESR目前的渲染节点主要在终端或者服务端，对应CSR（ClientSiderRendering）和SSR（ServerSideRendering），分别有适用场景和优缺点。现在借助阿里云的能力，可以把渲染转移到CDN节点，也就是我们要介绍的ESR（EdgeSideRendering），可以为前端提供渲染能力，也可以利用大量的CDN机器上的计算资源。阿里云推出了CDN轻量级编程环境——EdgeRoutine，为我们提供了一个新的尝试方向。我们可以在CDN节点上做预渲染。CDN的接入策略是寻找离用户最近的节点，就像快递的最后一公里一样，总会送到离客户最近的配送点。看来页面的网络调度时间是很有优化空间的。并且我们也可以利用CDN节点的资源共享特性，在CDN节点上缓存一些数据，减少远程数据请求。这种方案非常适合数据刷新率低，访问量大的页面。ESR结合CDN缓存能力非常合适。以天赋页面为例，首屏时间可提升约50%。现在ER技术刚刚起步，应用场景比较有限，能力上还存在很多不足，需要不断的构建系统。不过这项新技术为前端提供了更多的可能性，还需要我们继续探索和完善。双十一初体验PM双十一是电商年的核心节日，各方面的努力和资源投入都是最大的。作为参加过8次双11的老手，作为前端PM还是第一次，有很多不同的感受。复杂：首先在业务方面，有双11定制和独特的主会场、主互动、猫夜等，有导购、行业、营销、直播等几十个业务。优酷、本地生活、阿里妈妈、菜鸟等集团BU与商户、ISV、物流、媒体等协同合作，技术也很复杂，前端页面涵盖了从开发、建设、源站、CDN的所有环节，以及NodeFaaS容器、中间件、容量准备、流量分配、机房部署等。窥豹一斑，对整个系统的认知还需要进一步探索。流程：双十一是电商一年一度的考验，探索出了成熟的流程机制。包括人员构成、沟通机制、时间安排、组织保障等方面，都有非常细化的机制保障。协同：双十一是一个很好的节点，可以形成团队、岗位、BU之间的联动，集中力量进一步完善这样一个庞大的体系。多项技术升级突破在双十一上线并得到进一步推广。此次的预渲染方案是通过客户端与前端的紧密配合，在短时间内实现并验证的。多维度：看问题的角度可以是多维度的，从不同技术岗位的角度，全链路的角度，业务的角度。以变??更审批为例，之前比较关注变更的代码实现，对上下游的影响，对稳定性的影响，对业务的影响，是否引入新的风险，范围影响等需要综合衡量和做出判断通常需要权衡取舍，而不仅仅是技术上的1和0。招聘是最后也是最后，招聘岗位！淘宝前端由三个前端团队组成：淘宝前端、天猫前端、手机淘宝前端。业务方面负责淘宝和天猫的所有业务，例如：双11&双12促销，聚划算，天猫新品，有好货，淘宝直播等营销导购产品&短视频业务、业务拓展、用户增长、交互&游戏等，涵盖新零售领域最复杂多样的业务场景；技术上在前端工程、多端架构、Node架构、交互架构等基础系统方面有着深厚的积累。同时布局开发多媒体、前端智能、云手机等新兴系统。应用系统直接辅助业务。网址：https://fed.taobao.org/邮箱：taobao-fed-zhaopin@list.alibaba-inc.com职位：前端开发专家-杭州/北京，终端架构TL，前端技术专家（IDE方向），前端技术专家（Node.JS），交互技术专家，Web多媒体专家-杭州/广州，云手机解决方案架构师，中后端领域架构师，用户增长专家，资深交付专家技术、软硬件技术专家、开发或平台产品经理。
