在网页上呈现许多元素的最佳方式？

【问题标题】：Best way to render many element on a webpage?在网页上呈现许多元素的最佳方式？
【发布时间】：2018-05-23 19:46:16
【问题描述】：

我正在使用 javascript 构建一个包含许多移动图形/文本元素的网页，我为每个元素使用div，但在我的手机上速度很慢。有没有让它更快的提示？例如，如果我的容器 div overflow 样式设置为 hidden 它会更快。

使用 SVG 还是其他东西更好吗？

【问题讨论】：

是的：不要。减少您使用的动画数量。您将获得很多、很多更好的网站可访问性。
我想这总结了答案：stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div
@NiettheDarkAbsol 我需要很多元素。你投反对票了吗？

标签： javascript html optimization

【解决方案1】：

处理 DOM 元素是一件繁重的事情，即使在桌面浏览器上也是如此，而且效率也很低。但是有很好的库可以处理 DOM 元素，例如动画化它们、移动它们、以编程方式设置它们的样式等等......。例如，JQuery 使得跨不同平台/浏览器组合更容易、更健壮。但是缓慢的问题在于 DOM 本身，而不是 JS，也不是你编写的代码以及你如何处理它。

所以你是对的！您最好使用 DOM 以外的其他东西，SVG 使事情变得更好。老实说，我对此知之甚少，每次看到它的语法时，都感到害怕！但我知道它有自己的动画系统，并且比其他 DOM 元素更轻量级。

但我建议你的是画布。它是 HTML5，速度更快，语法也比处理 DOM 元素（即 div）和绘制 SVG（即 80 M 62.5 D 10）更漂亮。 Canvas 使用漂亮的 JS 函数 API，逻辑上易于理解和设计。你所做的只是纯JS。事实证明，canvas 的性能也很棒！例如：https://robostorm.io/

它提供了 Adobe Flash 的美观和功能，但具有 JS 的可移植性：)

【讨论】：