将元素存储在内存中以防止过于频繁地更新 DOM？
目前我有一个循环在每次迭代中更新 DOM；我知道这是一种不好的做法。为了提高速度，你应该尽可能少地更新 DOM。
所以我想知道如何编辑下面的内容，以便我可以将所有元素存储在一个元素或其他元素中。然后在循环结束后执行一次 DOM 添加。
这是循环..
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++;
}
}
}
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++;
}
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
在循环中使用 DOM 元素的速度很慢 - 无论您是否将它们附加到文档中。将它们附加到最后会快一点，因为只需要重绘，但仍然很慢。
正确的方法是生成一个包含 HTML 的普通旧字符串，并使用 DOM 元素的
innerHTML属性将此字符串附加到 DOM。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
innerHTMLproperty of a DOM element.你的代码应该没问题。在 Javascript 执行完毕之前，DOM 实际上不会重绘。但是，如果您遇到性能不佳的问题浏览器，您可以尝试在循环之前创建一个尚未附加到 DOM 的新
select，按现在的方式填充它，然后替换sel_cats并在末尾添加新的select。这样，DOM 只更新一次。Your code should be ok. The DOM won't actually redraw until the Javascript has finished executing. However, if you've encountered a problem browser that does perform badly, you could try creating a new
selectbefore your loop that is not yet attached to the DOM, populating it as you are now, then replacingsel_catswith that newselectat the end. That way, the DOM is only updated once.你的方法已经足够好了，除非你有很多项目添加到 sel_cats 中 - 你只添加到 DOM 一次。
提高效率的唯一方法可能是将选项存储为原始 HTML，然后在循环后分配：
Your way is good enough unless you have great many items added to
sel_cats- you add to the DOM only once.The only way to improve efficiency might be to store the options as raw HTML then assign that after the loop:
将选择列表分配给变量后，使用其父标签上的removeChild将其从dom中删除。然后，您可以在将选择列表添加回 dom 之前在循环中使用appendChild。
Once you have the select list assigned to a variable, remove it from the dom using removeChild on its parent tag. You can then use appendChild in the loop before adding the select list back into the dom.
你的代码太臃肿了，DOM 0 方法会快得多。
如果速度确实很重要，则存储现货+批量大小&&我< cats.options.length 在变量中，这样它们就不会在每个循环中重新计算（现代浏览器可能不会，但旧浏览器会这样做）：
Your code is way bloated, DOM 0 methods will be much faster.
If speed really matters, store spot + batchSize && i < cats.options.length in variables so they aren't re-calcuated on each loop (modern browsers probably don't, but older ones did):