作者：魏扼(文射)、范磊(蓄能)

通过一系列优化，我们大盘GCP页面和Flash sale页面预热命中率提升到60%左右，主会场预热命中率接近70%。

容器预渲染：极致用户体验

为了进一步极致的提升用户体验，达到真正的直出效果，我们针对大促会场做了一个预渲染的前置动作，通过和首页模块的通信交互，容器端和前端的事件通信、上报屏蔽、流量控制等，提前预渲染会场页，在真正上屏的时候瞬开会场，此时整体会场自定义首屏时间就是趋于0。

优化前后录屏效果，请点击查看：

录屏中优化前的是去年双十二期间页面，优化后使用的是BDay期间的页面，页面结构有变化，但加载的资源量级相当，从录屏效果看，优化后的体验，无论是预热还是预渲染比优化前都有质的提升。

对于预渲染，我们已经在后台完成了页面的加载和渲染操作，理论上应该是只需要合成上屏即可，但是录屏中有看到白屏过程，通过视频分帧可以看到，进场动画的时候确实是白屏状态：

通过实验，对比其他页面(如) 命中预渲染的效果，发现它并没有白屏的过程。这中间的区别在于，会场页面上获取预渲染容器的同时，会发送一个上屏事件给前端，前端再去做一些软刷新等任务，这个软刷新任务会有业务js执行，导致阻塞了内核渲染流程，我们将上屏通知异步延迟后，中间白屏时间就少很多，录屏效果请点击查看：

在7.7大促期间对会场页面做测试，对比从点击到首屏的耗时，数据如下：

延迟上屏通知情况下的录屏耗时优化了12%，用户体感会有较大提升。

SSR：唤端性能提升利器

预热/预渲染可极致优化用户从首页进入会场的体验问题，但是线上还存20%-40%用户是通过唤端冷却直接进入到会场落地页，这种情况下，是没有足够时间来进行预热和预渲染的，所以提升唤端页面加载速度是一个亟需解决的问题。

从前端角度来分析，页面加载分为几个步骤：主文档加载、核心js加载、数据请求、页面渲染、上屏展示、图片请求展示，这几个步骤都是串行的，涉及到大量资源文件的网络传输和js解析执行。通过和前端同学讨论, SSR是一个潜在的优化方案，将数据在服务端就召回并解析渲染成静态HTML，那就只需要下载一个主文档就能进行上屏展示，加上图片请求展示，就只需要两轮数据交互，从客户端角度看，减少了3个数据交互环节，大大降低了数据传输量和连接请求次数。

SSR与非SSR对比视频，点击查看：

1、降低首屏资源数量和传输量级；

2、减少客户端解析执行业务js时间开销；

3、在客户端内采用MTOP方式请求，避开了安全保镖的问题和个性化推荐的问题。

在相同环境下(同手机、同页面、同App、同网络环境)进行测试，发现端内打开页面场景使用SSR能够优化15.2%的首屏时间，唤端场景使用SSR能够优化28.1%的首屏时间。具体测试数据如下:

一方面对齐集团的可交互首屏时间：前端完成渲染时间，部分业务域采用UC T2时间，优势是全部业务统一，缺点是非UC内核无法采集，一方面增加更接近用户体验的满屏首屏时间：首屏资源全部加载完成，包括js、css以及图片资源。

用户体感可量化——白屏检测

首屏时间可衡量大部分正常加载完页面的用户的体验，但还是有很多用户在首屏完成前就退出了页面，或者页面加载发生错误，这类case不能体现在首屏时间内。所以客户端增加了统一白屏检测能力，利用动态配置检查当前页面元素内容，用户离开页面时（包括切后台、退出、跳下一页），页面上是否真实存在内容监控用户可见的白屏状态。

预渲染和预热容器标准化

建立一套前端和客户端的标准对接协议，客户端通过配置平台按照配置，以及当前app内存水位加载对应的ROCKET容器，容器后台预加载主文档，业务资源，同时监控后台异常曝光等数据。前端对上报进行拦截，双端约定标准的渲染交互jsapi，以及上屏更新通知等，客户端负责统一的内存卡口和渲染时机。

经过一年时间的深度优化，在Android平台，2021 D11会场首屏时间比2020 D11提升50%，IOS首屏时间进入秒开时代；印尼机房真机录屏数据显示，预热场景下主会场首屏时间比竞品Shopee快1倍，非预热场景会场也比竞品Shopee快24.8%。

展望未来，我们将继续从机型系统，内存分配，以及Webview内核的特性等多维度最大粒度的利用性能优化容器，最小的影响app的运行稳定性，同时深度优化WebView内核里图片等资源的加载失败和耗时等一些列问题，打造一个稳定且极致体验的H5容器。

Lazada创立于2012年，在东南亚印度尼西亚、马来西亚、菲律宾、新加坡、泰国和越南六国拥有超过8000万活跃消费者，且拥有该地区竞争力优势明显的物流和支付网络。 作为阿里巴巴东南亚旗舰电商平台，在利用阿里巴巴先进成熟的产品技术快速提升海外本地电商能力并帮助阿里生态迅速发展海外业务的同时，我们基于阿里已有平台抽取出一套国际化的全链路系统，从无线手机端到交易链路，从商家业务到大数据和推荐，打造全新的端到端国际电商操作系统。

在这里你不仅有机会了解商品、交易、会员、营销等核心平台，而且有机会接受极具前瞻性的海外电商业务的挑战，并且需要针对多国场景进行业务抽象和平台剥离，任务的新颖性和挑战性都是前所未有的。我们在招的岗位包含产品、架构师、开发、测试、前端等多种机会，业务涉及电商端到端的所有环节，只要你自信，有能力、有激情，一定可以找到吸引自己的新挑战。加入Lazada，和我们一起激荡东南亚市场，共创国际化电商！

关注【阿里巴巴移动技术】微信公众号，每周 3 篇移动技术实践&干货给你思考！