Search code examples
javascriptajaxwebsocketbootstrap-4web-worker

How to refresh efficiently and periodically the contents of a bootstrap 4 table from a rest API?

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.

Solution

  • 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.