javascript - 许多 DOM 元素的性能与背景重复

标签 javascript css performance dom

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 5 年前

我想绘制实时发生的“事件”时间线 - 时间线由垂直刻度的“标尺”、每分钟的文本时间戳和描述事件类型的图标组成。

我的问题是尺子。它应该以分钟为间隔绘制一个“高”垂直刻度。每轮分钟线之间的间隔分为 25 个较小的间隔,每个间隔都标有“短”刻度。每 5 个“短”刻度中有一个会被赋予“中等”高度。

目前,我通过创建许多 span 元素来做到这一点 - 每 25 分钟 1 个。当 session 长于 12 或我使用 css (visibility:hidden) 隐藏一些跨度时 - session 越长,我隐藏的元素越多。无论如何,这会导致我的 DOM 包含大量跨度元素。

我考虑过尝试使用 background-repeat 来避免许多 span 元素 - 但问题是这实际上会对性能产生任何影响吗?绘制许多 DOM 元素和重复背景图像有什么区别?

谢谢

最佳答案

背景重复要快很多倍,并且随着您添加元素,性能会有所不同,有利于背景重复。

是:

10 个元素与背景重复 = 背景重复快 10 倍
100 元素 Vs 背景重复 = 背景重复快 1000 倍 等等等等

关于javascript - 许多 DOM 元素的性能与背景重复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48558626/

上一篇:php - Woocommerce 日期选择器始终开启

下一篇:javascript - 在 jquery 中显示来自 json 的 Div 中的数据

相关文章:

javascript - 无法使用 DynamoDB 节点 SDK docClient 从 DynamoDB 表读取项目

php - 使用 Zend Json Server,ajax 调用在 css 弹出窗口中列出某些信息

java - 使用带有 Swing 组件的 RMI 代理时性能不佳

Javascript 未签名短灰度图像

javascript - 如何将项目插入到特定索引处的数组中(JavaScript)

javascript - 我该如何修复这个 javascript 新闻水平自动收报机?

python - 有效地计算数组中 N 个最小数字的总和

c# - 字符串与 StringBuilder

javascript - 如何用文字和图片做简单的 Facebook 状态发布

javascript - 为什么输入元素的值没有改变?