如何管理DOM元素

Question

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

Answer 1

也许双方都在做这种技术，上下滚动？向下滚动后达到100个项目后，移除前50个。向上滚动时重新加载或再次显示它们。

如何实现这一目标的想法：

$('.entry:lt(50)').remove(); // remove the top 50 .entry elements

$('.entry:lt(' + (current_entries - 50) + ')').remove();

滚动到div顶部时重新加载服务器端。 希望有所帮助。

Answer 2

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

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

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

或

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