性能：如何优化数千个DOM元素的布局？

Question

我已将a toy app用于将Unicode字符转换为其他编码（source code on GitHub）。

这个想法是网页显示了大约7000个unicode字符的列表，以及它们在其他一些编码中的等价物，比如LaTeX和Mathematica。用户可以使用搜索字词过滤这些字符。

很明显，渲染数千个HTML元素会带来一些性能损失，而挑战在于如何优化性能。

到目前为止，我已尝试过：

• 最小化/批量更改DOM

  • 使用某些虚拟DOM技术，在本例中使用React
  • 预渲染HTML和load JavaScript asynchronously，以便解析庞大的JavaScript文件可以与计算布局同时进行
  • 最小化DOM树插入/删除只需在不显示某个字符时将display CSS属性更改为gone

• 最小化DOM树复杂性

  • 让DOM保持尽可能平坦
  • 默认情况下，只显示最有趣的元素（LaTeX + Mathematica）。

我在考虑：

• Using Flexbox：

    

  新的Flexbox通常比旧的Flexbox或基于浮动的布局模型更快。

  然而，在我的情况下，我不明白为什么会这样。

• 使用某种视图回收库来回收DOM元素并仅呈现应该可见的内容
• 修复某些元素的尺寸，以便更快地完成布局计算。这会有用吗？
• 异步执行布局计算，但我认为这是不可能的？

我还能尝试什么？