关于前端:如何系统地进行前端性能优化监控篇

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

想要优化就必须得有度量。有了监控能力主观、系统地进行剖析性能瓶颈、验证优化后果等。所以咱们先从如何残缺地监控开始

优化方法论

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

加载性能度量

加载性能就是用户从进入到页面到页面真正可用的这个过程的耗时。咱们能够用一道经典的面试题动手：用户从键入 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。