javascript - 当我有后台进程时，为什么 CSS 旋转会卡顿？ IE和FF

Question

我有一个简单的 CSS 代码，可以在单击图像时旋转图像，如下所示。这是标准微调器代码，我在单击时切换。:

CSS:

.rotate {
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spinner;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spinner;
    -ms-animation-duration: 1s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;    
}

@-webkit-keyframes spinner
{
    from{-webkit-transform:rotate(0deg);}
    to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinner
{
    from{-moz-transform:rotate(0deg);}
    to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinner
{
    from{-ms-transform:rotate(0deg);
    }
    to{
        -ms-transform:rotate(360deg);
        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
}
@keyframes spinner {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }    
}

CSS 工作得很好，很顺利，直到它到达我的 JS 代码的这一部分。 IE 或 FF 很难同时做两件事吗？我不明白为什么它在 Chrome 上运行得很好:

JS:

var datas = _.map(sourceData, function (item, index) {
                return new sourceItem(item,index);
            });

Answer 1

是的，动画和循环总是会占用大量资源。尝试一一执行它们。

使用延迟执行

setTimeout(function(){
  // code here
},100); // milliseconds