阿里妹导读：双11如丝般顺滑的服务体验背后，是技术团队对性能优化不断地探索尝试、升级迭代。今年飞猪会场实现了主会场直出、重点会场秒开、整体会场体感优秀。飞猪前端技术太吾分享飞猪在前端性能优化上面临的挑战及优化方向，详解在端侧预渲染、SSR、SnapShot、SPA、资源和数据预缓存及监控和诊断上的优化细节。
文末福利：大数据领域顶级峰会FlinkForwardAsia精彩回顾。
没有最快，只有更快！在前端开发领域，性能是一个永恒的话题。它不仅仅代表着用户体验，更直接影响业务效果，业界就流传着一个共识：页面加载时长每增加1秒，用户就流失10%。与去年双11相比，今年飞猪会场的最大区别是从Rax0.6onWeex到Rax1.0onWeb。因为在上半年，基于开发成本、可维护性等一系列的考虑，我们将前端渲染引擎回归到WebView，页面打开在强网络环境和资源离线这两种情况下，虽然加载体感几乎一致，但Web首屏性能数据还有提升空间。且在Web端通用手段已用尽，需要重新探索优化方向。但项目组最终通过多职能协同，完成主会场直出、重点会场秒开、整体会场体感优秀。今年双11前端的目标之一就是，在性能方面，体感要超过Weex，数据也要超过Weex。一面临的挑战为Follow阿里集团的主推方案，使用Rax1.0统一DSL，一码多端支持H5、小程序和未来的Flutter，飞猪从大促开始，就将会场渲染侧全量切换到Rax1.0Web渲染，当时对于性能方面的优先级不是那么高。之后，性能优化专项重启，开始着手进行Web方面的优化研究，力争提升双11的用户体验。飞猪的会场模块复杂，包括视频、动画、多Tab、长列表；接口RT高，且服务端已无优化空间；旅行行业特点，页面依赖定位信息、用户信息，拖慢首屏时间。所以如何保证会场可以更快地呈现给用户是个严峻的考验。与此同时，双11项目组对性能方面提出一个近乎苛刻的目标：比日常会场性能提高25%。在前端优化手段日趋稳定的情况下，还要进行几百毫秒的优化，只能进入深水区。二优化方向面对这个目标，传统意义的前端方面优化已经不足以支撑，于是我们联合客户端、服务端以及其他BU同学，进行了一场协同战役。我们主要面向三个方向进行优化：一是，与客户端团队合作，进行预渲染、离线包、Data-Prefetch等手段的落地和优化。
二是，顺应Serverless大潮，重启营销域SSR方案，将原本端侧的压力转移到服务端上去完成。
三是，在兼顾数据的同时，兼顾用户的体感，做了两种Snapshot的方案（接口缓存、HTML缓存）以及SPA方案。
下图展示了所有会场所使用的优化手段：
所有会场所使用的优化手段主会场：为了保证主会场的最佳体验，使用客户端提供的终极大招——预渲染。
主要会场：对于首屏没有异步模块的场景，使用SSR配合Data-Prefetch，提升用户可见页面时间。
全部会场：因为模块基本没有变化，全部会场使用HTML缓存类型的Snapshot方案，用户可以更快浏览该页面。
底部重要会场：采用接口缓存类型的Snapshot方案，提升用户浏览体验。
所有会场均通过统一渲染页推送离线包和Data-Prefetch。
为保证分会场分别运营和页面之间切换的流畅性，底部Tab五页面之间使用类SPA方案，使页面切换起来无缝衔接。
整体优化思路分析从整个渲染流程分析触发，针对每个节点进行细致的分析优化：1技术实施详解：端侧预渲染如果不考虑可能带来的Crash风险，这应该是提升最大的方案了。在双11大促的场景下，通过端控制开关，将下发的配置URL以“离屏”的方式初始化好容器并loadUrl，在上屏之前完成页面的Rasterization（栅格化）。当用户点击页面入口时，客户端会直接将“准备好的Webview”推到前台展示，页面FCP从1~2s直接降到ms以下，形成几乎无感的打开效果。效果对比开启预渲染（左）未开启预渲染（右）方案流程图在客户端通过配置下发的方式初始化WebView，并通过内存管控保证APP的稳定性，同时在展示逻辑上和前端配合，保证数据的一致性，最终通过释放后续的一系列处理管理多次访问的情况。2技术实施详解：SSR（Server-siderenderorServerless-siderender）披荆斩棘的战士，带着荣光归来。SSR中文名：服务端渲染，是将渲染的工作放在服务端进行，在Ajax出现之前全部是这种方式，由服务端返回给浏览器完整的HTML内容。在传统BFF架构时期，这种方式逐渐消失。但借着Serverless大潮，当Faas遇上SSR，又迸发出新的火花。今年3月，狼叔在《前端新思路：组件即函数和ServerlessSSR实践》中，将SSR的概念升级，从传统意义上的Server-siderender升级为Serverlesssiderender，基于FaaS环境，提供端侧页面渲染能力。项目组通过两个月的调研和开发调试，在国庆大促一个会场预演，在双11的五个重点会场使用SSR，使机票会场性能提升50%，首屏可见时间减少0ms+。效果描述SSR代表首屏即可视，相比CSR减少模块加载以及页面渲染，将可视时间大幅提前。方案流程图整体方案保证性能优势以及改造成本小的前提，采取异步SSR方案，即将HTML放在接口中返回，在规避高低端机容器影响的同时，又可同时复用客户端的离线以及数据预加载能力，还保证CSR到SSR的平滑切换。3技术实施详解：SnapShot（页面快照）将用户体感页面可见时间继续提前。最初设计SnapShot是在非千人千面的场景下，多次访问，更快的可见页面。原理是将上一次访问的HTML直接缓存在本地，用户下一次进入页面时，首先展示缓存的页面。但后来发现，在双11会场这种几乎每天都会变阵的场景下，模块的删减以及顺序的调整，都会使得从“缓存页面”到“真实页面”的过程中发生不可避免的闪动，而这种闪动是难以接受的。于是我们重新设计出接口缓存的方式，配合模块缓存，实现与之前效果相同，但避免闪动的方案。同时，我们发现HTML缓存的方式也并非毫无用武之地。双11会场上线前，针对所有会场进行Review优化手段，发现在全部会场场景下，会场基本无变化，使用HTML缓存的方式简直再合适不过，于是我们将使用Snapshot的页面分为两类，达到所有页面都快且完美地呈现给用户。效果描述开启Snapshot后，整体页面无Loading，基本达到页面的直出效果。4技术实施详解：SPA完成用户体感的“最后一公里”，多页面间跳转实现无感知。各分会场需要进行分别运营，通过底部Tab包框将多页面聚合，展示成一个页面，通过点击Tab进行切换，但页面之间的跳转造成的割裂体感一直被诟病。本次升级完成了类SPA的方案，将Tab中的页面数据请求后，直接渲染成真实的Dom，切换通过Display的方式，基本在高端机上实现了将多页面聚合成单页面，多页面间跳转无感知，给予用户最好的体验。效果描述从多页面之前的replace操作，页面跳转中出现白屏，到目前页面中DOM的替换，用户体感大幅提升，也取消了用户点击Tab却跳页面割裂的感觉。方案流程图搭建页面框架共用一套渲染引擎，且每个页面的所有模块通过Fetch获取，每个模块独立发布，且支持模块拆