如何系统地进行前端性能优化【监控篇】

性能优化是前端领域一个亘古不变的热点话题。本系列文章将分监控、加载性能优化和运行时性能优化三章从实践角度来作具体分享

想要优化就必须得有度量。有了监控才能客观、系统地进行分析性能瓶颈、验证优化结果等。因此咱们先从如何完整地监控开始

优化方法论

前端性能又分为加载性能和运行时性能

加载性能度量

加载性能就是用户从进入到页面到页面真正可用的这个过程的耗时。咱们能够用一道经典的面试题入手：用户从键入url按下回车以后到看到页面这其中发生了什么？

• DNS解析：把域名解析成ip地址
• TCP链接创建
• 发送http请求
• 服务器解析http请求并返回结果
• 浏览器解析返回结果

而咱们要作的就是记录这些过程的耗时： 现代浏览器提供了 performance 对像供咱们方便地提取这些数据。并且兼容性在这。其中 timing 对象详细记录每一个节点的时间戳。

将相关时间节点相减就能获得相应过程的耗时。 做为开发，咱们一般更关注从服务器读取的时间，因此取 fetchStart 为起点。 下面是一些经常使用的时间计算：

const { fetchStart, domainLookupStart, domainLookupEnd, domInteractive, domContentLoadedEventStart } = performance.timing

// DNS查找时间
domainLookupEnd - domainLookupStart

// 白屏时间
domInteractive - fetchStart

// 首屏时间
domContentLoadedEventStart - fetchStart
复制代码

以上计算时间更多用于SSR渲染，而现在前端现状还有至关部分是SPA结构，由JS渲染在客户端。为了更好地知足监控指标与用户体验的契合。Google 提出 FP  / FCP / FMP / TTI 等指标帮助咱们统计相关数据，咱们经常使用下面两条

FCP(First Contentful Paint) 首次绘制任何文本，图像，非空白canvas或SVG的时间点。就是用户第一次看到有意义的内容的时间。一般能够看成这个时间为白屏时长。获取API

window.performance.getEntriesByType('paint')

TTI(Time To Intercative) 可交互(可用时间), 用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点。咱们一般用这个值做为页面的首屏时间。浏览器并无直接提供api去获取。可是google提供 github.com/GoogleChrom… 去获取。

运行时性能度量

大部分业务并不须要运行时的监控。可是一些重业务场景，好比说文本编辑器、线上课堂、画板。顿卡对用户体验的伤害巨大，也是用户更没法接受的。对于这类业务，咱们开发测试场景能够用 chrome 的 perfermance 工具去测试、检测、定位性能顿卡。可是咱们仍然须要用户测的监控来掌握业务线上实际运行状况。 requestAnimationFrame 一般用来实现动画。可是这里咱们也能够用来做为帧率的监控。大概简单思路以下：

const everyFrameCostTime = []
let timestamp = Date.now()
function detect() {
  const now = Date.now()
  const cost = now - timestamp
  timestamp = now
    everyFrameCostTime.push(cost)
  requestAnimationFrame(detect)
}

当cost 连续几回 高于一个 特意阈值，就能够视为页面顿卡了。这里能够视具体业务场景而定。

这种也有局限性，因为幸存者误差，当页面卡死不动，监控代码自己也不起做用的。

数据发送

数据发送方式

经常使用作法一般用向服务器发送一个img请求，而后将数据拼接成url参数一并发送过去。现代浏览器更提供了 navigator.sendBeacon(url, data) 方法来发送数据。在unload场景甚至不会阻塞下个页面的加载。为了保证基础库的健壮和不影响自己页面性能。咱们要作好聚合和节流。

数据发送策略和存储

当用户基数过大，或者统计不须要那么多数据量，能够对数据发送作随机控制，来决定本次是否发送数据。或者将埋点数据加密存在本地，须要时在由用户主动向开发者发送，用来排查问题和减小数据服务器压力

最后

说个题外话，我在一线互联网企业工做十余年里，指导过很多同行后辈。帮助不少人获得了学习和成长。

我意识到有不少经验和知识值得分享给你们，也能够经过咱们的能力和经验解答你们在IT学习中的不少困惑，因此在工做繁忙的状况下仍是坚持各类整理和分享。

我能够将最近整理的前端面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，但愿你们都能找到心仪的工做。

有须要的朋友点击这里免费领取题目+解析PDF。

篇幅有限，仅展现部分截图：

点击这里免费领取题目+解析PDF。