更快地操纵现有HTML或删除HTML然后重新创建它?

时间:2011-03-05 16:55:40

标签: javascript jquery performance repaint dom-manipulation

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

现在,我的问题是 - 创建元素一次更快,然后在每次后续调用时更新生成的HTML,或者更快地重新创建每个元素,empty()祖父元素(将摆脱它父ul),然后重新挂起新创建的ul(我现在正在做)?

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

我正在和一位同事说话,他说最好只在创建HTML元素后更新它们,而不是每次都重新创建它们。我正在考虑走这条路,但后来我认为更新现有的li s实际上会导致50个元素的重绘,而只是用empty()做一个重大的元素,然后重新出现新创建的{ {1}}。

想法?

2 个答案:

答案 0 :(得分:2)

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

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

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

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

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

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

答案 1 :(得分:1)

我建议您首先分析您的代码。过早优化是万恶之源。