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

近年来东南亚数字经济继续倒退，Lazada 在买家和商家数量上持续放弃了强劲的持续增长态势。2020 年的 11.11 有超过 4000 万个消费者、超过 40 万的商家和品牌来到 Lazada 平台，往年 11.11 当天有 超过 80 万品牌和商家参加 ，Lazada 越南首小时同比去年销售额翻番 ，Lazada 新加坡首小时销售额较素日增长 10 倍！

一连串业务数据爆涨的背地，是流量的快速增长，容器作为 H5 业务的承载，也服务了越来越多 H5 业务：会场、Flash sale，Lazmall、钱包等等，因而，H5 页面的用户体验受到更大的挑战。

在过来一年里，Lazada 容器团队深耕 H5 容器优化，在面对线上弱网用户占比高，低端机型散布广等状况下，咱们采纳预渲染计划针对性优化了大促会场页面，独创性使用预热计划优化日常 GCP 页面和 ICMS 页面，同时对页面数据进行预取，动态资源提前缓存等计划，对头部 H5 页面流量业务进行深度优化，最终晋升 H5 业务的用户体验及业务转化。

问题剖析

2020 D11 大促当日，会场录屏首屏工夫 9383ms，用户体验非常蹩脚，大部分用户无法忍受而间接退出页面，导致流量散失重大。

先剖析咱们关上会场页面的残缺链路，包含如下阶段：

整个流程工作沉重，网络开销大，导致页面渲染被拉到十分晚，首屏工夫长也就不奇怪了。

再分析线上用户的网络和用户机型的散布状况，如下图所示：

从上图能够看到线上大盘用户挪动网络占比高，低端机型占比大，特地是印尼用户，挪动网络稳定性状况更差，低端机型占比突出。那么针对低端机型以及弱网用户的优化成为咱们重点攻坚方向。

优化计划

监控体系建设

工欲善其事必先利其器，线上用户间隔咱们十分边远，他们的真实情况是怎么的，咱们很难体验到。那么只能从监控着手，对页面加载的各环节进行埋点上报，从具体的数据来掂量用户实在体验状况。对此，咱们将 H5 页面的加载环节进行了划分，具体参考如下：

包含路由、容器创立、页面加载、页面渲染、用户退出等环节，对每个环节进行埋点，将页面加载状态，工夫点、本环节耗时等信息上报到 DP2 和 UT，并建设实时监控：

路由和容器初始化监控

页面加载监控

首屏工夫监控

容器预热：空间换工夫

会场页面由 GCP 平台搭建进去的，剖析发现每个页面都会执行雷同的 js，每个页面只有大量的业务 js 执行和渲染，通过探讨和验证，把公共的根底 js 形象进去，和业务 js 隔离，在用户关上页背后就将这些资源提前加载到 webview 中，一方面缩小用户点击后页面须要加载的资源，一方面提前对公共 js、css 进行了解析和预处理。

预热计划上线后，首屏工夫降到 2s 内，BDay 预热命中率 36%，通过埋点剖析，发现预热文档加载存在以下问题：

1. 应用预热容器时, 预热工作未启动, 次要是唤端场景；
2. 预热未实现，预热耗时较长均匀耗时 5000+ms，或者预热失败；
3. 应用预热容器时, 预热工作启动, 然而前端没有回调预热实现, 而过程存在保活机制, 一旦第一次没有回调, 预热 webview 可能始终不会被应用, 也不会重启预热工作, 除非重启过程；
4. 命中了预热容器, 前端未回调首屏, 导致不会再次创立新的预热容器, 下次启动页面无奈命中；
5. 未匹配预热规定。

预热工夫提前

针对预热文档加载耗时的问题，咱们把预热机会提前到首页可交互后，尽可能早地开启预热页面的加载，同时咱们将主文档资源通过 ZCache 提前缓存到本地，缩小网络传输。

预热重试机制

预热启动机会在首页可交互，预热实现后，前端会告诉客户端预热实现事件，用户关上一个 Web 页面时，会判断是否预热实现，实现了才会去应用。这两头可能就会存在预热失败的状况导致客户端没有收到预热实现的告诉。另外在关上一个 Web 页面实现上屏之后，前端会回调一个首屏告诉，此时会触发预热一个新的 WebView，通过数据分析，发现局部用户没有收到首屏告诉，导致下一次关上页面无奈命中预热。

针对上述情况，咱们提出了预热重试机制来晋升预热的命中率。次要是两种预热重试的场景, 第一种是首页闲时预热重试; 第二种是关上页面后预热重试，定义超时工夫，默认为 10s，超时工夫到了之后会查看是否实现预热，没有实现预热则会触发一次新的预热，最多重试次数为 3 次。具体流程如下图：

预热链接匹配

通过分析线上数据，发现某些 GCP 页面预热命中率为 0，起因是命中预热须要匹配 Web 页面的链接与预热的主文档链接，须要 Web 页面链接的 host 和 path 与预热主文档的 host 和 path 要完全一致，然而因为种种原因，线上会存在 host 和 path 与预热主文档的不一样，导致无奈命中预热。针对这种状况，通过 Orange 配置下发正则匹配规定，页面链接只有匹配上了规定就能够应用预热容器，而不只是匹配繁多的预热主文档链接，同时配置对立整合了 GCP 页面和 ICMS 页面。

匹配规定示例：

prehot_regex={"id":[{"url":"https://pages.lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.id/wow/gcp/route/lazada/id/upr_1000345_lazada/channel/id/upr-router/id_upr"}],"my":[{"url":"https://pages.lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.my/wow/gcp/route/lazada/my/upr_1000345_lazada/channel/my/upr-router/my"}],"sg":[{"url":"https://pages.lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.sg/wow/gcp/route/lazada/sg/upr_1000345_lazada/channel/sg/upr-router/sg"}],"ph":[{"url":"https://pages.lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.com.ph/wow/gcp/route/lazada/ph/upr_1000345_lazada/channel/ph/upr-router/render"}],"th":[{"url":"https://pages.lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.co.th/wow/gcp/route/lazada/th/upr_1000345_lazada/channel/th/upr-router/th"}],"vn":[{"url":"https://pages.lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn?lzd_open_type=pre_hot&at_iframe=1","type":"gcp","prehot_regex":"^https://((pages)|(www)|(pre-wormhole)).lazada.vn/wow/gcp/route/lazada/vn/upr_1000345_lazada/channel/vn/upr-router/vn"}]}

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

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

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

优化前后录屏成果，请点击查看：Lazada 容器深度优化之旅

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

对于预渲染，咱们曾经在后盾实现了页面的加载和渲染操作，实践上应该是只须要合成上屏即可，然而录屏中有看到白屏过程，通过视频分帧能够看到，进场动画的时候的确是白屏状态：

通过试验，比照其余页面(如 https://www.baidu.com) 命中预渲染的成果，发现它并没有白屏的过程。这两头的区别在于，会场页面上获取预渲染容器的同时，会发送一个上屏事件给前端，前端再去做一些软刷新等工作，这个软刷新工作会有业务 js 执行，导致阻塞了内核渲染流程，咱们将上屏告诉异步提早后，两头白屏工夫就少很多，录屏成果请点击查看：Lazada 容器深度优化之旅

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

提早上屏告诉状况下的录屏耗时优化了 12%，用户体感会有较大晋升。

SSR：唤端性能晋升利器

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

从前端角度来剖析，页面加载分为几个步骤：主文档加载、外围 js 加载、数据申请、页面渲染、上屏展现、图片申请展现，这几个步骤都是串行的，波及到大量资源文件的网络传输和 js 解析执行。通过和前端同学探讨, SSR 是一个潜在的优化计划，将数据在服务端就召回并解析渲染成动态 HTML，那就只须要下载一个主文档就能进行上屏展现，加上图片申请展现，就只须要两轮数据交互，从客户端角度看，缩小了 3 个数据交互环节，大大降低了数据传输量和连贯申请次数。

会场 SSR 计划

SSR 与非 SSR 比照视频，点击查看：Lazada 容器深度优化之旅

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 容器。

咱们招聘啦！

简历投至形式：haofei.yu@lazada.com

Lazada 创建于 2012 年，在东南亚印度尼西亚、马来西亚、菲律宾、新加坡、泰国和越南 六国领有超过 8000 万沉闷消费者，且领有该地区竞争力劣势显著的物流和领取网络。 作为阿里巴巴东南亚旗舰电商平台，在利用阿里巴巴先进成熟的产品技术疾速晋升海内本地电商能力并帮忙阿里生态迅速倒退海内业务的同时，咱们基于阿里已有平台抽取出一套国际化的全链路零碎，从无线手机端到交易链路，从商家业务到大数据和举荐，打造全新的端到端国内电商操作系统。

在这里你不仅有机会理解商品、交易、会员、营销等外围平台，而且有机会承受极具前瞻性的海内电商业务的挑战，并且须要针对多国场景进行业务形象和平台剥离，工作的新颖性和挑战性都是前所未有的。咱们在招的岗位蕴含产品、架构师、开发、测试、前端等多种机会，业务波及电商端到端的所有环节，只有你自信，有能力、有激情，肯定能够找到吸引本人的新挑战。退出 Lazada，和咱们一起激荡东南亚市场，共创国际化电商！

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