如何管理 DOM 元素答案

【问题标题】：How to manage DOM elements如何管理 DOM 元素
【发布时间】：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--; )

【讨论】：