title: JavaScript window resize event is slow. How to optimize window resize event
body: <p>When I click on the Maximize button of the browser window, a function I wrote that will execute when the window is resized, does not work properly I think because JavaScript window resize event is running slow. It worked when I used the mouse to resize the window. Also, when I tried to change between portrait mobile to landscape mobile it is also slow.</p>
  <p>Faced a problem with using with <code>window.addEventListener('resize', aFunction)</code>, page gets slow. These events are generated multiple times per second, and if the event handler takes too much time, the browser won’t catch with redrawing the page.</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>function aFuntion() {
    let div1 = document.querySelector('.div1');
    let div2 = document.querySelector('.div2');
    let diff = div1.clientHeight - div2.clientHeight;
    div2.style.top = diff + 'px';
  };
  
  // Call the function.
  // This worked!
  aFuntion();
  
  // Call the function when users resize the window.
  // This worked!
  window.addEventListener('resize', aFuntion);
  
  // Users click on the Maximize button of the window.
  // The function does not work properly!
  
  // Portrait mobile to Landscape mobile.
  // The function does not work properly!</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div1 {
    position: relative;
  }
  
  .div2 {
    position: absolute;
    width: 300px;
    top: 0;
    transition: all 0.5s ease;
  }
  
  @media only screen and (max-width: 1024px) {
    .div2 {
      width: 200px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="div1"&gt;
    &lt;div class="div2"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>