How the Browser UI Thread Queues and Executes UI Updates

All operations that update the user interface are performed by the browser’s UI thread.

The UI thread maintains a queue; each UI‑update operation is added as a task, and when the thread is idle it processes the tasks sequentially.

Example:

<button onclick="doClick()">
  Click test
</button>
<script>
function doClick() {
  var div = document.createElement("div");
  div.innerHTML = "test";
  document.body.appendChild(div);
}
</script>

When the user clicks the button, the UI thread creates two tasks: the first updates the button’s click‑state style (a default browser operation), and the second executes doClick(). After doClick() creates a new element and appends it to the body, the UI thread adds another task for this UI update, which will be processed later when the thread becomes idle.