Javascript 性能优化标记动画

我有一个Openlayers应用程序，它有一个在用户当前位置上跳动的标记

标记器的动画看起来不错，但在我的机器上性能非常高，有什么方法可以优化此功能的性能吗

function pulsate(feature, style, duration) {
  var start = new Date().getTime();

  var key = map.on('postcompose', function(event) {
    var vectorContext = event.vectorContext;
    var frameState = event.frameState;
    var flashGeom = feature.getGeometry().clone();
    var elapsed = frameState.time - start;
    var elapsedRatio = elapsed / duration;
    var radius = ol.easing.easeOut(elapsedRatio) * 35 + 5;
    var opacity = ol.easing.easeOut(1 - elapsedRatio);
    var fillOpacity = ol.easing.easeOut(0.5 - elapsedRatio)

    vectorContext.setStyle(new ol.style.Style({
      image: new ol.style.Circle({
        radius: radius,
        fill: new ol.style.Fill({
          color: "rgba(255, 0, 0, " + fillOpacity + ")"
        }),
        stroke: new ol.style.Stroke({
          color: "rgba(255, 0, 0, " + fillOpacity + ")",
          width: 3 + opacity
        })
      })
    }));

    vectorContext.drawGeometry(flashGeom);
    vectorContext.setStyle(style);
    vectorContext.drawGeometry(feature.getGeometry());

    if (elapsed > duration) {
      ol.Observable.unByKey(key);
      pulsate(feature, style, duration); // recursive function
    }

    map.render();
  });
}

---

这里有一个JSFIDLE供您使用：

我的CPU在Chrome上是可以接受的。奇怪，我的笔记本电脑风扇开始旋转，所有的一切和我的Visual Studio代码IDE都慢了很多，直到我删除标记动画。比。重了一点。对我的代码的一些小改进有什么建议吗？我的CPU在Chrome上是可以接受的。奇怪，我的笔记本电脑迷开始旋转，所有的一切和我的Visual Studio代码IDE都慢了很多，直到我删除标记动画。比重了一点。有没有关于我的代码的一些小改进的建议？