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

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

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

【问题讨论】:

标签: 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/

它提供了 Adob​​e Flash 的美观和功能,但具有 JS 的可移植性:)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-12-10
    • 1970-01-01
    • 2012-10-22
    • 1970-01-01
    • 2011-07-15
    • 2021-01-27
    • 1970-01-01
    • 2013-02-01
    相关资源
    最近更新 更多