【问题标题】: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 中的标签?

谢谢

b

【问题讨论】:

    标签: javascript jquery dom client-side template-engine


    【解决方案1】:

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

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

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

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

    看看Stoyan Stefanov's performance tips

    【讨论】:

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

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

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-07-31
      • 2014-07-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多