复杂网页上的进度条更新速度非常慢，如何加快速度？

Question

我根据bootstrap template

创建了一个网页

在这个网页上，我有2个实时组件。一个是基于dygraphs

的图表

另一个组件是bootstrap progressbar。

bootstrap进度条由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>

两个组件都通过websocket实时更新。

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

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