经过许多setInterval后，Chrome for Android落后

问题描述

我正在为我的一个应用程序尝试此演示，但其中一台触摸屏电视正在使用Android平板电脑6.0.1，并且在多次单击后确实滞后.我怀疑是由于那里的setinterval脚本.

I was trying this demo for one of my application but one of a touch screen TV is using android tablet 6.0.1 and it really lags after multiple clicks. Im suspecting due to the setinterval script there.

https://codepen.io/ShawnCG/pen/ZYVada

这是该演示中的主要javascript.

Here is the main javascript from that demo.

var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles = $('.particles'),
    particleCount = 0,
    sizes = [
      15, 20, 25, 35, 45
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],

    mouseX = $w.width() / 2, mouseY = $w.height() / 2;

function updateParticleCount () {
  $('.particle-count > .number').text(particleCount);
};

$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});

$d
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
  var timer = setInterval(function () {
    $d
    .one('mouseup mouseleave touchend touchcancel touchleave', function () {
      clearInterval( timer );
    })
    createParticle( event );
  }, 1000 / 60)

});


function createParticle ( event ) {
  var particle = $('<div class="particle"/>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;

  particle
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles );
  particleCount++;
  updateParticleCount();

  var particleTimer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;


    particle
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/2) + .25,
        transform: 'rotate(' + spinVal + 'deg)',
        webkitTransform: 'rotate(' + spinVal + 'deg)'
    });

    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle.remove();
        particleCount--;
      updateParticleCount();
      clearInterval(particleTimer);
    }
  }, 1000 / 60);
}

对于相同的动画，我已将jquery更改为gsap.因此，我使用Tweenlite.set()代替了$(element).css()

I have changed the jquery to gsap for the same animation. So instead of $(element).css(), im using Tweenlite.set()

硬件是否可以通过这种方式来加快浏览器的动画速度?

Is there a way hardware speed up the browser for this sort of animation?

任何帮助将不胜感激.

推荐答案

最大的性能影响是因为您正在使用DOM元素.如果您将<canvas>用作粒子，则其性能会更好 (如果您愿意的话，可以得到数百或数千个粒子，而不会带来很大的性能风险).

The biggest performance hit is because you're using DOM elements. If you were to use <canvas> for your particles instead, it would perform much better (you could get hundreds or thousands of particles without much of a performance risk if you wanted to).

但是，您可以使此DOM动画比目前的 性能更高.要做的最大更改是使用转换而不是top和left.在GSAP中，您可以通过影响x和y属性来实现.您还应该使用transform的scale而不是影响width/height.在GSAP中，您还应该设置rotation而不是实际的转换本身(它会为您生成属性transform).我还建议使用GSAP的.set()方法而不是jQuery的.css().为了获得更高的性能，请使用GSAP的.quickSetter()方法.

However, you can make this DOM animation much more performant than it is currently. The biggest thing to change is to use transforms instead of top and left. In GSAP you can do that by affecting the x and y properties. You should also use transform's scale instead of affecting width/height. In GSAP you should also set the rotation instead of the actual transform itself (it generates the property transform for you). I also recommend using GSAP's .set() method instead of jQuery's .css(). For even more performance, use GSAP's .quickSetter() method.

使用GSAP的.delayedCall代替setInterval也将更加可靠.更好的是，使用gsap.ticker()并从中调用所有更新功能！

Using GSAP's .delayedCall instead of setInterval will also be more reliable. Even better, use gsap.ticker() and call all of the update functions from within that!

您总共可以获得此演示.

还可以进行其他优化，例如重用相同的粒子，而不创建/销毁旧的粒子，但是就DOM动画而言，性能几乎是极限.就像我在开始时说的那样，这种事情对于<canvas>是完美的.

Other optimizations could be done, such as reusing the same particles and not creating/destroying the old ones, but the performance is about at its cap in terms of DOM animation. Like I said at the beginning, this sort of thing is perfect for <canvas>.

这篇关于经过许多setInterval后，Chrome for Android落后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！