title: How to optimize particles with javascript
body: <p>I'm creating particles for the first time with javascript and I'm not sure if the below code is optimized.</p>
  <p>When I create 100 particles on the screen I don't notice that much of an fps drop.</p>
  <p>When multiple clicks happen in a row the fps takes major dip.</p>
  <p>This is understandable but is there a way to optimize this code more so that multiple clicks will maintain a higher frame rate?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var fps = document.getElementById("fps");
  var startTime = Date.now();
  var frame = 0;
  
  function tick() {
    var time = Date.now();
    frame++;
    if (time - startTime &gt; 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 &lt; 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",()=&gt;{pop(document.querySelector(".confetti"));}
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>particle {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;span id="fps"&gt;--&lt;/span&gt; FPS&lt;/div&gt;
    &lt;div class="confetti"&gt;Square particles&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>