div树深度会有性能损失吗？

Question

之间是否存在性能差异：

    <div>
      <a> ... </a>
    </div>

和

<div>
  <div>
    <div>
      <a> ... </a>
    </div>
   </div>
 </div>

对于浏览器我认为没有意义，但在我的情况下，我有200个在移动设备上运行的项目列表。

所以我对表现很敏感。

谢谢，

Answer 1

是的，存在一些潜在的性能问题。你应该考虑：

• 下载时间。更多HTML意味着更大的文件，下载时间更长。

• DOM大小。更多元素意味着页面使用更多内存。

• 渲染时间。更多元素意味着页面绘制速度更慢。

您最常注意的通常是下载时间。如果页面仍然合理地小，你应该没问题。如果要动态创建大量元素，那么在没有加载时间的情况下，其他两个元素可能会很明显。

尽管如此，只有200件物品不应该成为一个大问题。

Answer 2

就移动而言，DOM树嵌套越多，性能问题的可能性就越大。

当DOM树嵌套太多时，遍历DOM树将是PITA。维护平面DOM树总是更好。

当DOM嵌套很多时，甚至样式也会变得困难。

就页面加载速度而言，内容越少，页面速度就越高。如果您要在同一页面中嵌套太多内容，则会影响页面的加载。

Answer 3

我认为您应该使用以下部分对其进行优化：

<section> </section> => for your content 

但是，为什么使用没有id和class的3个div？

你应该像这样减少你的DOM：

<div> <a href="/yourlink" title="Your title" target="_blank" rel="Your title">Content</a>   </div>

您应该减少DOM加载内容以提高负载，如果您没有类和ID，请不要使用三个div：）