Javascript 复杂网页上的progressbar更新非常慢，如何加快？

我制作了一个基于

在这个网页上，我有两个实时组件。一个是图表，基于

另一个组成部分是

引导progressbar由html divs生成：

<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
       <span class="sr-only">70% Complete</span>
   </div>
</div>

70%完成

这两个组件都由websocket实时更新

我注意到图表本身非常快。但一旦添加progressbar，整个网页甚至整个机器都会变得非常慢。我猜这是因为progressbar的每一点更新，浏览器都会重新呈现整个页面，因为progressbar是一个div

---

我不知道怎么解决这个问题。我考虑使用react作为它的虚拟dom。但是如果最终我需要更新dom，速度似乎是一样的。

你说你自己用图表来做，这很好。你试过进度条吗？如何通过套接字更新每一个？服务器上是否有更多的工作要更新进度条？@krillgar是的，进度条本身也很慢。更新方式为@krillgar，服务器端不再进行任何工作。唯一的变化是从名为dat.gui的轻量级ui移动到引导模板。使用dat.gui（也有progressbars），性能还可以。只有在使用引导时，它才变得如此缓慢。不要访问DOM来更新进度，使用本地状态以反应的方式进行。