测量四个类似Javascript函数之间的CPU负载差异

时间：2016-06-25 02:06:34

标签： javascript performance settimeout setinterval requestanimationframe

为什么这对我很重要

我有一个网站，我需要运行一个倒计时器来向人们展示他们完成一个动作所需的时间。

此计时器将运行数天，可能只是使用MomentJS来说出MomentJS的to()函数中的“4天内”。

然而，当我们还剩一个小时的时候，我将按分钟计时器切换到倒计时，最终当分钟变得足够低时，我将会涉及秒计时器。当我们进入最后几分钟时，我甚至会显示毫秒数。

问题

几乎有两种主要技巧可以为倒数计时器设置动画。

  • setInterval()
  • requestAnimationFrame()

嗯，我立刻注意到requestAnimationFrame()方法对眼睛更加平滑，效果很好 - 尤其是当我显示毫秒时。然而，当我注意到我可怜的电脑开始变得温暖时，不久。所有这些“动画”都会给我的CPU造成很大负担。我尝试使用CPU监视器，并查看了看看我的CPU有多少负载的方法，但总的来说，我找不到一个工具，可以让我清楚地了解我的小倒计时器是什么样的CPU负载。使用

所以，我决定找到一种限制 FPS的方法，看看是否会减少我的问题。是的，确实如此。如果您与setTimeout()一起使用requestAnimationFrame()，则可以在拨打下一个功能之前设置等待时间。

提出问题，如果您使用的是setTimeout() - 为什么不使用setInterval()并忘记requestAnimationFrame()为您提供的额外优化？

我做了一些环顾四周，找到了另一种方法，它只是检查自上次requestAnimationFrame()调用你的函数以来是否已经过了正确的间隔时间。我对这段代码的工作方式进行了一些优化，最后得到了我试图在下面测量的两个函数之一。

最后，我真的希望有一个更清晰的方法来衡量这一点 - 因为我的mac上的活动监视器不是提供准确读数的可靠工具 - 我找不到一种方法来衡量我正在运行的代码。

Chrome还有更多工具，分析器和时间轴 - 这两者都非常有用，但它们没有给我我正在寻找的指标 - CPU负载。

代码：

以下是四个代码片段，它们完全相同 - 所有这些代码片段都使用：

  • MomentJS
  • CountdownJS
  • 的jQuery

代码是100％相同，唯一的区别是我如何限制动画的FPS。

我想找到一种方法来测量（尽可能精确地）测量四种功能之间的差异，即它们承受的CPU负载量。然后我想改变FPS，看看我是否可以为我的应用程序找到可接受的负载，然后我可以在不同的计时器阶段找到最佳点 - 适量的FPS。

技术1 - setTimeout（） 

var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);

$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));

(function timerLoop() {
  setTimeout(function(){
    $(".difference").text(moment().to(then));
    $(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
    requestAnimationFrame(timerLoop);
  }, 1000/30);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
  The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>

技术2 - 间隔之间的差异 

var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);

$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));

var fps = 30;
var interval = 1000/fps;
var performanceTime = performance.now();
var performanceDelta;

(function updateCountdown(time) {
  performanceDelta = time - performanceTime;
  if (performanceDelta > interval) {
    performanceTime = time - (performanceDelta % interval);
    $(".difference").text(moment().to(then));
    $(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
  }
  requestAnimationFrame(updateCountdown);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
  The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>

技术3 - setInterval（） 

var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);

$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));

var fps = 30;
var interval = 1000/fps;

setInterval(function updateCountdown() {
    $(".difference").text(moment().to(then));
    $(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
}, interval);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
  The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>

看到像这样的完全未受限制的版本也很有趣：

技术4 - 无油门 

var now = moment(); // new Date().getTime();
var then = moment().add(60, 'seconds'); // new Date(now + 60 * 1000);

$(".now").text(moment(now).format('h:mm:ss a'));
$(".then").text(moment(then).format('h:mm:ss a'));
$(".duration").text(moment(now).to(then));
(function timerLoop() {
  $(".difference").text(moment().to(then));
  $(".countdown").text(countdown(then, null, countdown.YEARS | countdown.MONTHS | countdown.DAYS | countdown.HOURS | countdown.MINUTES | countdown.SECONDS | countdown.MILLISECONDS).toString());
  requestAnimationFrame(timerLoop);
})();

// CountdownJS: http://countdownjs.org/
// MomentJS: http://momentjs.com/
// jQuery: https://jquery.com/
// Rawgit: http://rawgit.com/
// Light reading about the requestAnimationFrame pattern:
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
// https://css-tricks.com/using-requestanimationframe/
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mckamey/countdownjs/master/countdown.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" type="text/javascript"></script>
<div>
  The time is now: <span class="now"></span>, a timer will go off <span class="duration"></span> at <span class="then"></span>
</div>
<div>The timer is set to go off <span class="difference"></span></div>
<div class="countdown"></div>

简单地说：如何衡量四个类似javascript函数之间的CPU负载差异？

是否有人已经知道哪些性能？ （我知道这不是真的一个词）

0 个答案:

没有答案
相关问题
最新问题