前言

先说说美团。

大部分人都用过美团外卖，客户要先下单付钱，商家才会接单，外卖骑士到店，最后外卖送达客户填写的地址。这个过程大众应该都是很熟悉了，我们可以把这个过程称之为履约服务。那整个履约过程发生的体验问题和性能问题对服务质量的影响都是很大的，比较隔壁还有饿了么竞争。谁要是拉垮了，客户分分钟转投另一家。

那么，我把这个栗子的冲突点说一说。

客户点击外卖商家，感知到了白屏。会咋样？
骑士收到接单通知，点进去页面白屏了一会儿，会咋样？
骑士给客户打电话，说2分钟后就到，可结果5分钟后才到。会咋样？客户是不是会觉得是骑士的时间观念有问题？可真的是外卖骑士的问题吗？

再说说最近的天猫618。

之前的文章里我提过，秒开率 这个性能指标就是阿里淘系前端团队提出来的。因为业务场景足够复杂，所以在性能方面有很深的造诣。618，小伙伴们应该在很多外部应用中看到过广告，知乎、微博、支付宝、抖音、各大广告平台都有618的广告运营位置，点击就能唤起你的天猫APP。那调起淘宝/天猫 App 时需要初始化一些组件，从而导致页面体验相对于端内 H5 较差的问题。

再说说阿里云吧。阿里云的诞生是个传奇，本文要提及的是阿里云的性能监控方案，也就是ARMS性能监控方案。它是一种通过页面打开速度对 Web 场景进行监控，以此来提升站点性能体验的方案。注意咯，这里的 Web 场景不仅仅是页面，也包含环境因素和交互因素。

开始正文。

美团是如何做的。

美团一般采用的是 Hybrid 开发模式，美团大前端团队通过：

EnhanceHybrid（增强混合方案）方案、
SSR
离线化技术

来进行性能优化。

SSR 和 离线化技术小伙伴们可以看看之前的文章。本篇不再过多叙述。

但 EnhanceHybrid 绝对是一大亮点，对首屏时间贡献占最大头，牛逼之处具有零白屏时间的称号（因为从理论上的确能做到零白屏时间）。

EnhanceHybrid 是一个视图切换的预加载方案。一下子没搞懂对伐？没事，我举个简单的栗子。

来看一段伪代码。


import renderPage from 'Native'
function PageA () {
   
  
   const onTouchStart = (e) => {
       // code...
   }
   
   const onTouchEnd = (e) => {
       // 先处理当前页面就能处理完的逻辑。
       
       // 步骤1 系统会隐藏式地开启一个新的 Webview 网页视图
       Native.renderPage(购物车);
       // 步骤2 开启加载的loading状态（可以是loading动画）
       loading = true；
       // 步骤3 挂起任务，等待预渲染完毕。
       Native.renderPage(购物车).end(()=>{
           Native.gotoPage(购物车);
       })
   }
   return <div>
       
           // 页面A的内容
           <div onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>购物车</div>
   </div>
}
复制代码