gpt4 book ai didi

javascript - 更快地操作现有的 HTML 或删除 HTML 然后重新创建它?

转载 作者:行者123 更新时间:2023-11-29 10:53:30 24 4
gpt4 key购买 nike

我正在做的这个项目,我有一个元素列表,并将它们转换成一个“图形”(不是真正的图形,但你可以称之为伪图形)。我有我的数据集,我运行 for遍历数据然后创建一个 li每个元素,创建和父级 ul , 附加 li s,然后将父元素附加到页面上已有的另一个 DOM 元素(我们称它为祖父元素)。之后,我必须根据用户交互对该列表进行后续更新。
此外,这都是在使用 jQuery 的上下文中进行的。

现在,我的问题是 - 创建元素一次然后在每次后续调用中更新生成的 HTML 会更快,还是只重新创建每个元素会更快,empty()祖 parent 元素(这将摆脱父元素 ul ),然后重新添加新创建的 ul (我现在正在做什么)?

请记住,当我重新创建 li s,它们根本不在 DOM 中,因此在重新创建它们时没有重绘/回流。重绘仅在我重新添加新创建的 ul 时发生.

我和一位同事谈过,他说最好在创建 HTML 元素后更新它们,而不是每次都重新创建它们。我正在考虑走这条路,但后来我想到更新现有的 li s 实际上会导致重绘 50 个元素,而不是只用 empty() 重绘一个。然后重新附加新创建的 ul .

想法?

最佳答案

作为rsp says ,您需要分析您的解决方案,因为哪种解决方案最快取决于标记的结构及其运行的特定浏览器。当然,如果您对当前获得的速度不满意,那么这一切努力也是值得的!

然而,共有三种基本方法,每种方法都可能最快。第一个只会导致一次重绘;其他只有两个,如果你选择好你的父节点。

  1. 将您的新内容构造为 HTML 字符串 ( [...].join("") ),然后使用 .html() 应用. 优点:通常比方法 #2 更快。 缺点:不一定太多,可能会留下陈旧的 jQuery 数据/事件(即,如果您不小心,可能会泄漏)。

  2. 使用 jQuery 在文档之外构建新内容(例如,将所有 <li> 放入 <ul> 中,然后在构建完成后将 <ul> 插入文档中), 然后正常插入。 优点: 往往比方法 #1 更容易阅读。 缺点:标记越复杂,性能越差。

  3. 从文档中删除现有节点(理想情况下,单个父节点,如 <ul> ),进行更改,然后重新插入它们。 优点: 可能比方法 #2 更清晰、性能更好,尤其是在复杂标记上。 缺点:如果渲染之间的元素数量发生变化,则变得更加复杂。

即使您进行了大量更改,最后一个也只会导致两次重绘,因为只有最初的删除和最终的插入会影响文档。更改文档外的元素不会导致重绘。

关于javascript - 更快地操作现有的 HTML 或删除 HTML 然后重新创建它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5205228/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com