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

朱雀 2022-12-25 15:56 162阅读 0赞

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

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

# 优化方法论 #

![1ed5e00493165e779a6cf86067e179db.png][]

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

# 加载性能度量 #

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

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

而我们要做的就是记录这些过程的耗时： 现代浏览器提供了 `performance` 对像供我们方便地提取这些数据。而且[兼容性][Link 1]在这。其中 `timing` 对象详细记录每个节点的时间戳。 ![0c94d65e1429cb097d8269548c9ea733.png][]

将相关时间节点相减就能得到相应过程的耗时。 作为开发，我们通常更关注从服务器读取的时间，所以取 `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…][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] ###

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

![756bfc2bb5e4d3e26ce286ce2ec2f147.png][]

![ffb7918c4fd2973dcb4d202fb38e8c1c.png][]

![81e96b576886b2c4f465125c77614c2a.png][]

## [**点击这里免费领取题目+解析PDF。**][PDF] ##

[1ed5e00493165e779a6cf86067e179db.png]: /images/20221120/9eea201306db42caabc99bd7d5ed7d93.png
[Link 1]: https://www.caniuse.com/?search=performance
[0c94d65e1429cb097d8269548c9ea733.png]: /images/20221120/30935be95036410c87db54b9797c3673.png
[github.com_GoogleChrom]: https://github.com/GoogleChromeLabs/tti-polyfill
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[756bfc2bb5e4d3e26ce286ce2ec2f147.png]: /images/20221120/0ead88bc80be48bf8ed394772b71e6e0.png
[ffb7918c4fd2973dcb4d202fb38e8c1c.png]: /images/20221120/314994ba146b4588b1c69fa33dc7dda8.png
[81e96b576886b2c4f465125c77614c2a.png]: /images/20221120/6be6596abaf34a8bb777ef6e28c4ab89.png