繁体 English 中英

html5 / jQuery，每100毫秒执行一次动画的时钟， <div> 要么 <canvas> ？

[英]html5 / jQuery, Clock that does milliseconds animating every 100ms, <div> or <canvas>?

原文 2013-04-04 23:26:57 5 1 jquery/ html5/ html/ canvas/ performance-testing

我已经在jQuery中编写了一个小的秒表/时钟，它将使用phonegap构建在android和iOS上运行，该秒表以“ 00：00：00.0”的格式显示了秒表启动以来的时间，其中包括毫秒最后一块数字，每100毫秒更新一次。 我一直在谷歌上寻找canvas vs div性能文章，但似乎没有提及它们如何以100ms的间隔执行文本更新。

我想知道是否最好在<div>更新显示时间的文本，还是在<canvas> ？ 目前，我正在使用div，并且时不时出现一点点滞后，看起来浏览器无法跟上，对这种情况的任何建议/见解都非常感谢，谢谢大家！

1 个解决方案

我将在这里抄写评论；

您应该知道画布在每个循环上都会重新绘制，而DOM元素仅在被请求时才移动/动画化。 我什至认为，使用这种简单的动画，两者都没有关系，但是DOM移动（）会更快。

从外观上看，DOM元素动画的缺点可能是浏览器的性能。 某些浏览器倾向于对DOM元素进行不同的旋转和转换。 难看（锋利的边缘等）。

计时器不会延迟，不用担心。 如今，JavaScript引擎具有很高的性能。 您不会在时间上遇到麻烦，在不同的浏览器中使用DOM看起来可能会有所不同。 视觉效果我的意思是说，不是口吃:)

您还想实现的目标是轻巧。 两者都会起作用。 我会去DOM寿，但这是个人的东西:)