Chrome загружает события JS до загрузки DOM

Question

Я проводил тестирование javascript на chrome v71.0.3578.98 с window.onload, и я испытываю js, происходящее до загрузки DOM

Ссылка gif: https://imgur.com/nxHYjRr

вот код, только что завернутый в простой HTML-тег.

<h1>Title...</h1>
<p>lorem500...</p>
<script>
  function pageLoad() {
    alert('I\'m alive');
  }
  window.onload = pageLoad;
</script>

Итак, на этой базовой странице я попытался запустить его в chrome v71, и сначала запустился javascript, но в firefox опера загрузилась после загрузки страницы, как и ожидалось.Есть мысли?

Answer 1

Проблема в том, что alert блоки - пока отображается всплывающее окно alert, дальнейшая визуализация страницы предотвращается, а при запуске window.onload страница может вообще не отображаться вообще особенно если до этого не было много HTML. Все элементы do существуют в документе при запуске onload, они просто могут не отображаться. (Зависит от браузера)

alert очень неудобен для пользователя, а также с ним трудно работать (как вы столкнулись). Вместо этого используйте console.log или правильный модал:

<h1>Title...</h1>
<p>lorem500...</p>
<script>
  function pageLoad() {
    console.log('I\'m alive');
  }
  window.onload = pageLoad;
</script>

Если у вас было для использования alert, оповещайте только через мгновение setTimeout, что дает браузеру возможность раскрасить страницу до вызова alert на всякий случай, если браузер еще не отобразил страницу:

<h1>Title...</h1>
<p>lorem500...</p>
<script>
  function pageLoad() {
    setTimeout(() => {
      alert('I\'m alive');
    });
  }
  window.onload = pageLoad;
</script>