Помещает ли <script>в конце <body>фактическую загрузку страницы? - PullRequest
Новая
       22

Помещает ли <script>в конце <body>фактическую загрузку страницы?

0 голосов
/ 23 марта 2020

На каждой странице, касающейся оптимизации веб-сайта, четко указывается, что лучше ставить теги <script> в конце <body> вместо <head> или в начале или в середине <body>, и это происходит из-за загрузки scripts блокирует синтаксический анализатор, так как синтаксический анализ DOM приостанавливается, пока браузер выбирает внешний сценарий, а затем выполняет его, и только после этого анализ DOM может возобновиться. Таким образом, размещение тега <script> непосредственно перед закрытием <body> означает, что DOM прекратит синтаксический анализ sh, и содержимое будет отображено, а затем скрипт запустится. 

<html>
  <head>
    <script src="script.js"></script> <!-- bad -->
  </head>
  <body>
    <div>
      Hello World
    </div>
    <script src="script.js"></script> <!-- good-->
  </body>
</html>

Пока я получаю это, и я получаю, что вы также можете использовать теги async и defer для продолжения анализа DOM при извлечении сценариев, есть одна вещь, которая не имеет смысла для меня.

Если не использовать async или defer, а просто поместить <script> непосредственно перед закрытием <body>, анализ DOM все равно будет приостановлен, даже если он просто теперь должен проанализировать закрывающий тег </body>. Это означает, что если скрипт загружается непосредственно перед закрытием <body>, синтаксический анализ DOM останавливается до тех пор, пока скрипт не будет загружен и запущен, а затем синтаксический анализ DOM продолжается (в течение примерно 0,1 мс, поскольку требуется только анализировать закрывающий * 1024). * и </html>), и только тогда происходит первый рендер.

Я что-то здесь упускаю? Мне кажется, что размещение сценария в конце тела на самом деле не ускоряет начальный рендер, поскольку синтаксический анализ все еще блокируется, даже если 99,9% DOM было проанализировано. Даже если загруженный скрипт работает медленно, начальный рендеринг все равно будет отложен.

...