javascript - 如何管理 DOM 元素

Question

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

Answer 1

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

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

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

或者

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