Как работает рендеринг браузера относительно SetTimeout ???

Question

[Theory Theory]

<div id="progress"></div>

В первом случае - БЕЗ settimeout

let i = 0;
function count() {

    do {
      i += 100;
      progress.innerHTML = i;
    } while(i < 1e2)
    
    if(i < 1e5) count()
}

count();

Во втором случае - вызываем функция через settimeout

let i = 0;
function count() {

    do {
      i += 100;
      progress.innerHTML = i;
    } while(i < 1e2)
    
    if(i < 1e5) setTimeout(count, 0)
}

count();

Результат:
1 - появляется последнее значение 100000
2 - рендеринг после каждого settimeout (100 200 300 400 500.........100000)

Вопрос: Как я понял, после каждого выполнения Макрозадач (settimeout) происходит рендеринг ?????? или как браузер понимает, что нужно обновить результаты на странице ?

Answer 1

[twobomb]

Потому-что первый вариант синхронный, то есть пока не выполняться все действия, дальше браузер никуда не сдвинется и нечего не прорендерит.
Второй вариант асинхроннный, после setTimeout функция заканчивается и он делает рендер.