Question

目标：找到以HTML效率最高的方式在HTML中显示当前的毫秒数。

我目前的解决方案在我的笔记本电脑上占用高达10％的CPU计算量。我目前的解决方案：http://dev.timerintab.appspot.com/test/ms

我的最终目标是在timer上显示毫秒。

更新
我更改了测试以获取间隔的参数：http://dev.timerintab.appspot.com/test/ms?interval=x其中x是以ms为单位的间隔。
因为可以注意到间隔与16ms的间隔相比，100ms产生视觉差异：
http://dev.timerintab.appspot.com/test/ms?interval=100
http://dev.timerintab.appspot.com/test/ms?interval=16
我甚至可以注意到20ms和16ms间隔之间的差异。

Answer 1

您的显示器的刷新率[可能]约为60Hz。人眼看到（有意识地，至少）at less than that rate。

那你为什么要这么努力地在1000Hz下渲染一个变化的数字？为什么不将你的数字四舍五入到最接近的0.01s？这应该会减少CPU密集度，并且实际上更多对您的用户有用，这些用户可能更多地了解实际情况。

事实上，在实践中，你不需要比0.1s更高的分辨率，这是一个轻而易举的事。

Answer 2

首先，不要每毫秒显示 - 人眼每百分之一秒看不到，毫秒是不可能的。

其次，使用“getMilliseconds（）”。

第三，不要在每次调用函数时创建新日期。有两个功能：

var ms = new Date().getMilliseconds()
var interval = 10;
function periodically(){ ms = new Date().getMilliseconds() }

function quickly(){ 
    ms = ms % 1000;
    domEl.innerHTML = ms<100?(ms<10?'00'+ms:'0'+ms):ms; 
    ms+= interval 
}
setInterval( periodically, 500 );
setInterval( quickly, interval );

那么，发生了什么？您没有每次实例化日期，而是有一个函数，它将数字与每半秒的日期同步。然后，您有第二个功能，只是在本地增加该数字。如果他们不同步会怎么样？谁在乎？无论如何，它们将在半秒内同步，并且它们实际上不会被人眼所能看到的任何东西所取代。

Answer 3

在FF4中，您的代码占用了25％的CPU使用率。将INTERVAL增加到50会将使用率降低到12-15％。 Afaik arguments.callee会生成一个新的解释器，因此请使用命名函数。如果您使用setTimeout，则无需每次初始化setInterval。在这种情况下，arguments.callee也已过时。在我的电脑上，这些措施（+将间隔值设置为99）显示FF中的CPU使用率 ~~3-5％~~ 1-3％，Chrome ~~约3％~~ 0

setInterval(count,INTERVAL);
function count()
{
  var ms = new Date().getMilliseconds() % 1000;
  domEl.innerHTML = ms<100?(ms<10?'00'+ms:'0'+ms):ms;
};

Answer 4

在您的示例中，您不会尝试显示每毫秒 - 您使用间隔为9的setTimeout。只是增加该间隔将（显然）降低CPU负载，同时还会降低显示时间的速率。

鉴于此，当然这取决于您需要更新显示器的频率吗？

我怀疑你的脚本没有更多的东西，但我愿意被证明是错的！

HTML中显示高效的毫秒数

4 个答案: