Возможный дубликат:
Javascript в нижней части страницы?
Я видел комментарий в некоторых примерах загрузки. В нем говорится:
JavaScript размещен в конце документа, чтобы страницы загружались быстрее
Это правда? Если да, то как это работает?
"JavaScript помещен в конце документа, чтобы страницы загружались быстрее" TRUE?
Ответ 1
Существует ряд преимуществ
- Нет необходимости проверять, загружается ли DOM, поскольку сценарии в конце, вы точно знаете это.
- JavaScript scriptфайл должен быть загружен полностью до того, как веб-браузер даже начнет следующий файл JavaScript. Эффект от этого, если файлы JavaScript включены в начало документа, заключается в том, что он будет визуальным перед тем, как конечный пользователь увидит фактическую страницу. Это полностью избегают, если вы включаете файлы JavaScript в конце документ.
Существуют также некоторые ограничения
Несмотря на то, что файлы JavaScript внизу помогают нам проблема задержки отображения страницы, создавая впечатление что каждая страница на веб-сайте загружается быстрее, у нее есть недостаток.
Если страница видна конечному пользователю, но файлы JavaScript еще не закончили загрузку, никаких событий не было применено к элементы все же (потому что каждый использует ненавязчивый подход, не так ли?) и пользователь может начать нажимать и не получать ожидаемые Результаты.
Если у вас есть надлежащие резервные копии, например. элемент ссылки, который получает контент через AJAX, если поддерживается JavaScript, и соответствующее событие было применяется, в противном случае это нормальная ссылка, ведущая к другой странице, затем проблема не так уж плоха. Тем не менее, это несколько раздражает.
Полезная статья Here
Ответ 2
Если браузер обнаруживает тэг <script>, HTMLRenderer по умолчанию останавливается, и парсер ECMAscript выполняет свою работу. HTMLRenderer не будет продолжаться до тех пор, пока все Javascript-коды не будут полностью evalutated.
Итак, если в вашем "верхнем" HTML-коде есть много тегов <script> и много кода Javascript, зритель вашего сайта может реализовать медленный процесс загрузки.
Существует несколько способов избежать этих проблем. Во-первых, как вы упомянули, просто поместив все Javascript-код и теги <script> в самую нижнюю часть элемента <body>. Это гарантирует, что по крайней мере все определения HTML-разметки и таблицы стилей были полностью загружены.
Другими параметрами являются имена тегов для самого элемента <script>. Такие, как async и defer, указывают браузеру /JS Parser, что эта заливка не требуется для загрузки и оценки сразу. Например,
<script async defer src="/foo/bar.js"></script>
HTML Renderer реализует тег и хранит его в очереди, но он не будет останавливаться и оцениваться напрямую.
Ответ 3
Большинство браузеров выполняют JavaScript и загружают страницу, используя тот же поток. Следовательно, в то время как JavaScript выполняется, страница не может загружаться. Таким образом, если на странице содержится много изображений или встроенного содержимого, эти ресурсы не будут загружаться до тех пор, пока JavaScript не завершит выполнение.
Именно по этой причине рекомендуется положить длинный синхронный код в конец документа или отложить его на загрузку при загрузке страницы или загрузке содержимого DOM. Однако современные браузеры обычно уведомляют пользователя о длинных сценариях блокировки и позволяют при необходимости прервать script.
Ответ 4
Также важно разместить их в конце страницы, указав их как async, используя атрибут HTML5 async. Это гарантирует, что синтаксический анализатор не останавливается и не анализирует их, а скорее продолжает поток загрузки страницы и параллельно загружает/анализирует JS.
Ответ 5
Логика этой концепции заключается в том, что, поскольку браузер делает ваш код "на лету", размещая все элементы html перед сценариями, он теоретически может загружаться быстрее, чем если бы у вас были сценарии сперва, если бы у вас было астрономическое количество скрипты для работы.
На практике, однако, никто никогда не должен сталкиваться с ситуацией, которая потребовала бы столько времени script, что это повлияло бы на время загрузки веб-сайта на более насущные узкие места в качестве полосы пропускания D/L.