如何监控网页的卡顿？
source link: https://qianduan.group/posts/5b41dbb29fd64d5a7458a904?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
要监控网页的卡顿，我们必须从 FPS 说起。
FPS 是来自视频或者游戏里的概念，即是每秒的帧数，代表视频或者游戏的流畅度，俗话说，就是“不卡”。
那在前端开发领域，网页的 FPS 是什么呢？
什么是网页的 FPS？
网页内容在不断变化之中，网页的 FPS 是只浏览器在渲染这些变化时的帧率。帧率越高，用户感觉网页越流畅，反之则会感觉卡顿。
在 Chrome 中 可以通过开发者工具查看网页的 FPS ：
注意，网页不是随时都需要，该工具看到的是每次更新是 FPS 值。
最优的帧率是 60，即16.5ms 左右渲染一次。
通过 Chrome 或者 Firfox 等的性能工具也可以查看浏览器的帧率：
绿色的直方图即代表在页面重新绘制时的帧率，Frames 为每一帧渲染所花的时间。
另外一种给出网页 FPS 的方式
FPS extension 是 Chrome 的一个扩展，可以显示当前网页的 FPS 值，即页面是否卡顿。
这种工具获取页面 FPS 的方式与浏览器自身给出的方式不同，没有采用浏览器原生的 API（ 正在制定 ），这类工具独辟蹊径，通过浏览器的 requestAnimationFrame API （可以使用 setInterval polyfill）来实现。
代码类似：
var lastTime = performance.now();
var frame = 0;
var lastFameTime = performance.now();
var loop = function(time) {
var now = performance.now();
var fs = (now - lastFameTime);
lastFameTime = now;
var fps = Math.round(1000/fs);
frame++;
if (now > 1000 + lastTime) {
var fps = Math.round( ( frame * 1000 ) / ( now - lastTime ) );
frame = 0;
lastTime = now;
};
window.requestAnimationFrame(loop);
}
代码摘自淘宝前端团队的 《无线性能优化：FPS 测试》 。
通俗地解释就是，通过 requestAnimationFrame API 来定时执行一些 JS 代码，如果浏览器卡顿，无法很好地保证渲染的频率，1s 中 frame 无法达到 60 帧，即可间接地反映浏览器的渲染帧率。关于 requestAnimationFrame API 的细节，可以参看 MDN 上的文档 。
如何监控网页的卡顿？
首先为什么要监控？比如在 全民直播 ，我们必须重视用户在观看视频的体验，任何网页或者播放器的卡顿都会让用户抓狂。所以必须监控起来，以此来指导优化。
最后，回到本文的主题，如何监控网页的卡顿呢？
以全民直播的方式为例，使用 FPS extension 类似的方式，每秒中计算一次网页的 FPS 值，获得一列数据：
...6,8,11,29,60,58,46,57,57,57,44,59,51,54,0,31,58,56,41,52,51,17,22, 34,51,48,26,26,49,59,59,59,59,52,52,0,45,58,60,59,60,21...
然后通过通用的日志通道上报到大数据平台进行分析即可。
那如何通过 FPS 确定网页存在卡顿呢？按照我们对卡顿的观察， 连续出现3个低于20的 FPS 即可认为网页存在卡顿。
function isBlocking(fpsList, below, last) {
var count = 0
for(var i = 0; i < fpsList.length; i++) {
if (fpsList[i] && fpsList[i] < below) {
count++;
} else {
count = 0
}
if (count >= last) {
return true
}
}
return false
}
当然这只是一种经验，但可以作为相对的度量。
通过这种方式，我们得到了网页卡顿的统计数据：
接下来，就可以针对卡顿的问题，在有数据支持的情况下进行优化我们的网页了！
0
Recommend
-
32
OpenWebMonitor - 监控网页内容变化，3 种模式，支持代理 - NEXT
-
55
-
35
XXPerformanceMonitor是一个Swift版轻量卡顿监控工具，支持主线程和子线程，一句代码即可轻松集成，开源在蜗牛的Github，可以结合代码来阅读本文。 曾几何时跟项目大佬有过这样的对话 大佬：最近有用户反馈用起来卡卡的，不太流畅，有找到原
-
19
背景 使用Flutter技术构建的应用，一直以高性能高流畅度著称。但是随着应用复杂度越来越高，Flutter会出现一些页面流畅度明显低于Native的情况，甚至可能发生一些卡顿...
-
15
改善页面性能 - 如何监控卡顿和响应延迟背景为了提供给前端者监控页面性能的能力，W3C 定义了一系列相关 API，在这里统称为 Performance API。目前使用较多的应该是 PerformanceTiming，但是除了该 API，新的 W3C 草案及 WICG 提案定...
-
4
自制家酿网页监控 02 Jan 2015 在革命时期的解放区，物资武器都十分匮乏，战士们往往只能相互借着枪支来训练，但革命的雄心岂是这样就能阻挠，机智的战士们建立了一个装备资源系统，集中管理分配，让大伙都能打上自己喜欢的枪。...
-
8
卡顿 & ANR 在各 APP 中都是非常影响用户体验的问题，关于其的分析和治理一直也是个老生常谈的话题。过去调查卡顿 & ANR 问题主要依赖上报的堆栈和 traceInfo 文件，通过这些信息还原问题的现场情况。但是在实践过程中发现，现有监控机制下堆栈的抓取时...
-
7
本文主要介绍Heimdallr对卡死、卡顿异常的监控原理，并结合长时间的业务沉淀发现的问题进行不断迭代和优化，逐步实现全面、稳定、可靠的历程。 作者：字节跳动终端技术——白昆仑 卡死、卡顿作为...
-
2
这两天看着 iPhone 要上市了，赶着做了个网页，调用苹果官网接口，实时获取苹果直营店iPhone 14 Pro系列库存情况。想着这几个月应该还有点用，分享出来大家使用。这几天会尽量频繁更新，增加更多更直观方便的查询...
-
3
前端性能优化--卡顿的监控和定位 By
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK