文章主要记录学习web性能优化方面的内容。

百度、阿里、美团性能对比

百度

根据用户的反馈和QA专项测试发现问题，定义性能指标，然后将数据上报给平台。
性能指标主要以FCP、FMP、卡顿率为主

  • FCP( First Contentful Paint)。表示浏览器内核首次绘制来自DOM的内容，意义类似白屏，侧重点在于第一个字符开始绘制时间
  • 卡顿率。出现页面卡顿问题
  • FMP(First Meaning Paint)。首次有效绘制，标记主角元素渲染完成的时间点，主角元素可以是视频网站的视频控件，内容网站的页面框架也可以是资源网站的头图等。

https://segmentfault.com/a/1190000017040216(FP,FCP,FMP区别)
NativeApp和H5都会根据各自的埋点SDK进行上报，上报平台根据数据指标，给出均值，绘制性能报表。然后分析不合理的地方，复现问题进行优化。优化完成，通过AB测试得出性能指标，评估体验提升。优化是需要长期来进行的，通过一点一点优化，逐渐达成目标。
手机百度前端主要的问题集中在

  1. webview初始化耗时过长，会占到500ms
  2. Hybrid初始化大概100ms，指唤起App时候，Native对协议中传入参数的解析和对模板头部body解析
  3. 正文的加载和渲染

优化思路是：Webview初始化优化，串行逻辑并行，渲染速度提升。借助CloudHybrid和webview预创建
借助CloudHybrid方案，采用SSR+预加载+拦截请求。

阿里

整体优化思路基本都相似，设定性能指标， 搭建性能平台、数据上报、监控数据、发现问题，AB对比。

阿里云ARMS性能监控方案

通过页面打开速度对Web场景进行监控。https://www.aliyun.com/product/arms
性能指标监控方案定义了一个性能指数Apdex，用来表示性能体验等级标准。计算公式为Apdex=（满意数+可容忍数 / 2）/ 总样本量。
ARMS 性能监控方案里计算白屏时间也是遍历DOM，通过mutationObserver监听页面的变化，遍历新增的元素计算总和，元素可见1分，不可见0分。

双11优化

问题主要集中在

  • 负责的网络环境下，低端安卓机环境下的问题-数据预加载解决
  • 活动营销页面，二次访问率低，会导致缓存数据过期导致重复渲染和页面元素跳动-SSR解决
  • 外部H5唤起App需要初始化一些组件，页面体验相对端内会差一些-缓存解决

SSR需要有对应的降级方案，可以降级到CSR

美团

会对首屏时间，白屏时间，页面加载完成时间，流畅度检测，也会对秒开率检测，性能平台上会有一些分位值，TP50、TP90、TP99等。
美团采用的是Hybrid开发模式，通过EnhanceHybrid（增强混合方案）方案、SSR 和离线化技术来进行性能优化
https://juejin.cn/post/6979868383026085895

EnhanceHybrid

简单来讲，就是在进入下一个页面时候，先渲染好下一个页面，然后再展示出来。比如点击了跳转按钮，新页面没有加载出来时候就暂时在该页面等待，隐藏创建一个webview，展示等待动画，渲染完成再展示出来。第一个页面等待时间过长可以采用离线化来解决。

业务产出和技术产出的平衡

一般来讲复杂的业务后端遇到会多一点，前端会少，每天大部分时间处于业务开发中，也许好不容易有了自己的时间来去思考，可是没有方法论，不知道如何来去提升质量和效率，最后加班来消化业务需求，多年下来感觉自己没有什么成长。

时间不足

时间不足是因为效率低还是人手不足？

  • 人手不足。如果团队内P0需求(做了有收益，不做有损失的称为P0需求)有积压，需要补足人员。同时人员后端和前端比例应该是2:1，即两个后端搭配一个前端。还有一个运营+产品和前后端研发人数 3:1 的比例。
  • 效率低，针对开发中的某一些环节来进行提升，比如Mock数据等，如果提测质量不高导致延期，就需要冒烟测试和提升代码质量等

    方法论

    除了自己本职的业务之外，埋头苦干是不够的，还需要学习一些方法论去实践。在提测修改bug期间等可以利用这段时间，做一些脚手架建设，基础组件，提升性能等。
    前端职业有两点很重要，一点是提升效率和质量，另外一点是解决业务中的痛点，比如通过性能优化带来了多少价值等，需要对业务全貌有足够的理解。
    利他性，在帮助别人实现价值的过程中，也实现了自己的价值。比如业务转化率不够，那我们就想办法去提升。对自己始终保持高要求