domNode 文档表示的大内存占用答案

【问题标题】：Big memory footprint of domNode document representationdomNode 文档表示的大内存占用
【发布时间】：2020-11-13 14:15:57
【问题描述】：

我有一些相对较小的 HTML 文档 - 只有几十个表格行，有几列，其中一个包含文本类型信息，另一个包含带有提交按钮的简约表单，即该列的每一行中的表单/按钮。没什么特别的。 CURL 报告我的 HTML 文档总重量约为 26 KB。但是，当我在 Firefox 浏览器中检查文档内存占用时，我得到了这张照片：

意味着整个文档的 domNode 表示是 1 MB ！这意味着与纯 HTML 输出大小相比，完整文档的 domNode 表示的开销约为 40 倍！问题是 - domNode 类型有什么特别之处？为什么浏览器需要如此多的额外开销数据？

【问题讨论】：

标签： html optimization browser dom-node memory-footprint

【解决方案1】：

恐怕您的比较不正确。
这就好像有人问“为什么这辆车的蓝图重 1.5 公斤，而汽车本身重 1500 公斤？开销是 1000 倍！”

HTML 代码只是 HTML 解释器（例如网络浏览器）的高级蓝图。
浏览器解析代码并创建文档对象模型 (DOM)，其中每个节点都是一个对象并具有一些属性。这需要内存。

请看下面的sn-p，或者更好的是，打开Firefox控制台并输入document。
你会看到很多东西（甚至在空的<html></html> 后面）。

console.log(document)

.as-console-wrapper {max-height:100% !important; top:0}

【讨论】：

我明白这一点。但是不同的制造商可以从相同的蓝图制造略有不同的汽车！同样，不同的浏览器可以从相同的 HTML sn-p 构建稍微不同的 DOM 模型和依赖架构。这就引出了一个问题——哪种 DOM 模型表示更好？、优化、冗余内存消耗，甚至可能是内存泄漏等。因此，问题是，Firefox 真的需要那么多，还是可以优化？
@AgniusVasiliauskas，你是对的，浏览器引擎的 HTML 文档的内部表示可能略有不同。但总的来说，浏览器引擎实现了 HTML、CSS、JS 和其他一些标准。因此，大多数属性都是由这些标准提出的。它们不能被省略。我不是浏览器开发人员，无法建议如何优化浏览器代码。但是作为一个 webdev 我可以优化我自己的代码：最小化 HTML 中的元素和属性的数量，最小化 CSS 中的重排和重绘，最小化 JS 中的时间和空间复杂度。