共计 7649 个字符，预计需要花费 20 分钟才能阅读完成。
往年双十一整体节奏从之前的“光棍节”到往年的“双节棍”，具体业务上也有很多变动和调整，应了阿里的土话“惟一不变的是变动”。面对这些变动，是挑战也是机会，咱们要做的就是，“既要”高效撑持保障业务先赢，“又要”确保体验和稳定性带给用户极致体验，“还要”谋求翻新让前端继续演进。为了实现“既要、又要、还要”，包含技术计划、流程机制、人员组织等各方面都进行了大量的设计和保障。最终第一次双峰的双十一圆满结束，淘系前端也实现了本人的指标，包含利用大量优化伎俩和翻新计划带来业务转化晋升；将 FaaS、PHA、ESR 等技术利用在更多场景，别离向服务端、客户端、CDN 节点进一步拓展了前端的能力和边界；利用视觉还原、一体化研发等晋升研发效率，大幅缓解资源瓶颈等等。上面会整体介绍一下淘系前端在往年双 11 的思考和积淀，心愿对大家有所助益。后续也会有各个专项的系列文章，心愿大家继续关注。
（更多干货内容可关注【淘系技术】公众号）
变动 & 挑战
往年的双十一，首先感触到的就是源源不断的变动。
单峰变双峰：双十一从之前的一个波段变成往年的两个波段，大促的三个阶段预售、预热、正式也都对应的翻倍。首先带来的是研发工作量的大幅减少，在工夫排期不变、工作量减少、人员不变的状况高效的实现需要研发是第一重挑战；其次面对 6 个阶段的状态变动，如何放弃精确切换、稳固运行、体验晦涩是在双峰期间要重点保障的内容；最初面对超过 20 天的超长作战期，平安生产、人员状态放弃、快速反应都须要有强力的组织和机制进行保障。
图：双十一节奏
首页大改版：最新的淘宝首页首屏内容有颠覆性的变动，比方首屏内容简化，举荐提前，频道作为内容嵌入举荐等。各个业务在短少固定的流量入口的状况下，包含经营策略、产品策略、设计方案、技术计划都须要踊跃调整。同时在各个场景的举荐能力也须要继续加强，往年双十一通过将坑位数扩大到 1000+，实践可达有限扩坑；通过智能 UI 晋升用户点击率。
图：手淘版本比照
业务变动：业务翻新和新玩法层出不穷，包含 mini 详情、旗舰店、价格表白、笔笔返、芝麻购等在内的很多业务都是全新的表白、颠覆式的降级。即是业务上新的尝试，在技术上也要解决架构选型、对账、一致性表白、排期等问题。
做好本职
首先要做的就是做好本职工作，保障需要研发和稳定性。需要研发方面，咱们通过 D2C 实现了大部分 UI 模块主动开发、通过建设 Eva 互动体系升高互动研发老本、通过 Serverless 的一体化研发晋升研发和运维效率，使前端不再成为资源瓶颈。稳定性上，也通过一系列机制和工具体系进行保障。同时减少一块大家平时可能不太关注的资损防控的策略和计划。
D2C 研发提效
去年双十一咱们设立了研发效率专项，外围就是通过 设计稿生成代码 (Design to Code, D2C) 平台 Imgcook 来晋升研发效率。最终在去年的双十一大促会中承接了 78.94% 的新增模块代码主动生成，代码可用率达到 79.34%。
往年前端智能化助力前端研发模式降级，数个 BU 共建前端设计稿辨认算法模型和数据集，设计稿生成代码技术体系全面降级，如对 UI 多态、直播视频组件、循环的智能辨认加强等。往年双十一会场承接了 90.4% 的新模块代码智能生成，代码可用率达到 79.26%（比照去年降级设计稿智能查看能力，视觉稿无需人工辅助调整）。得益于 D2C 的研发提效，往年并没有呈现今年借调资源投入会场开发的状况。相比传统模块开发模式，应用设计稿生成代码技术后编码效率（模块复杂度和研发耗时比值）晋升 68%，固定人力单位工夫模块需要吞吐量减少约 1.5 倍。
图：D2C 操作流程
互动研发降级
在电商畛域，互动是一个重要的用户增长计划，在晋升用户黏性、沉闷以及拉新上都施展着重要的作用。往年双 11，淘系互动团队推出了“超级星秀猫”，咱们不盖楼、不开车，全民参加养猫出道，3 只风格各异的萌猫咪一经问世，霎时俘获了有数消费者的心。通过 EVA 互动体系一整套解决方案，大幅晋升研发效率，撑持全民养猫猫在手淘、猫客、支付宝等多个 APP 互通。借助客户端能力及 EVA 互动体系将性能与内存良好管制，让少数用户体验高清稳固的互动，实现 0 故障及秒开，同时星秀猫参加人数再创新高。后续的系列文章将具体论述淘系互动前端团队是如何做到双 11 互动又快又好又稳，内容涵盖互动根底、EVA 研发体系和全局稳定性计划 3 个方面。
图：互动效果图
Node FaaS 一体研发
Serverless 云 + 端研发模式通过买通页面代码和服务代码进行一体研发，使得前端能够从前台页面到后端服务残缺撑持，节俭两头沟通和联调老本。在天猫榜单以及 V 榜的落地，使得双 11 Node FaaS 相干业务整体研发效率晋升 38.89%。行业导购双十一需要也在云 + 端的新模式下撑持外包疾速入场，使得整体提效约 20%。
稳定性保障
稳定性保障贯通从我的项目启动到完结的整个双十一周期，上面从几个重点方面进行简略的介绍：
变动评估：每年的双十一都是站在伟人的肩膀上，都通过了上一次双十一的考验。次要的危险就变成新增的局部以及变动的局部，这里的变动既包含技术上的变动也蕴含人员上的变动。要做到对变动的充沛评估，在 99 大促成行验证，并且保障 99 大促后不再进行变动，以一个稳固的状态迎接双十一。
压测：首先要进行流量评估，借鉴去年数据的同时联合往年的变动，进行相应的机器、带宽等资源筹备。实现单线路压测，保障在预估流量模型下，本人的服务和上下游都可能运行失常。进行全链路压测，外围验证在 0 点顶峰时各业务并发的状况的运行状况，尤其是一些底层公共服务，以及优先级的保障状况。
兜底 & 预案：兜底个别指在大流量或其余不可控因素的状况下，如何将用户体验和业务损失升高到最小。预案须要评估可能遇到的各种状况，以及对应的解决计划。
验收：性能预演，依照用户的所有应用门路进行操作，目前这个工作仍是人工。工夫穿梭，将页面和零碎的状态都调整为流动工夫来验证，须要买通上下游的各个系统并造成联动。机型验收，根本分为高端机、中端机、低端机，别离进行验收，很多业务都须要针对低端机做性能降级。稳定性验收，独自页面的性能和稳定性各自保障，但业务叠加后很可能存在问题，尤其像会场、互动、直播、旗舰店等内存耗费小户，相互之间都有引流，切换后很难保障，须要整体全链路验收。
变更 & 应急：历次的故障数据表明，大部分的问题都是因为变更导致的，如何做好变更管控尤为重要。依据工夫分为弱管控、强管控期；依据业务等级分为团体外围利用、BU 外围利用、非核心利用等；建设变更的 CR 和审批的机制。应急次要指在外围流动期间，问题、舆情、故障等流转机制，针对问题发现、定位问题、修复问题工夫作出要求，不同等级如何决策作出安顿。
监控：淘系前端继续进行监控能力的建设和降级。须要保障大促顶峰的可用性以及报警的实时性，笼罩所有的业务场景。针对越来越简单的场景，须要端到端的监控和数据分析平台。灰度过程短少度量和定点监控。依据这些问题和需要，jstracker 提供了平安生产的整体解决方案，打造端到端的前端监控与数据分析平台，打造实时监控、多端笼罩、数据分析、智能化的数据平台。同时依据页面状况、谬误日志、源站数据、FaaS 日志等打造了双十一的前端数据大盘。
资损防控
始终以来前端资损防控是平台十分单薄的一环，前端触发的资损和舆情问题不在少数。之前全靠开发同学的教训和意识来保障，短少体系化的资损防控能力。去年开始组织了团队层面的集中筛查和人工预演，对人力和工夫的耗费十分微小，并且很难保证质量并进行积攒和积淀。所以为了能有一种老本更低、预防成果更好的形式进行资损防控，2020 年 S1 伊始，就重点对资防做相干产品化的设计和实现。同时往年也重点减少了商家、经营中后盾侧的资损防控。
咱们将资损防控气氛了三个阶段，研发阶段、操作阶段、运行阶段。研发阶段给存在资损危险的仓库打标，将惯例的价格、优惠、默认文案等 case 进行枚举，通过动态扫描、UI 测试用例扫描等形式进行防控。操作阶段，次要是指商家、经营进行优惠、权利等设置的阶段，通过表达方式对立（防止 5 折、0.5 折造成了解差别）、二次确认、限定边界值、高价预警等进行防控。运行阶段有快照比照、服务端数据对账等形式，运行阶段的防控绝对滞后，发现时很大概率曾经造成理论的影响。
然而，目前仍是预防为主，不能百分之百保障没有资损故障产生，接下来咱们还在构思链路级别的、生产环境上的防控伎俩，建设一些告警和主动止血为平台保驾护航。
业务价值
做好本职的根底上，咱们心愿给业务带来增量价值。本章从会场性能优化晋升转化、根底链路新计划晋升转化、唤端技术定制策略晋升精准率、智能 UI 为不同人群提供不通过 UI 晋升点击等 4 个方面来介绍。
性能晋升
会场是每年双十一的配角之一，会场的用户体验天然也是每年最关注的点。在日趋简单的业务需要下，如何保障咱们的用户体验不劣化甚至能更优化是永恒的命题。往年别离应用了预渲染计划和 SSR 计划进行优化，首先是从新定义了秒开的规范，从原来的前端工夫降级到从用户点击通过跳转到页面可视的工夫，减少了客户端路由、webview 启动等工夫，使体验的掂量更贴近用户实在的体感。笼罩了包含主会场、行业会场、外投会场等数十个场景。
预渲染
预渲染是在往年双 11 会场中应用的技术计划，用于晋升用户关上会场的体验。将原有 H5 页面渲染流程中的 WebView 的初始化、页面资源加载、局部 JS 的执行等耗时的操作，提前执行，在离屏状态下实现页面“渲染”。当用户真正点击进入会场的时候，复用这个提前“渲染”的页面，大大节俭关上会场的工夫。用户关上会场的整体均匀耗时缩短了 200ms~700ms 左右，秒开率晋升 10%-14%。优化对中低端机相对收益更高，已实现在低端机上实现秒开会场。让用户逛会场体验更晦涩了，尤其中低端手机成果更加显著。在后续的文章也会讲述包含预渲染、数据快照、并行申请等性能优化方面的实际与思考。
图：中低端机型预渲染成果比照图
SSR
往年在不扭转现有架构，不扭转业务的前提下，在会场上应用了 ServerSideRendering 技术，将秒开率进步到了新的高度（82.6%）；在用户体验失去优化的同时，业务指标如点击率等也有显著的增长，带来了不错的业务价值。后续的系列文章汇中会具体介绍前端在解决工程化、业务成果评估上的具体实际与方法论；服务端在解决前端模块代码于服务端执行、隔离和性能优化上的思考和计划。
图：中低端机型 SSR 成果比照图
根底链路
根底链路是电商外围的链路，蕴含首页、商品详情、微详情、交易（下单、订单、购物车、领取胜利）、信息流、我的淘宝等根底业务。现有的技术计划是手淘内应用 Native 版本，谋求极致的体验和稳定性；站外流量、包含支付宝在内的阿里系 App 应用 H5 版本，谋求灵活性和可用性。随着支付宝容器化体系的欠缺，在其余 App 中的内聚，根底链路新的容器化版本具备了孵化的土壤；同时 H5 的一些弊病，比方资源都在远端、Native 能力应用限度等也能够失去优化。
借助之前的“新奥创”和“DinamicX”计划（次要解决业务定制以及安卓、iOS、H5 的三端统一，实现一处开发、三端失效），容器化版本得以疾速扩大，实现四端统一。性能数据上，加载工夫比照 H5 版本有 2s 的晋升，根本达成秒开的指标；业务数据上，容器化版本比照 H5 版本 UV 转化率晋升 70+%。
目前已笼罩支付宝、特价版、优酷、高德、淘小铺、一淘等 App，以及通过百川 SDK 集成在泛滥内部媒体 App。业务上也接入了每日必抢、大牌直降、淘宝特价、淘宝直播、百川媒体、优酷、小铺、轻店、花呗等业务。
唤端技术
随着流量见顶、电商大战进一步降级，如何做好用户增长是各大公司必须实现的命题。用户增长波及的面十分宽泛，往年淘系前端聚焦在唤端技术，即内部流量拉起手淘 App 的技术体系。唤端技术的门槛很低，简略到只须要拼一个相似 URL 的 scheme 就能够触发唤端。唤端技术又很简单，不同的渠道、不同的 OS、不同的 App 都有可能针对唤端协定有限度，并有各种各样的兼容性问题；唤端链路中不同业务可能都有本人的业务定制需要，例如参数的透传；唤端链路的效率更是被关注的外围点，不同场景不同业务在效率上可能都不一样，因而还须要对唤端成果进行监测和比照。为了解决这些简单的问题，咱们在唤端技术上进行了又一次降级，建设了可定制的唤端策略，打造了具体的唤端 AB 测试链路。从本次双 11 的成果看，不同场景下的唤端效率（唤端成功率）绝对晋升了 25~40% 不等。
图：唤端策略图
智能 UI
随着挪动互联网和举荐零碎的倒退，人和商品的精准匹配为业务带来了效率的大幅晋升。越来越多的精细化伎俩逐步利用于个性化举荐畛域，比方场景化举荐、人群定投技术等。同时商品的信息比以往任何时候都要丰盛（买家秀，品牌背书，无忧购服务等），不同的用户对于内容的 UI 表白有着差异化的诉求，因而通过为不同人群找到适合的 UI 表白肯定能带来业务成果的晋升。
我的项目的最晚期，咱们通过 AB 试验间接定量测试，明确了雷同的 UI 计划在不同的场景会产生差别，不同的 UI 计划在雷同场景下也会产生差别。也就是说，针对不同场景应用不同计划是有意义的。2020 年双十一大促咱们第一次大规模采纳智能 UI 产品化计划落地了多个前端模块，包含猜你喜爱模块、商品模块、店铺模块等，笼罩了双十一的预售和正式开卖阶段，接受了流量洪峰的考验，且带来了稳固的增长。笼罩 300 多个会场，最高的会场 PV 点击率绝对晋升 10%+。
技术升级
随同业界的技术演进和业务的倒退，咱们在技术上相比去年也有了新的尝试和迭代降级，其中典型的包含 FaaS 的深度应用、PHA 渐进式的体验加强、边缘节点渲染的利用等。
FaaS
Serverless，一块深水的坚冰，逐渐从深海付出了水面，阿里淘系从去年在大促实际开始，逐步将 Serverless 利用到前端畛域方方面面。往年双十一首先是在笼罩场景方面，FaaS 从淘宝行业拓展到会场和营销业务，业务的复杂度失去极大的丰盛。能力进一步晋升，撑持的业务量级也从 2k QPS 晋升到 5W QPS，CPU 水位从去年的高 QPS 规模时，精力破费升高约 50%。在研发体验方面，打造解决方案体系，单元保障、大促管控、专家系统、函数盘点等能力，运维提效约 50%。在研发体验方面，打造解决方案体系，升高研发门槛，反对外包疾速入场。
PHA
PHA 全称 Progressive Hybrid App，是晋升 Hybrid 体验的一种利用框架。晋升页面加载速度和交互体验的渐进式 Web 利用，应用 PHA 开发的利用实质上没有脱离前端开发和 W3C 规范，但仍然领有原生利用的个性和体验。或者你有想到 PWA，但 PHA 有比 PWA 更强的 UI 能力和更快的加载速度。目前曾经在手淘、特价版、Lazada、CBU 等多个客户端落地，反对了 618、双 11 等多个大促。PHA 联结客户端、前端团队、数据分析团队，跨栈协同，在性能优化方向上也做了很多优化工作，梳理全链路性能埋点、定义新的性能口径（从用户点击到可视），应用了预加载、预渲染、资源减速下载、离线资源等优化伎俩。
ESR
当初的渲染节点次要是在终端或是服务端，对应 CSR（Client Sider Rendering）和 SSR（Server Side Rendering），别离有实用的场景以及劣势和弊病。当初借助阿里云的能力可将渲染转移到 CDN 节点，也就是咱们要介绍的 ESR（Edge Side Rendering），即能为前端提供渲染能力，同时也能将大量 CDN 机器上的计算资源利用起来。
阿里云推出了 CDN 轻量编程环境——EdgeRoutine，这为咱们提供了一个新的尝试方向。咱们能够在 CDN 节点去做提前渲染的事件。CDN 的拜访策略是会去寻找离用户最近的节点，就像快递运输的最初一公里一样，总会派送到离客户最近的分拨点。这么看来页面的网络调度时长是十分有优化空间的。并且咱们还能够利用 CDN 节点资源共享的个性，将局部数据缓存到 CDN 节点上，缩小近程的数据申请。
这套计划对于数据刷新率不高、访问量极大的页面，ESR 搭配 CDN 的缓存能力是非常适合用的。以达人页为例，首屏工夫约能晋升 50% 左右。当初 ER 的技术才刚刚起步，利用场景比拟局限，能力上还有很多有余，体系也须要一直地建设，但这个新技术为前端提供了更多可能，须要咱们不停的去摸索和欠缺。
双十一 PM 初体验
双十一作为电商年度最外围的节日，各方面投入的力度和资源都是最大的。作为加入过 8 次双 11 的老兵，作为前端 PM 是第一次，有很多不一样的感触。
简单：首先是业务上，有双十肯定制和特有的主会场、主互动、猫晚等，还有淘系外部自身就有导购、行业、营销、直播等数十个业务，同时联动支付宝、优酷、本地生存、阿里妈妈、菜鸟等多个团体 BU，与商家、ISV、物流、媒体等的协同和单干。技术上同样简单，前端的页面从开发、搭建、源站、CDN 的全副链路，以及 Node FaaS 的容器、中间件、容量筹备、流量调配、机房部署等。管中窥豹，对于整个体系的认知还须要更进一步的摸索。
流程：双十一作为电商业务每年的大考，曾经摸索出一套成熟的流程机制。包含人员的组成、沟通机制、工夫排期、组织保障等各个方面都有很粗疏的机制进行保障。
协同：双十一是十分好的节点，能够让各团队、各岗位、各 BU 之间造成联动，集中力量将如此宏大的体系进一步欠缺。很多技术的降级和冲破都是在双十一落地并进一步推广的。这次预渲染的计划就是客户端和前端严密协同，在很短的工夫内实现并验证的。
多维：看问题的视角能够更多维，不同技术岗位视角，全链路视角，业务的视角。以一次变更的审批为例，之前更多关注变更的代码实现上，对上下游的影响、对稳定性的影响、对业务的影响、是否引入新的危险、影响的范畴等等都须要进行综合掂量，做一个判断往往须要从中进行取舍，而不单单是技术上的 1 和 0。
招兵买马
最初的最初，招聘贴！
淘系前端由淘宝前端、天猫前端、手淘前端三大前端团队交融而成，在业务上负责淘宝、天猫的所有业务，如：双 11& 双 12 大促、聚划算、天猫新品、有好货等营销导购产品、淘宝直播 & 短视频业务、商业千牛以及开发、用户增长、互动 & 游戏等等，囊括了新批发域下最简单、最多状态的业务场景；在技术上在前端工程、多端架构、Node 架构、互动架构等根底体系上有着深厚的积淀，同时在多媒体、前端智能化、云手机等新兴体系上布局 & 倒退，在搭建 & 投放、小程序凋谢、工作台等利用体系上间接助力业务。
网址：https://fed.taobao.org/
邮箱：taobao-fed-zhaopin@list.alibaba-inc.com
职位：前端开发专家 - 杭州 / 北京、端架构 TL、前端技术专家（IDE 方向）、前端技术专家（Node.JS）、互动技术专家、Web 多媒体领域专家 - 杭州 / 广州、云手机解决方案架构师、中后盾畛域架构师、用户增长领域专家、投放技术高级专家、软硬件技术专家、开发者平台产品经理。