响应式设计 - DOM 元素限制和 HTML 与 SVG 性能

Question

我创建了每年的“热图”，其中每一天都是 div 正方形由其他三个 div 元素组成。 它一起给了我超过一千个 DOM 元素。在我不想在我的平板电脑（HP Slate 10）上看到这张地图之前，一切都很好。当我在平板电脑上打开它时，它会立即崩溃。

（我删除了 JS，只加载了 HTML 和 CSS，但这没有帮助，所以我确定这不是 JS 问题）

单日 HTML：

<div class="addTooltip tileCell" data-day="10" data-month="8">
    <div class="tile">
        <div class="face side_a"></div> <!-- I'm using this to do animation -->
        <div class="face side_b"></div> <!-- I'm using this to do animation -->           
    </div>        
</div>

我的问题：

• 是否存在不应超过的合理数量的元素？

• 如果我使用 SVG 创建相同的地图会更快吗？

编辑：我的问题的答案是肯定的 - SVG 在所描述的情况下表现得更好。

Answer 1

如果您的问题是 DOM 元素过多，并且您没有任何预防性交互要求，canvas 将是最佳选择，因为将“元素”添加到画布绘图不会添加到 DOM。