0

I made a webpage based on a bootstrap template

On this webpage, I have 2 realtime components. one is a chart, based on dygraphs

the other component is a bootstrap progressbar.

the bootstrap progressbar is made by 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>

Both components are updated in realtime by a websocket.

I noticed that the chart by itself is very fast. But as soon as the progressbar is added, the entire webpage and even the entire machine becomes very slow. I guess this is because every bit of progressbar update, the browser rerender the entire page, as the progressbar is a div.

I don't know how to solve this. I thought about using react for its virtual dom. but if eventually I need to update the dom, the speed seems to be the same.

Bill Yan
  • 3,369
  • 4
  • 27
  • 42
  • You say you do it with the chart by itself, and it is fine. Have you tried the progress bar by itself? How do you update each through the socket? Is more work being done on the server to update the progress bar? – krillgar Mar 23 '17 at 16:02
  • @krillgar yes, the progress bar it self is slow too. updated by suggested way http://stackoverflow.com/questions/21182058/dynamically-change-bootstrap-progress-bar-value-when-checkboxes-checked – Bill Yan Mar 23 '17 at 21:58
  • @krillgar no more work is done on the server side. the only change is moving from a light weight ui called, dat.gui to the bootstrap template. with dat.gui (which also has progressbars), the performance was ok. only when using bootstrap, it got so slow. – Bill Yan Mar 23 '17 at 22:00
  • Do not access DOM to update the progress, do it in react way using local state. – Khalid Azam Mar 27 '17 at 17:12

0 Answers0