在存储器中存储的元素prevent更新DOM太频繁？ [英] Storing elements in memory to prevent updating the DOM too often?

问题描述

目前我有一个循环，更新每次迭代的DOM;我认识到这是一个不好的做法和放大器;你应该更新DOM尽量少了更好的速度。

所以我想知道我如何去编辑下面这样我就可以存储在一个元素或东西和功放的所有元素;然后做一个DOM此外，一旦循环结束。

下面是循环。

 为（VAR I =点; I＆LT;现货+ BATCHSIZE和放大器;＆安培; I＆LT; cats.options.length;我++）{        //检查是否选择猫        如果（cats.options [I] .selected ==真）{            //设置这一类的价值观一些变量
            VAR CAT_ID = cats.options [I] .getAttribute（'值'）;
            VAR cat_name = cats.options [I]的.text;            如果（checkCatSICAdd（CAT_ID）=== FALSE）{                //现在我们创建新元素
                VAR new_option =使用document.createElement（'选项'）;                //添加属性
                new_option.setAttribute（'值'，CAT_ID）;                //创建文本节点
                VAR new_text_node = document.createTextNode（cat_name）;                //追加新的文本节点，我们创建了新的选项元素
                new_option.appendChild（new_text_node）;                //追加新的选项标签，选择列表
                sel_cats.appendChild（new_option）;            }其他{
                失败++;
            }        }    }
 

解决方案

在循环DOM元素的工作是缓慢的 - 如果你将它们连接到文件或不能不管。在结束安装他们的是，因为只有重绘需要更快一点，但它仍然是缓慢的。

正确的方法是生成包含HTML一个普通的老字符串，并使用DOM元素的的innerHTML 属性附加此字符串与DOM。

Currently I have a loop that updates the DOM in each iteration; I have learned this is a bad practice & you should update the DOM as little as possible for better speed.

So I was wondering how I go about editing the below so I can store all the elements in one element or something & then do a single DOM addition once the loop ends.

Here is the loop..

    for (var i = spot; i < spot + batchSize && i < cats.options.length; i++) {

        // Check if the cat is selected

        if (cats.options[i].selected == true) {

            // Set this category's values to some variables
            var cat_id = cats.options[i].getAttribute('value');
            var cat_name = cats.options[i].text;     

            if (checkCatSICAdd(cat_id) === false) {           

                // Now we create the new element
                var new_option = document.createElement('option');

                // Add attribute
                new_option.setAttribute('value',cat_id);

                // Create text node
                var new_text_node = document.createTextNode(cat_name);

                // Append new text node to new option element we created
                new_option.appendChild(new_text_node);

                // Append new option tag to select list
                sel_cats.appendChild(new_option);

            } else {
                failed++;
            }

        }

    }

解决方案

Working with DOM element in the loop is slow - no matter if you attach them to the document or not. Attaching them at the end is a bit faster since only only redraw is required but it's still slow.

The proper way is generating a plain old string containing HTML and attaching this string to the DOM using the innerHTML property of a DOM element.

这篇关于在存储器中存储的元素prevent更新DOM太频繁？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！