html5 / jQuery,每隔100毫秒动画几毫秒的时钟,<div>或<canvas>?</canvas> </div>

时间:2013-04-04 23:26:58

标签: jquery html5 html canvas performance-testing

我在jQuery中编写了一个小型秒表/时钟,它将使用phonegap构建在Android和iOS上运行,秒表显示自秒表启动以来的时间,格式为&#34; 00:00 :00.0&#34;,它包括作为最后一个数字块的毫秒,并且每100ms更新一次。我一直在寻找google上的canvas和div性能文章,但似乎没有提到他们如何以100ms的间隔执行更新文本。

我想知道是否最好更新<div>中显示时间的文字,还是应该放在<canvas>?目前我正在使用div而且偶尔会出现一点点滞后,看起来浏览器无法跟上,对这种情况的任何建议/见解都非常感谢,谢谢你们!

1 个答案:

答案 0 :(得分:1)

我会在这里转录评论;

  

你应该知道画布重新绘制每个循环,而DOM元素   仅在请求时移动/动画。我认为,即便如此   简单的动画,既不重要,但DOM运动   ()会更快。

     

DOM元素动画的缺点可能是浏览器性能   视觉上。有些浏览器倾向于进行旋转和转换   DOM元素不同,表示;丑陋的(锋利的边缘等)。

     

计时器不会滞后,不用担心。这些天的JavaScript引擎是   非常高性能。它不会在时间问题上打嗝   可能只是在不同的浏览器中看起来与DOM不同。通过视觉   表演我的意思是,而不是口吃:)

     

也是你想要的   实现很轻松。两者都有效。我会选择DOM tho,   但这是个人的事情:)。