更快地操作现有 HTML 或删除 HTML 然后重新创建它？
我正在从事的这个项目，我有一个元素列表并将它们转换为“图表”（不是真正的图表，但您可以将其称为伪图表）。我有我的数据集，我对数据运行 for 循环，然后为每个数据创建一个 li 元素，创建父级 ul，附加 li ，然后将父级附加到页面上已有的另一个 DOM 元素（我们将其称为祖父级）。之后，我必须根据用户交互对该列表进行后续更新。
而且，这都是在使用 jQuery 的情况下进行的。
现在，我的问题是 - 创建元素一次然后在每次后续调用时更新生成的 HTML 是否更快，或者重新创建每个元素，empty() 祖父母元素（这将得到删除父级 ul），然后重新附加新创建的 ul （我现在正在做的事情）？
请记住，当我重新创建 li 时，它们根本不在 DOM 中，因此重新创建它们时不会发生重绘/回流。仅当我重新附加新创建的 ul 时才会发生重绘。
我正在与一位同事交谈，他说最好在创建 HTML 元素后立即更新它们，而不是每次都重新创建它们。我正在考虑走这条路，但后来我认为更新现有的 li 实际上会导致对 50 个元素进行重新绘制，而不是仅使用 empty() 进行一个巨大的元素重新绘制code> 然后重新附加新创建的 ul。
想法？
This project I am working on, I have a list of elements and convert them into a "graph" (not a true graph, but you can call it a psuedo one). I have my data set, i run a for loop over the data and then create a li element for each one, create and parent ul, append the lis and then append the parent to another DOM element (we'll call it grandparent) already on the page. After that, i have to make subsequent updates to that list based on user interaction.
Also, this is all in the context of using jQuery.
Now, my question is - is it faster to create the elements once then update the resulting HTML on each subsequent call or is it faster to just recreate each element, empty() the grandparent element (which would get rid of the parent ul) and then reappend the newly created ul (which I am doing now)?
Keep in mind that when I am recreating the lis, they are not in the DOM at all so there is no repaint/reflow while recreating them. The repaint only happens when I reappend the newly created ul.
I was speaking to a coworker and he said it would be better to just update the HTML elements once they are created rather than recreating them every single time. i was thinking of going this route, but then I thought that updating the existing lis would actually cause a repaint on say 50 elements versus just doing one massive one with the empty() then reappending the newly created ul.
thoughts?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
作为 rsp 说，您需要分析您的解决方案，因为哪种解决方案最快取决于您的标记结构及其运行的特定浏览器。当然，只有当您对当前的速度不满意时，才值得付出所有这些努力！
然而，存在三种基本方法，每种方法都可能是最快的。第一个仅导致一次重绘；如果你选择好你的父节点，其他的只有两个。
将新内容构建为 HTML 字符串 (
[...].join(""))，然后使用.html()进行应用。 优点：通常比方法 #2 更快。 缺点：不一定太多，可能会留下过时的 jQuery 数据/事件（即，如果您不小心，可能会泄漏）。使用 jQuery 构建新内容 在文档之外（例如，将所有
中，然后插入code> 构建完成后插入文档），然后插入 normall. 优点：往往比方法 #1 更容易阅读。 缺点：标记越复杂，性能就越差。从文档中删除现有节点（理想情况下，单个父节点，如
< /code>)，进行更改，然后重新插入它们。 优点：可能比方法 #2 更清晰、更高效，尤其是在复杂标记上。 缺点：如果渲染之间的元素数量发生变化，就会变得更加复杂。即使您进行了大量更改，最后一个也只会导致两次重绘，因为只有初始删除和最终插入会影响文档。更改文档外部的元素不会导致重新绘制。
As rsp says, you'll need to profile your solutions, as which will be fastest depends both on the structure of your markup and on the particular browser its running on. It's also, of course, only worth going through all this effort if you're unhappy with the speed you're currently getting!
There are three basic approaches, however, each of which could be the fastest. The first only causes a single repaint; the others only two, if you choose your parent node well.
Construct your new content as HTML strings (
[...].join("")), then apply with.html(). Pros: typically faster than method #2. Cons: not necessarily by much, can leave stale jQuery data/events (i.e. can leak, if you aren't careful).Construct your new content with jQuery outside the document (e.g. put all your
<li>s into a<ul>, then insert the<ul>into the document after construction is complete), then insert normall. Pros: tends to be easier to read than method #1. Cons: performs worse the more complex your markup gets.Remove the existing nodes from the document (ideally, a single parent node, like the
<ul>), make your changes, then reinsert them. Pros: may be clearer and more performant than method #2, especially on complex markup. Cons: becomes much more complex if the number of elements changes between renderings.The last one only causes two repaints even though you're making a large number of changes, because only the initial removal and final insert affect the document. Changing elements outside the document doesn't cause repaints.
我建议首先分析您的代码。过早的优化是万恶之源。
I would suggest profiling your code first. Premature optimization is the root of all evil.