问题标签 [dom-node]

假设一个繁重的网站由大约 5000 个 dom 节点组成——但其中 20% 仅用于页面访问的有限时间。例如仅前 10 秒，然后将自动隐藏。删除这些节点将如何提高此页面在浏览器中的性能？

我知道如果页面有许多 dom 节点，则会影响网络效率和负载性能。如果元素与之交互或需要重新计算，它也会对运行时性能产生影响。我也知道潜在的内存性能影响，如果有可能需要搜索/遍历更长时间的一般查询选择器。

问题是：除此之外，实际上或理论上，删除这些 dom 节点（而不是仅仅隐藏它们）将如何提高页面的性能？

我目前注意到我和我的团队正在开发的平台中存在内存泄漏，我尝试了以下方法：

1-在 ngFor 循环中添加了 TrackBy()。

2-尽可能在 ngIf 和 ngFor 上尝试使用异步。

3-在 .subscribe() 之前添加 .TakeUntil() 并在 ngonDestroy() 中添加 x.next(); x.完成（）；。

4-在 ngOnDestroy() 中添加了 clearTimeout。

5-在 ngOnDestroy() 中添加了无效的所有引用、子项和任何变量，如下所示：this.y = null;。

6-在 .ts 文件中的所有方法上添加了“使用严格”标签（以通知意外的全局变量）。

7-为垃圾收集器添加了“var”而不是“let”，以检测未使用的引用并销毁它们。

8-删除了代码中的所有循环依赖项。

问题：打开页面时 DOM 节点增加

已解决： JS 中的内存泄漏 ~ 已解决

离子信息：

cli包：

全局包：

本地包：

系统：

环境变量：

杂项：

描述：

没有得到任何与 DOM 节点相关的结果。我认为正在清理 JS 堆大小和 JS 侦听器（与 JS 相关的任何内容都没有内存泄漏）。

但是，即使在清理 JS 堆大小时，DOM 节点在打开另一个页面（不是具有历史记录的页面，新页面）时仍在增加，正在调用 ngOnDestroy，但 DOM 节点正在增加。

1-我尝试使用堆快照来检测内存泄漏的位置，但没有到达任何地方（）。 截图1在这里，截图2在这里

2-我尝试在时间轴上使用分配工具没有到达任何东西。

3-我尝试使用分配采样也没有得到任何东西。

我发现的唯一一件事是，导致 DOM 节点在打开新页面时增加的是分离节点。但在那之后就没有关于如何清除它们的信息了。

假设：

我认为正在发生的事情：

1- 即使当 DOM 节点正在销毁组件并且调用 ngOnDestroy() 时，内存也不会被释放，这意味着 DOM 节点正在增加。

2- ngOnDestroy() 在 DOM 节点销毁组件或页面之后被调用（没有找到任何方法来检查是否在 DOM 节点销毁组件之前或之后调用了 ngOnDestroy()）。

谁能帮我这个？或者有什么可以帮助我检测和解决 DOM 节点内存泄漏的问题？

PS：如果有人需要更多细节，请在评论中提及，以便我提供更多信息。

我希望能够将useScrollTrigger钩子“绑定”到特定的Component/Node而不是window默认值。

下面显示了useScrollTrigger预期的参数：

我试图传递对我的组件的引用，但这导致了崩溃。Material-UI 库没有解释如何使用useScrollTrigger除了与AppBar.

以下代码片段说明了我想要实现的目标：

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

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

Consider the following example:

Are the elements within the <main> already being rendered in the time when the <script> is executed? I ask because images and tables within the <main> have theirs width (i.e. the images are scaled) dependent on the <main> width, which is defined by bootstrap's grid class .col-8 or .col-10.

Does it have any sense to try to add the class directly when defining the opening <main> tag? Example:

当我做：

我希望控制台是：

但我得到：

它就像 .append('cat') 命令在第一个 console.log() 命令之前运行。这怎么样？我认为编程代码总是按顺序执行的。我在哪里可以了解哪些代码是按顺序执行的，哪些不是在 Javascript 中执行的？

如果我稍后尝试调试更复杂的代码，这可能是个问题。

我正在通过构建一个井字游戏应用程序来练习 html/vanilla JS。我在 board square s 中添加了一个事件监听器<div>，并使用 X 和 O 创建元素并将它们插入到 DOM 中，然后调用一个函数来检查是否有获胜者。该checkIfPlayerWins()函数进行一些检查，然后调用，alert如果玩家获胜或平局。

我遇到的问题是，如果玩家获胜，则会在将 X 或 O 插入 DOM 之前调用警报，这看起来很有趣。我不想使用 a setTimeout，因为它看起来有点 hacky。我尝试了async/await并new Promise从中创建了一个，但似乎无法让它工作。

好的，这里有一些代码和相关链接： insertAdjacentElement MDN docs My github/ code repo

这些都是相关的函数，如果你在makeMove()函数中看到，我调用eventTarget.insertAdjacentElement，然后我调用updatePlayerTurn()哪个调用checkIfPlayerWins()哪个调用alert(). 函数中的 this 在元素alert()被插入 DOM 之前执行。谁能帮我弄清楚如何在被调用之前等待 DOM 更改发生？谢谢！checkIfPlayerWins()insertAdjacentElementalert()

所以我面临一个问题，我无法使用 useRef 更改 DOM 节点的宽度。我使用 onDragEnd 事件仅触发所选节点上宽度的更改。我通过更改 'elementRef.current.style.width 属性来设置宽度。但是这种变化并没有反映在前端。

这是我的代码：

我有一个带有延迟加载模块的简单 Angular 应用程序，它显示一个简单的 openlayers 地图，带有一个“pointermove”动画，显示悬停时的功能信息。
我面临的问题是，每次我导航到地图模块时，DOM 节点数量都会不断增加，而当我导航到另一个模块时却不会减少。
我从大约 70 个 Dom 节点开始，每次我导航 OUT 然后进入该模块时都会得到一个 +30 个节点和一个 FPS 下降。5-6 次导航后，地图性能急剧下降（在悬停和显示弹出窗口时可见）。

我从地图 1 到 2 导航了很多次，并且 DOM 节点不断增加。

Angular 版本：12.0.1
Ol 包：6.5.0

在 Angular 应用程序中使用 openlayers 时我是否缺少某些东西？

编辑： Stackblitz https://stackblitz.com/edit/github-ndeck6?file=src/app/app.component.ts

当我编写一个干净的项目时，我可以通过简化代码来消除 FPS 下降，但 DOM 节点不断增加

我们正在开发一个开源 Chrome 扩展程序：Digital Assistant Client

我通过 domJson 转换为 json 并保存到服务器来记录domnode。我们可以通过比较json属性并匹配到页面上的原始节点来找到相同的记录节点。当我们搜索节点时，我们会遇到一个问题，有时我们会通过具有相同属性名称的 json 获得相似的节点。在这种情况下，我们试图匹配我们记录的节点位置。现在，当我们尝试以不同的屏幕分辨率匹配节点位置时，它会给我们错误的节点。我们如何解决这个问题。

我的代码用于计算记录的节点和相似节点之间的距离

有人可以帮忙吗？