要监控网页的卡顿,我们必须从FPS说起!

作者: 贤媒 分类: 随心杂谈 发布时间: 2021-05-02 09:02

要监视网页的停顿,我们必须从FPS开始。

FPS是视频或游戏的概念,即每秒的帧数,代表视频或游戏的流畅度。俗话说浏览淘宝网页卡顿,意思是“不卡住”。

在前端开发领域,什么是网页的FPS?

什么是网页的FPS?

网页的内容在不断变化。呈现这些更改时,网页的FPS只是浏览器的帧速率。帧速率越高,用户感觉网页越平滑,否则会感觉卡住。

在Chrome中,您可以通过开发者工具查看网页的FPS:

Screen Shot 2018-07-08 at 9.31.06 PM.3edc09e644f6.png

浏览淘宝网页卡顿_手机浏览网页卡顿_为什么浏览淘宝网页很卡

请注意,并非始终需要网页。该工具看到的是每次更新的FPS值。

最佳帧频为60,即每5ms渲染一次1 6.。

您还可以通过性能工具(例如Chrome或Firfox)检查浏览器的帧频:

Screen Shot 2018-07-08 at 9.50.08 PM.1c961c8bd7e4.png

绿色直方图表示页面重绘时的帧频,而“帧数”是呈现每个帧所花费的时间。

手机浏览网页卡顿_浏览淘宝网页卡顿_为什么浏览淘宝网页很卡

提供网页FPS的另一种方法

FPS扩展程序是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测试”。

一个流行的解释是,某些JS代码是通过requestAnimationFrame API定期执行的。如果浏览器死机,则无法保证渲染频率。帧不能在1秒内达到60帧,这可以间接反映浏览器的呈现。帧率。有关requestAnimationFrame API的详细信息,请参阅MDN上的文档。

如何监视网页冻结?

为什么我们首先要监视?例如,在全民直播中浏览淘宝网页卡顿,必须注意用户观看视频的体验。任何网页或播放器卡纸都会使用户发疯。因此,必须对其进行监视以指导优化。

最后,回到本文的主题,如何监视网页冻结?

以国家现场直播方法为例,使用与FPS扩展类似的方法,每秒计算一次网页的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中?根据我们对口吃的观察,三个连续的FPS低于20可以认为是网页上的口吃。

为什么浏览淘宝网页很卡_手机浏览网页卡顿_浏览淘宝网页卡顿

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
}

当然,这只是一种体验,但是它可以用作相对度量。

通过这种方式,我们可以获得网页冻结的统计信息:

a.61d8fb124a76.png

接下来,我们可以通过数据支持来优化我们的网页,以解决滞后问题!

服务推荐

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!