我将讨论在管理和更新 DOM 时避免过度内存使用的最佳实践，以使您的应用程序达到极快的速度™️。
DOM: 文档对象模型 – 简介
当您渲染 HTML 时，浏览器中这些渲染元素的实时视图称为 DOM。您可以在开发者工具的 “元素” 检查器中看到它：
Chrome 开发者工具中的元素面板
它本质上是一个树结构，其中每个元素都是一个叶子。整个 API 集专门用于修改这个元素树。
以下是一些常见的 DOM API 列表：
querySelector()querySelectorAll()createElement()getAttribute()setAttribute()addEventListener()appendChild()
这些 API 附加在 document 对象上，所以您可以像这样使用它们：const el = document.querySelector("#el");。它们也可用于所有其他元素，因此如果您有一个元素引用，您可以使用这些方法，并且它们的功能范围限于该元素。
1 | const nav = document.querySelector("#site-nav"); |
这些方法将在浏览器中可用以修改 DOM，但在服务器端 JavaScript（如 Node.js）中不可用，除非您使用像 js-dom 这样的 DOM 模拟器。
作为一个行业，我们将大部分直接渲染工作转移到了框架上。所有 JavaScript 框架（React、Angular、Vue、Svelte 等）都在底层使用这些 API。虽然我认识到框架的生产力优势通常超过了手动 DOM 操作的潜在性能提升，但我希望在本文中揭开这些底层操作的神秘面纱。
为什么首先要自己操作 DOM？
主要原因是性能。框架可能会添加不必要的数据结构和重渲染，导致许多现代 Web 应用中令人讨厌的卡顿/冻结现象。这是由于垃圾回收器需要处理大量代码而被迫超负荷工作。
缺点是手动操作 DOM 会产生更多代码。这可能会变得复杂，这也是为什么使用框架和围绕 DOM 的抽象会带来更好的开发者体验的原因。尽管如此，有些情况下您可能需要额外的性能提升。这个指南就是为这些情况准备的。
VS Code 是基于手动 DOM 操作构建的
Visual Studio Code 就是这样的案例之一。VS Code 是用原生 JavaScript 编写的，“尽可能接近 DOM”。像 VS Code 这样的大型项目需要对性能进行严格控制。由于其强大的插件生态系统，核心必须尽可能核心和轻量化，这也是其广泛采用的原因。