DOM 插入：某些标签类型在插入 DOM 时是否更快？答案

【问题标题】：DOM Insertion: Are some tag types faster when inserting into DOM?DOM 插入：某些标签类型在插入 DOM 时是否更快？
【发布时间】：2010-01-13 15:42:17
【问题描述】：

我有一个网页，它使用客户端模板根据通过 ajax 调用获得的 json 更新部分页面。

目前我正在使用一个无序列表，在每个 Li 中我都有标记来显示有关产品的信息。

我很想知道，某些标签在插入 DOM 时是否比其他标签更快？也就是说，我是否应该将我的 ul 更改为其他标签，或者更改 Li s 中的标签？

谢谢

【问题讨论】：

【解决方案1】：

最快的方法是将 HTML 构造为文本并设置一次innerHTML 属性。

另一种方法是创建一个document fragment，然后将其放入 DOM。

插入一个标签或另一个标签的速度可能会有所不同，但在浏览器之间会是微不足道的和不同的。

问题是接触 DOM 是一项非常昂贵的操作 - 如果您追求的是速度 - 尽量减少它。

【讨论】：

你做的标签插入点很有趣，我认为答案会是什么。然而，我问的原因是因为我有一位同事建议替换此布局以使用表格。他的理论是基于这里的这篇文章：blogs.nitobi.com/dave/2007/01/30/html-rendering-pains 我很惊讶也很怀疑，因为使用表格与我过去几年在布局中学到的一切背道而驰。有什么意见吗？再次感谢
其中一些可能是正确的，但我不会仅仅为了速度而选择表格。是的，它可能会快 3 毫秒——但还有其他一些事情，比如延迟，这将花费我 300 毫秒。看看我添加的关于性能的最后一个链接 - 这是一个非常好的来源。
延迟是什么意思？这是css渲染的延迟吗？很抱歉挖了这个。刚刚和同事讨论过。
@benwebdev：不，我指的是经典案例中的延迟——html从服务器到客户端的时间，服务器等待数据库响应的时间。

【解决方案2】：

首先，这完全取决于浏览器。

话虽如此，不同标签的渲染时间差异应该可以忽略不计。使用提供最佳语义的标签。不用担心不同标签的渲染时间。

【讨论】：