如何管理DOM元素 [英] How to manage DOM elements

问题描述

我已经实现无限滚动（即负载记录时滚动条到达div的底部）。它工作正常，但在页面上加载了太多的记录后，页面变得过于沉重和放大器;导致慢渲染。其实，我使用这种技术作为替代的GridView，所以，如何在这种情况下管理重DOM？

解决方案

1. 减少DOM元素来最低。


2. 最小化包装的数量。


3. 最小化的存取权限的DOM元素，其中包括（雅虎建议的）：
   
   
   
   • 缓存引用访问的元素
   
   
   • 更新节点下线，然后将它们添加到树
   
   
   • 避免使用JavaScript固定布局
   
   


4. 如果有可以减少，喜欢把自己的行数的任何计算（不计算它每次，只要新的行数添加到当前的），它缓存（记忆化的 ^维基百科 ）

如果您对DOM元素的集合，任何类型的循环，并没有使用jQuery迭代，通过的 JavaScript的模式中）：

 为（VAR迭代= 0，上限= lengthOfElements;迭代++;迭代＆LT;限制）
 

或

 为（VAR I = myarray.length;我 - ;）
 

I have implemented Infinite scrolling(i.e Load records when the scrollbar reaches the bottom of the div). It works fine but after loading too many records on the page, the page becomes too heavy & causes slow rendering. Actually, I am using this technique as a replacement of a gridview so, how do i manage heavy DOM in this scenario?

解决方案

1. Reduce the DOM elements to minimum.
2. Minimize the number of wrappers.
3. Minimize the acces to the DOM elements, which includes ( yahoo suggestions ):
   • Cache references to accessed elements
   • Update nodes "offline" and then add them to the tree
   • Avoid fixing layout with JavaScript
4. If there is any computation which can be reduced, like getting the number of rows ( don't calculate it everytime, just add the number of the new rows to the current ), cache it ( memoization ^wikipedia )

If you have any type of iteration over a collection of DOM elements and you don't use jQuery to iterate, use this (suggestions by JavaScript patterns):

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

or

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

这篇关于如何管理DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！