Solve layout thrashing by caching a static value

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
    <style>
      #wrapper div {
        background: blue;
        height: 50px;
        width: 50px;
        margin: 2px;
      }

      #message {
        display: none;
        position: fixed;
        margin: 25%;
        background: gray;
        height: 3em;
        padding-top: 2em;
        width: 50%;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="heightInfo">Number of elements: 0.</div>
    <div id="message">Items added!</div>
    <div id="wrapper"></div>
    
    <script>
    function addItem() {
      const newElement = document.createElement("div");
      wrapper.appendChild(newElement);
      n += 1;
    }

    function addNewItem() {
      addItem();
      trackElements();
    }

    function addManyItems() {
      for (let i = 0; i < 1000; i++) {
        addItem();
      }
      trackElements();
    }

    function compareWidths() {
      const wrapperWidth = wrapper.offsetWidth;
      for (let i = 0; i < wrapper.childElementCount; i++) {
        wrapper.children[i].style.width = wrapperWidth;
      }
    }

    function trackElements() {
      infoBox.innerText = `Number of elements: ${n}.`;
    }

    const wrapper = document.getElementById("wrapper");
    const infoBox = document.getElementById("heightInfo");

    let n = 0;
    let height;

    document.addEventListener("keyup", e => {
      switch (event.key) {
        case "s":
          addNewItem();
          break;
        case "m":
          addManyItems();
          break;
        case "c":
          compareWidths();
          break;
      }
      console.log("Finished");
    });
  </script>
  </body>
  
</html>