如何管理 DOM 元素

Posted 2023-05-08

【中文标题】如何管理 DOM 元素

【英文标题】：How to manage DOM elements

【发布时间】：2012-04-18 18:10:45

【问题描述】：

我已经实现了无限滚动（即当滚动条到达 div 底部时加载记录）。它工作正常，但是在页面上加载太多记录后，页面变得太重并导致渲染缓慢。实际上，我正在使用这种技术作为 gridview 的替代品，那么在这种情况下我该如何管理繁重的 DOM？

【问题讨论】：

你在每个元素上都有额外的 javascript 事件吗？

也许在两边都做这个技术，上下滚动？向下滚动后达到 100 项时，删除或隐藏前 50 项。向上滚动时重新加载或再次显示它们。

@Aristos Nop 我的所有控件都是只读的。没有绑定事件

@binarious：你能给我一个简单的想法，如何在 div 中实现这一点。我也需要保持滚动条高度。谢谢

基于二进制注释，如果您对 html5 持开放态度，您可以从 DOM 中删除元素并将它们移动到本地存储中，以备后用。如果数据经常更改，则在访问者退出页面时将其从存储中删除。

【参考方案1】：

将 DOM 元素减少到最少。 尽量减少包装器的数量。 最小化对 DOM 元素的访问，包括 (yahoo suggestions)： 缓存对访问元素的引用 “离线”更新节点，然后将它们添加到树中 避免使用 JavaScript 修复布局 如果有任何可以减少的计算，例如获取行数（不要每次都计算，只需将新行数添加到当前），将其缓存（memoization ^wikipedia）李>

如果您对 DOM 元素的集合有任何类型的迭代并且您不使用 jQuery 进行迭代，请使用这个（JavaScript patterns 的建议）：

for (var iteration = 0, limit = lengthOfElements; iteration++; iteration < limit)

或

for (var i = myarray.length; i--; )