Problem

How can we improve this code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic List</title>
  </head>
  <body>
    <ul id="myList"></ul>

    <script>
      let items = [...Array(1000).keys()].map((i) => `Item ${i}`);

      let ul = document.getElementById("myList");

      for (let item of items) {
        let li = document.createElement("li");
        li.textContent = item;
        ul.appendChild(li);
      }
    </script>
  </body>
</html>
Solution

In the initial example, we are appending each list item to the DOM as we create it. This is inefficient because the DOM is updated each time we append a new list item. Instead, we can create a document fragment and append all of the list items to the fragment. Then, we can append the fragment to the DOM. This way, the DOM is only updated once.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic List</title>
  </head>
  <body>
    <ul id="myList"></ul>

    <script>
      let items = [...Array(1000).keys()].map((i) => `Item ${i}`);

      let ul = document.getElementById("myList");
      let fragment = document.createDocumentFragment();

      for (let item of items) {
        let li = document.createElement("li");
        li.textContent = item;
        fragment.appendChild(li);
      }

      ul.appendChild(fragment);
    </script>
  </body>
</html>