2

我遇到了一个奇怪的问题，我写了一个力导向的图形布局脚本，我想看看节点放置是如何近乎实时地发生的，这就是为什么我只计算力和重绘元素一次使用 requestAnimationFrame 刷新屏幕（虽然我知道使用 'while' 语句一步计算布局并立即绘制它会更有效）。

所以问题是，当它在我重新加载页面后第一次发生时，它按照我希望它的工作方式工作：例如 60 节点图形计算需要 8879 毫秒，我能够看到所有节点如何移动到它们的最终目的地，但是当我尝试在不重新加载页面的情况下重建相同的图表时，每个后续计算都会发生得更快：

8879ms
5797ms
4649ms
4330ms
3923ms
....
3046ms
....
etc

因此节点几乎立即变得稳定。小图的差异可能高达 10-20 倍！16 节点图：

3041
1583
1101
818
660
551
524
436
373
360
352
305
167

重新加载页面后，该过程重复。所以我想知道为什么它首先会发生（浏览器是否以某种方式缓存和优化代码？）以及如果可能的话如何避免它。在 IE、FF 和 Chrome 中尝试过，结果相同。

谢谢

4

3 回答 3

0

是的。Chrome 有他们的 V8 引擎，Firefox 有 spidermonkey，我相信 Safari 在他们的 WebKit 框架中有 JavaScriptCore。此外，Firefox 还支持 asm.js，这是一个可以从 C/C++ 代码编译下来的 javascript 子集，最近被用于虚幻引擎的出色 javascript 端口

http://www.unrealengine.com/html5/

因此，是的，大量资源用于优化 javascript 执行，并且性能因浏览器而异。新的通常工作得很好。（实际上，优化 js 是一个棘手的过程，因为它是一种高度动态的语言——对象可以随时更改字符和属性。这种困难部分是谷歌“Dart”语言背后的基本原理：

https://www.dartlang.org/support/faq.html )

话虽如此，如果你编写了一个非常低效的 while 循环，浏览器只能做这么多。

于 2013-10-04T14:53:21.283 回答
0

是的，他们做到了，这是提高 js 引擎性能的关键。

听说 google chrome 的 V8 js 引擎将 JavaScript 编译为原生机器码，这也是 chrome 这么快的原因。

http://en.wikipedia.org/wiki/V8_(JavaScript_engine)

看来你的问题是关于你的javascript知识，没有浏览器，javascript有时很乏味，很难完全掌握。有时您的代码只是执行而不按照您预期的顺序执行。

于 2013-10-04T14:37:11.343 回答
0

永远不要指望计算足够慢以至于你可以看到结果。迟早，你总是被证明是错误的。requestAnimationFrame适用于需要尽可能流畅地绘制的动画，并且可能会给您任意 FPS。如果您需要限制某事发生的速率，请使用setInterval或使用，requestAnimationFrame但将每个节点的移动量降低，与自上一帧以来经过的时间成比例。

于 2013-10-04T14:40:47.933 回答