1、chrome的debug

2、PerformanceObserver

var observer = new PerformanceObserver(function (list) {
var perfEntries = list.getEntries();
for (var i = 0; i < perfEntries.length; i++) {
console.log("frame: ", perfEntries[i]);
}
}); // subscribe to Frame Timing
observer.observe({ entryTypes: ['frame'] });

  可是浏览器都不支持。。。。

3、requestAnimationFrame模拟

var rAF = function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
}(); var frame = 0;
var allFrameCount = 0;
var lastTime = Date.now();
var lastFameTime = Date.now(); var loop = function () {
var now = Date.now();
var fs = (now - lastFameTime);
var fps = Math.round(1000 / fs); lastFameTime = now;
// 不置 0,在动画的开头及结尾记录此值的差值算出 FPS
allFrameCount++;
frame++; if (now > 1000 + lastTime) {
var fps = Math.round((frame * 1000) / (now - lastTime));
console.log(`${new Date()} 1S内 FPS:`, fps);
frame = 0;
lastTime = now;
}; rAF(loop);
} loop();

  

  

如果我们需要统计某个特定动画过程的帧率,只需要在动画开始和结尾两处分别记录 allFrameCount 这个数值大小,再除以中间消耗的时间,也可以得出特定动画过程的 FPS 值。

值得注意的是,这个方法计算的结果和真实的帧率肯定是存在误差的,因为它是将每两次主线程执行 javascript 的时间间隔当成一帧,而非上面说的主线程加合成线程所消耗的时间为一帧。但是对于现阶段而言,算是一种可取的方法。

动画FPS计算的更多相关文章

  1. 帧率(FPS)计算的六种方法总结

    原文地址:http://blog.csdn.net/u012494876/article/details/53368164 帧率(FPS)计算是游戏编程中常见的一个话题.大体来说,总共有如下六种方法: ...

  2. FPS计算New

    using UnityEngine; using System.Collections; public class CarGUI : MonoBehaviour { private const flo ...

  3. 引擎设计跟踪(九.14.2b) 骨骼动画基本完成

    首先贴一个介绍max的sdk和骨骼动画的文章, 虽然很早的文章, 但是很有用, 感谢前辈们的贡献: 3Ds MAX骨骼动画导出插件编写 1.Dual Quaternion 关于Dual Quatern ...

  4. Android窗口管理服务WindowManagerService显示窗口动画的原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8611754 在前一文中,我们分析了Activi ...

  5. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  6. 虾扯蛋:Android View动画 Animation不完全解析

    本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...

  7. React-Native 动画优化

    前言 动画对于客户端来说是非常重要的一部分,直接影响到应用的用户体验.前端对于动画优化通常使用CSS3样式来实现动画,以利用GPU加速特性.而React-Native由于渲染模式的不同,无法使用CSS ...

  8. css3实现循环执行动画,且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  9. Android Animation(动画)

    前言 Android 平台提供实现动画的解决方案(三种) 一.3.0以前,android支持两种动画: (1)Frame Animation:顺序播放事先做好的图像,与gif图片原理类似,是一种逐帧动 ...

随机推荐

  1. BUUCTF--刮开有奖

    文件链接:https://buuoj.cn/files/abe6e2152471e1e1cbd9e5c0cae95d29/8f80610b-8701-4c7f-ad60-63861a558a5b.ex ...

  2. 无法删除VMware旧版本,请与技术小组联系

    问题:把文件夹清理了n遍,却无法重装VMware,报错如标题. 原因:相关注册表没删完. 解决办法: - 1.创建一个.txt文本 - 2.将下面的内容复制到.txt文本中: echo off cls ...

  3. 2019-1-25-WPF-ListBox-的选择

    title author date CreateTime categories WPF ListBox 的选择 lindexi 2019-01-25 21:43:17 +0800 2018-2-13 ...

  4. JetbrainsCrack-4.2-release-enc.jar 激活补丁包

    http://wangshuo.jb51.net:81/201904/tools/JetbrainsCrack_jb51.rar ps:这里提供jetbrainscrack-2.10.jar.jetb ...

  5. ssh 操作 esxi 基本命令

    1.查看虚拟机: vim-cmd vmsvc/getallvms 会显示当前esxi上的虚拟机数量,没一个都有编号. 2.停用虚拟机:vim-cmd vmsvc/power.suspend + 之前命 ...

  6. Linux的运行级别和设置开机启动服务的方式

    Linux的运行级别 什么是运行级别呢?简单点来说,运行级别就是操作系统当前正在运行的功能级别.级别是从0到6,具有不同的功能.这些级别定义在/ect/inittab文件中.这个文件是init程序寻找 ...

  7. 商城分类导航实现 (css)

    代码实例:demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. SQL执行顺序和coalesce以及case when的用法

    1.mysql的执行顺序 from on join where group by having select distinct union   //UNION 操作符用于合并两个或多个 SELECT ...

  9. C#高级编程笔记(17至21章节)线程/任务

    17 Visual Studio 2013 控制台用Ctrl+F5可以显示窗口,不用加Console.ReadLine(); F5用于断点调式 程式应该使用发布,因为发布的程序在发布时会进行优化, 2 ...

  10. Linux用户登出之后保持后台进程(nohup)

    使用&可以将进程置于后台,但是用户从Shell登出之后,进程会自动结束.想要在登出之后保持进程运行,就要结合nohup命令使用. 例如: nohup find -size +100k > ...