前言

先说说美团。

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

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

客户点击外卖商家，感知到了白屏。会咋样？
骑士收到接单通知，点进去页面白屏了一会儿，会咋样？
骑士给客户打电话，说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>
}

稍微看一丢丢你就能明白，其实这就是用户点击了跳转按钮，在新页面还未渲染完毕的情况下先暂时等待。等新页面预渲染完毕，那客户端就会通知h5进行页面视图的更新。这个时候，你会发现不会再有资源请求和渲染DOM而耗费时间导致白屏。

所以，这个方案解决了3个问题。

原页面（PageA）等待时间长。
无法在跳转 新页面（PageB） 之前完成新页面的加载和渲染；
无法获取 新页面（PageB） 的渲染进度；

所以，当你还在想着如何优化当前页面的资源请求和渲染时间时，别人已经在大气层等着你了。

那美团如何做到该从哪入手解决问题的？

美团在前端性能优化方面，会对：

首屏时间
白屏时间
页面加载完成时间
流畅度进行检测
秒开率

进行监测。 你是不是要问在哪监测，如何监测？宝，当然是得先有个 性能平台 啊！关于如何搭建性能平台，可以看看之前的文章。这里不多做叙述。

阿里时如何做的

开篇已经提到了 ARMS 性能监控方案。

ARMS 性能监控方案定义了性能指数 Apdex，用来表示性能体验等级标准，其计算公式为:

Apdex = f(T)

其中T为白屏时间，默认取值2s。所以，带入公式：

Apdex =（满意数+可容忍数 / 2）/ 总样本量

公式中满意数为 0～T，可容忍数为 T～4T，不满意为 > 4T。

其它性能指标：

首屏时间
秒开率
白屏时间
可交互时间
domReady 时间
Load 时间
……

讲讲ARMS的计算逻辑吧。

mutationObserver 监听页面元素的变化
执行深度优先遍历算法。
- 子元素可见，则父元素可见，不需要重复计算。
- 最后一个元素可见，则前兄弟元素可见，不需要过多计算。
遍历每次新增的元素，计算元素得分总和。元素可见得分+1，否则 +0 。

噢，这是为了提升采集脚本的性能。 You see see you，哪里往深了都需要算法😂😂😂

那 ARMS 如何接入？

CDN 接入。具体可看官方帮助文档

<script>
!(function(c,b,d,a){
c[a]||(c[a] = {});
c[a].config ={ 
pid:"你的pid", 
appType : undefined, 
imgUrl : "https://arms-retcode.aliyuncs.com/r.png?", 
uid: "你的用户标识"
};
with(b)
with(body)
with(insertBefore(createElement("script"),firstChild))
setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

npm 包

npm install alife-logger --save

我们最后再回头聊聊618活动会场。其中性能问题，主要集中在以下几个方面：

低端 Android 机在复杂网络环境下的问题
端外h5唤起APP，导致端内h5性能较差
会场营销活动页面，因为二次访问率低，由 缓存数据过期导致的重复渲染和页面元素跳动问题。

小结一下

阿里云在性能指标采集和 SSR 方案实现方面要前沿一些。因为经历得足够多了……

美团 EnhanceHybrid 方案，靠低成本解决了性能问题。

还有就是，这篇文章大概是我写性能优化相关最后一篇文了。

最后的最后总结一下性能优化：

搭建性能平台
- 确立性能指标
- 计算公式
- 场景预设
- 性能指标数据分析
针对性能平台的反馈信息，制定足够详细的性能优化方案。

（祝，妹纸面试官安好。）

分析一下阿里美团是如何做性能优化的

前言

美团是如何做的。

阿里时如何做的

小结一下