{"id":1551,"date":"2024-07-29T07:47:16","date_gmt":"2024-07-29T12:47:16","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1551"},"modified":"2024-07-30T12:31:28","modified_gmt":"2024-07-30T17:31:28","slug":"patterns-for-memory-efficient-dom-manipulation","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/patterns-for-memory-efficient-dom-manipulation\/","title":{"rendered":"Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript"},"content":{"rendered":"\n

Let’s continue the modern vanilla JavaScript series!<\/p>\n\n\n\n

\"Memory<\/figure>\n\n\n
\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Writing a TodoMVC App with Modern Vanilla JavaScript<\/a>\n <\/li>\n
  2. \n Patterns for Reactivity with Modern Vanilla JavaScript<\/a>\n <\/li>\n
  3. \n Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast\u2122\ufe0f<\/a>.<\/p>\n\n\n\n

    DOM: Document Object Model \u2013 A Brief Overview<\/h2>\n\n\n\n

    When you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer tools “Elements” inspector:<\/p>\n\n\n\n

    \"Elements<\/figure>\n\n\n\n

    It’s essentially a tree, with each element inside of it being a leaf. There is an entire set of APIs specifically dealing with modifying this tree of elements.<\/p>\n\n\n\n

    Here’s a quick list of common DOM APIs: <\/p>\n\n\n\n