I have a system that need to show logs of locations in real-time. My API returns 1000 rows per second and I need to show all rows in DOM. However, a row is added to table DOM every 50ms. Hence, I have a queue to store all objects that are waiting for displaying in DOM. Here is my queue array:
queue = [
{"datetime": "20240429110000001", "id": "abc1", "country": "USA", "lat": "37.77777", "lng": "-122.5"},
{"datetime": "20240429110000002", "id": "abc1", "country": "USA", "lat": "36.66666", "lng": "-120.5"},
{"datetime": "20240429110000003", "id": "abc1", "country": "USA", "lat": "35.55555", "lng": "-118.5"},
{"datetime": "20240429110000004", "id": "abc1", "country": "USA", "lat": "34.44444", "lng": "-116.5"}
]
And here is my table:
<thead>
<tr>
<th>Datetime</th>
<th>ID</th>
<th>Location</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
<tbody id="live-data">
<tr id="item-0"></tr>
</tbody>
Each one is pushed between header row and the first row in tbody. When the table reaches 50 rows, the next row showing to DOM, it will remove the last row of table (meaning the oldest time). Here is my JQuery to insert row:
let preID = 0;
setInterval(() => {
$(`
<tr id="item-${queue[0].id}">
<td>${queue[0].datetime}</td>
<td>${queue[0].id}</td>
<td>${queue[0].country}</td>
<td>${queue[0].lat}</td>
<td>${queue[0].lng}</td>
</tr>
`).insertBefore(`#item-${preID}`);
preID = queue[0].id
// Map update function (AMCharts5)
mapUpdate(queue[0])
queue.shift();
}, 50);
After updating, I use queue.shift() to remove the first element in queue. If there are 50 rows in table, I use the following code to remove the oldest row.
$(`#item-${oldestID}`).remove();
My problem is, this code is running smoothly after a minute or two (along with map update), but after that, DOM is updating slower and slower, and may get crashed at some points. So what should I need to improve the performance when updating DOM? Because this system must be run 24/24 hours.
