Javascript-更快地处理现有的HTML或删除HTML,然后重新创建它？

我正在从事的这个项目,我有一个元素列表,并将它们转换为“图形”(不是真正的图形,但是您可以将其称为伪图形).我有我的数据集,我对数据运行了一个for循环,然后为每个数据创建一个li元素,创建并父ul,附加lis,然后将父附加到另一个DOM元素(我们将其称为祖父母)在页面上.之后,我必须基于用户交互对该列表进行后续更新.
而且,这都是在使用jQuery的上下文中.

现在,我的问题是-创建元素一次,然后在每个后续调用中更新结果HTML还是更快,或者重新创建每个元素,empty()grandparent元素(这将摆脱父ul)重新创建是否更快？然后重新附加新创建的ul(我现在正在做)？

请记住,当我重新创建lis时,它们根本不在DOM中,因此在重新创建它们时不会进行任何重画/重排.仅当我重新添加新创建的ul时才发生重绘.

我正在和一位同事交谈,他说最好是在创建HTML元素后立即更新它们,而不是每次都重新创建它们.我当时正考虑走这条路线,但后来我认为更新现有的lis实际上会导致重绘50个元素,而不是只用empty()做一个大的元素,然后重新添加新创建的ul.

有什么想法吗？

解决方法:

作为rsp says,您将需要描述您的解决方案,因为解决方案的最快速度取决于标记的结构及其运行的特定浏览器.当然,如果您对当前的速度不满意,那么也值得进行所有这些工作！

但是,存在三种基本方法,每种方法可能是最快的.第一种只引起一次重涂；如果您选择好父节点,则其他只有两个.

>将新内容构造为HTML字符串([…].join(“”)),然后与.html()一起应用.优点：通常比方法2快.缺点：不一定太多,可以留下陈旧的jQuery数据/事件(即,如果您不小心的话,可能会泄漏).
>在文档外部使用jQuery构造新内容(例如,将所有< li&s s放入< ul>中,然后在构造完成后将< ul>插入文档中),然后插入normall.优点：往往比方法1更容易阅读.缺点：标记越复杂,效果越差.
>从文档中删除现有节点(最好是单个父节点,如< ul>),进行更改,然后重新插入.优点：可能比方法2更清晰,性能更高,尤其是在复杂标记上.缺点：如果元素数量在渲染之间改变,则变得更加复杂.

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

标签：dom-manipulation,repaint,performance,javascript,jquery
来源： https://codeday.me/bug/20191208/2093072.html