Что отобразит браузер при бесконечном обновлении текста элемента

Условие

Нужно понять, какой результат будет виден пользователю после выполнения следующего кода.

<html>
<head>
    <title>JS test 1</title>
</head>
<body>
    <div id="container">
    0
    </div>
    <<script>
    document.addEventListener('DOMContentLoaded', () => {
    const containerEl = document.getElementById('container');
    let cnt = 0;

    while(true) {
    containerEl.innerText = cnt++;
    }
    }
    );
    </script>
</body>
</html>

Определите, какой текст будет отображён в элементе <div id="container"> после загрузки страницы.

Ответ

Бесконечный синхронный цикл не даёт браузеру нормально обновлять экран. Наблюдаемого конечного значения нет: страница зависнет, даже если DOM-свойство непрерывно меняется.

innerText изменяет DOM синхронно, но показ кадров требует возврата управления браузеру. Пользователь обычно увидит ранее отрисованное 0 или незавершённую загрузку — конкретное видимое состояние зависит от того, успел ли пройти первый paint.

Лишний < перед script — ошибка HTML-разметки, но она не делает бесконечный цикл безопасным. Для обновляемого счётчика используйте ограниченный цикл с уступкой управления, таймер или requestAnimationFrame. Нельзя обещать, что браузер будет показывать каждое увеличение cnt; опасный пример запускать не требуется.