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. SQL 日期格式化与格式转化

    日期格式化 Select CONVERT(varchar(), GETDATE(), ): :57AM Select CONVERT(varchar(), GETDATE(), ): // Selec ...

  2. js 柯里化、深拷贝、浅拷贝

    curry const sum = (a, b, c, d) => a + b + c + d const curry = fn => (judge = (...args) => a ...

  3. Hibernate4教程二:基本配置(2)

    <hibernate-mapping>元素 这个元素是xxx.hbm.xml配置的根元素,定义如下: java代码: <hibernate-mapping schema=" ...

  4. smbspool - 将一个打印文件发送到一台SMB打印机

    总览 SYNOPSIS smbspool {job} {user} {title} {copies} {options} [filename] 描述 DESCRIPTION 此程序是Samba(7)套 ...

  5. 三 Bash Shell 结构

    Bash Shell 程序结构主要有 : 变量设定  内置命令 Shell 语法结构 函数 其他命令行程序构成 例子: [root@localhost ~]# vim test.sh #!/bin/b ...

  6. 线程安全与非线程安全集合说一下,底层怎么实现的(hashmap,concurrenthashmap)

    Hashmap本质是数组加链表.根据key取得hash值,然后计算出数组下标,如果多个key对应到同一个下标,就用链表串起来,新插入的在前面. ConcurrentHashMap:在hashMap的基 ...

  7. 25.Java锁的深度化

    Java锁的深度化 悲观锁.乐观锁.排他锁 场景 当多个请求同时操作数据库时,首先将订单状态改为已支付,在金额加上200,在同时并发场景查询条件下,会造成重复通知. SQL: Update 悲观锁与乐 ...

  8. Docker安装RMQ

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11752934.html 进入rabbitmq的docker hub镜像仓库地址:https://hub ...

  9. VUE中使用canvas做签名功能,兼容IE

    <template>         <div>           <div class="msgInput">             &l ...

  10. vue-葵花宝典

    router-view 中包含 router-view 这种情况就可以 使用嵌套路由了 变化的视图中包含变化的视图 代码层面 router-view 中 包含router-view 路由childre ...