Блог

Главная - Вопросы по программированию - Как оптимизировать частицы с помощью javascript

Как оптимизировать частицы с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

Я впервые создаю частицы с помощью javascript, и я не уверен, оптимизирован ли приведенный ниже код.

Когда я создаю 100 частиц на экране, я не замечаю такого большого падения кадров в секунду.

Когда происходит несколько щелчков подряд, частота кадров сильно падает.

Это понятно, но есть ли способ оптимизировать этот код еще больше, чтобы при многократном нажатии поддерживалась более высокая частота кадров?

 var fps = document.getElementById("fps");
var startTime = Date.now();
var frame = 0;

function tick() {
  var time = Date.now();
  frame  ;
  if (time - startTime > 1000) {
      fps.innerHTML = (frame / ((time - startTime) / 1000)).toFixed(1);
      startTime = time;
      frame = 0;
    }
  window.requestAnimationFrame(tick);
}
tick();

function pop (target) {
  let amount = 100;
  // Quick check if user clicked the button using a keyboard
    const bbox = target.getBoundingClientRect();
    const x = bbox.left   bbox.width / 2;
    const y = bbox.top   bbox.height / 2;
    for (let i = 0; i < 100; i  ) {

      createParticle(x, y);
    }
  
  
}
function createParticle (x, y) {
  const particle = document.createElement('particle');
  document.body.appendChild(particle);
  let width = Math.floor(Math.random() * 30   8);
  let height = width;
  let destinationX = (Math.random() - 0.5) * 1000;
  let destinationY = (Math.random() - 0.5) * 1000;
  let rotation = Math.random() * 2000;
  let delay = Math.random() * 200;

      particle.style.background = `hsl(${Math.random() * 90   270}, 70%, 60%)`;
      particle.style.border = '1px solid white';
  
  particle.style.width = `${width}px`;
  particle.style.height = `${height}px`;
  const animation = particle.animate([
    {
      transform: `translate(-50%, -50%) translate(${x}px, ${y}px) rotate(0deg)`,
      opacity: 1
    },
    {
      transform: `translate(-50%, -50%) translate(${x   destinationX}px, ${y   destinationY}px) rotate(${rotation}deg)`,
      opacity: 0
    }
  ], {
    duration: Math.random() * 1000   5000,
    easing: 'cubic-bezier(0, .9, .57, 1)',
    delay: delay
  });
  animation.onfinish = removeParticle;
}
function removeParticle (e) {
  e.srcElement.effect.target.remove();
}
document.querySelector(".confetti").addEventListener("click",()=>{pop(document.querySelector(".confetti"));}
); 
 particle {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
} 
 <div class="wrapper">
  <span id="fps">--</span> FPS</div>
  <div class="confetti">Square particles</div>

</div>

Комментарии:

1. Возможно, вам потребуется отменить клики, чтобы они действительно вызывали действие только через определенный интервал времени. Если пользователь нажимает клавишу мыши, он не должен доходить до того, что он создает 100 фигур и замедляет все. Возможно, также было бы более эффективно использовать что-то вроде canvas, чтобы вы могли контролировать обновления.

2. Рассмотрите возможность публикации этого в codereview.stackexchange.com

Ответ №1:

Было бы намного быстрее, если бы вы могли добавить холст, и вместо добавления элементов и их стилизации вы могли бы просто рисовать что-то на холсте. Тогда это может быть намного быстрее. Если вы не понимаете, как использовать canvas с JavaScript, вы можете захотеть поискать его на чем-то вроде W3Schools, потому что у них есть много вещей, которым вы могли бы научиться у них.

Надеюсь, это поможет. Пожалуйста, дайте мне любую обратную связь, если она у вас есть. Я новичок в Stack Overflow, поэтому я хочу знать, как улучшить. Спасибо и счастливого кодирования!