处理性能-fadeTo()与CSS不透明度

问题描述

我已经尝试了通过以下功能使动画重复的事件:

I have experimented repetitive event which animated by these functions:

1. jQuery动画效果:fadeTo(1000,1);
2. $('#foo').on('click', function(){ $('#bar').css({"opacity":1});

1. Jquery animation effect: fadeTo(1000,1);
2. $('#foo').on('click', function(){ $('#bar').css({"opacity":1});

当我一次又一次地重复切换事件时，似乎事件逐渐变慢了.

When I repeat toggling the event again and again, it seems like event is getting gradually slower.

我也在Chrome的任务管理器中进行了查看，但是很难看到GPU的使用情况.

I took a look in Task Manager in Chrome as well, however, it is quite hard to see the GPU comsumption different.

您知道哪个执行得更快吗?

Do you have idea which one perform faster?

推荐答案

在刚运行jsPerf之后，我怀疑fadeTo 要慢得多.

After just running a jsPerf, it seems, as I suspected, that fadeTo is significantly slower.

事实上，对我来说，它的速度慢了56％:

In fact, for me, it was 56% slower:

这是我创建的测试，您可以自己运行它: http://jsperf.com /fadeto-vs-css-opacity

Here's the test I created, you can run it yourself: http://jsperf.com/fadeto-vs-css-opacity

这篇关于处理性能-fadeTo()与CSS不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！