什么是 DOM？它吃什么？

DOM（文档对象模型）是网页及其开发的基础。它是 HTML 和 XML 文档的编程接口，以树状对象表示文档的结构。有树枝和树叶。文档中的每个元素、属性和文本片段都成为该树中的一个节点。它允许 JavaScript 与 HTML 元素交互、修改它们或添加新元素。这是对每个人在网络上的体验、交互、可变性、动态视觉提示和元素的粗略摘要。当您单击按钮或闪亮的菜单时，您的大脑预计会发生某事。要更改的句子、要加载的新页面或带有绿色复选标记的弹出窗口，告诉我们在线订单已成功支付。

每秒操作 DOM 的速度太快，对于用户保留甚至用户的基本交互来说都是一个大禁忌。即使我们可以创建和扩展用户体验的所有动态行为，过度使用 DOM 操作也可能会非常令人沮丧。而最终的决定权始终来自于用户。如果您在页面后台发生关键操作（例如数据获取），但在用户与其交互后，性能会随着时间的推移而下降，并且变得更糟，那么查明瓶颈点可能会非常困难且令人畏惧。

使用基本的做事方式并且做得更快的简单方法的一个例子是使用 vanilla js 中的 textContent。是的，我知道。大多数时候，我们需要一个复杂的组件生命周期，这些组件是如此动态和可变，以至于我们需要使用状态管理等。但情况并非总是如此。如果您每次会话只更改一些文本或更新一次 cookie，您真的需要使用如此复杂的逻辑和资源匮乏的选项吗？

与类似的功能选项（例如更流行的innerHtml方法）相比，textContent函数是js中处理文本最快的。请参阅这些定时测试以供参考。

为什么？

您可以节省用户的机器内存以进行其他更有效的操作。例如，有时在非常旧的 Android 或 Apple 设备中访问并相当快地运行是必须的。或者，您的 API 调用可能会返回一个如此大的 JSON，以至于您需要几秒钟的时间来进行解析和正确的操作。因此，用户得不到反馈或卡在屏幕上观看 CSS 动画的每一秒都很重要。

我最近通过使用没有依赖关系的 JavaScript 编码学到了很多东西，作为一种挑战和学习经验。就像仅使用 HTML、CSS 和 JavaScript 获取数据并创建待办事项应用程序一样。没有 npm，没有库。我发现了一堆我以前从未听说过的 Web API 方法和对象，比如 DocumentFragment 对象。它创建 DOM 结构的一个空“片段”，让您在实际更改页面的 DOM 之前操作并填充它。因此，您可以使用菜单列表或超级精美的人工智能驱动工具的标题加载一个对象，并在完成附加操作和嵌套标签后，将其修补到 DOM 一次。通过这种方式，解析一次只发生一次，而不是使用许多相同的调用进行 for 循环，并且需要在每次调用结束时对树进行新的解析。

因此，假设我单击按钮的速度非常快，因为我的用例需要渲染速度非常快，每秒超过 1 次。在这种情况下，使用您最喜欢的状态管理库可以创建某种障碍，因为每次单击后都会触发新事件，因此默认情况下，它必须在启动堆栈中事件的第二个实例之前关闭。根据异步操作的复杂性或需求，这可能需要一秒钟以上的时间。在这个用例中，是一个交易破坏者。因此，选择正确的工具可以更简单、更短甚至更快。如今，流行的库提供了一些选项来解决这个问题，例如当最近触发新的相同事件时中断重新渲染的执行。但我的观点是，不仅仅是追求漂亮且现代的 Web 应用程序。但是，为了让维护变得最简单，让自己的生活变得更轻松，您可以不要盲目相信某人编写并说这是最好的选择的代码块，搬起石头砸自己的脚。

如果您已经安装这些包和库来启动您的项目，为什么不调查为什么错误和异常会在控制台上吐出未知的函数调用或神秘消息？

结论和一些额外的漫谈

如今，在云上或在非常常见的服务中免费启动并运行服务可能非常快速且简单。使用像起点这样的样板非常有帮助，并且可以节省您的时间，而不必担心非常基本和重复的任务。只需在终端中输入一个命令，即可获得基本路由和在本地服务器上运行的 hello world 页面。

没有人，在互联网上的任何地方都不会永远知道一个确定的库或整个框架在幕后的作用，但是您越了解事物的工作原理，您就越能够做出更明智的决策并高效地工作。

最流行的 Web 开发框架在实际优化重新渲染和使用虚拟 DOM 等资源操作 DOM 方面做得非常出色，或者为检索数据的要求非常高的操作实现某种持久性。

您选择的网络浏览器中的网络开发人员工具是您最好的朋友。这些工具的较新版本可以为您提供遥测，甚至显示代码的哪一部分或哪些调用可能是性能的瓶颈。

通过了解 JavaScript 语言的工作原理或它如何实现其工作方式，您可以轻松识别以下情况：您最喜欢的库中的现成可用函数可能会迫使您创建更加臃肿的代码库，而不是专注于解决问题问题。它可能只会吸引您的注意力去复制您编写了数百次的某些代码。即使人工智能可以提高您的工作效率，您也可能会陷入使用人工伴侣建议的解决方案的陷阱，而实际上只会让未来的维护变得更加困难。

别担心，我们有时只是不知道更好。就像我说的，没有人能够在任何时候都知道一切。

在更宽容的时刻进行实验和犯错误会对你有很大帮助，并为你提供做得更好所需的工具。下次当您遇到做一些简单的事情时，例如部署静态文件服务器或将一些非常复杂的逻辑编码到一个非常小的用例中，了解基础知识将使您真正走得更远，并让您在面临职业生涯中的新问题时更加清晰。

我强烈建议您查看 Web API 的文档。以及浏览在线博客、社交媒体或专注于网络开发的资源。

如果我犯了任何错误（很可能），请在评论中告诉我。我非常愿意倾听批评和新想法，所以如果你愿意的话，请分享它们！