1

I would like to refresh a Bootstrap v4 table (https://getbootstrap.com/docs/4.0/content/tables) based on the values fetched from the server side, for example a REST API resource.

I am currently struggling with the different approaches below:

  • Websockets
  • Webworker
  • Recursive setTimeout + ajax polling
  • Any other and better solution?

My main requirement would be something that is refreshed every 500 ms or less (e.g. stock prices).

Also I am wondering how to handle the most efficiently possible the DOM rendering of the table.

Natalie Perret
  • 8,013
  • 12
  • 66
  • 129

1 Answers1

1

Web Workers can't directly interact with the DOM and your task is not that intensive.

I'd say WebSockets + DOM manipulation via (data) attributes and separate node insertion instead of a huge chunk of nodes inserted at once. It may be a bit slower, but there's not much of a difference and you might not even notice it. See Fastest DOM insertion

I'd update things separately because: 1) It's tidier and maintainable, 2) You don't need to worry about event delegation or reinitialization of particular stuff 3) The flow feels more natural instead of just getting a huge chunk of mark-up and "pasting" it in the DOM.

If you won't be adding new nodes and you will just listen for data changes on existing nodes, then I'd clearly suggest going for attribute-based changes.

Ravenous
  • 1,112
  • 11
  • 25
  • True about the web workers, forced to send everything to the main thread for updating the DOM. – Natalie Perret May 22 '18 at 00:41
  • If you don't have much data to worry about, you can just update data attributes on your elements and render the value they hold via https://css-tricks.com/css-content/#article-header-id-3 – Ravenous May 22 '18 at 09:19