让CSS动画在JavaScript运行时更加流畅？

Question

我正在开发一个Ember应用，它显示了大量的实时数据，这使得JS线程非常繁忙。

我想使用CSS3添加一些流畅的动画效果，但是在底层工作的JS会使整个应用变得卡顿。

有没有办法优先考虑CSS动画，使它们更加流畅？毕竟，如果我的数据在半秒钟内没有更新，我并不在乎。

我主要针对Chrome和Firefox浏览器。

- Fez Vrasta

Answer 1

你可能需要了解Web Worker。

如果你让所有的Ajax和数据处理都在Web Worker线程中完成，只在DOM线程中显示，那么可以节省很多由计算引起的开销/延迟。

一个建议是，不要使用worker.postMessage(arg,arg)，而是使用worker.postMessage(arg)只传递一个参数。

对象本身将被发布，而不是在另一个线程中被转换为JSON并再次转换回来。这样可以节省很多CPU时间。 请记住，发布对象的线程将“丢失”该对象（以防止并发问题）。

此外，DOM元素无法发布到Web Worker，请确保您发布到Worker的数据是“干净的”。

- Tschallacka

---

我认为这并不容易，Ember 的工作方式与实现 Web Workers 可能非常困难。 - Fez Vrasta

JavaScript 就是 JavaScript。你所要做的就是创建一个 JavaScript 对象 var x={};x.calculate = somearray;x.points = somearraywithobjects;worker.postMessage(x); 记住，Ember 使用 JavaScript，不会覆盖它。如果你有一些被计算/处理的示例代码，那么就会更容易理解，但本质上你只需要清理数据，将其发送给 worker，然后获取它并渲染所需的所有内容即可。 - Tschallacka

我找到了一个用于实现Web Workers的Ember插件，我将尝试向我的团队提出建议。谢谢！https://github.com/bengillies/ember-parallel - Fez Vrasta

Answer 2

也许尝试让CSS动画由GPU渲染是一种可能性。

CPU和GPU将运行分离，您应该尝试并查看是否会带来改进！

- Douwe de Haan

---

即使使用GPU，动画仍然有一些延迟，而且并不容易使每个需要转换的元素都使用GPU。顺便说一下，我会尽可能地在任何地方实现它。谢谢！ - Fez Vrasta