Правильно ли "размещать скрипты внизу"?
В разделе «Лучшие практики по повышению производительности веб-сайта http://developer.yahoo.com/performance/rules.html» Стив Содерс упомянул одно правило «Переместить скрипты вниз». Это немного сбивает с толку. На самом деле, я заметил, что многие веб-страницы, которые не помещают скрипт внизу, в то время как YSlow по-прежнему отмечают A для этих страниц.
Итак, когда мне следует следовать правилу «Помещать скрипты внизу»?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Иногда у вас нет выбора, кроме как разместить скрипты в определенном месте на странице. Однако, если вы поместите скрипты внизу страницы, браузер не будет прерывать рендеринг, чтобы загрузить JS-движок для обработки вашего скрипта (что может быть дорогостоящим, если у вас есть циклы, выполняющиеся большое количество раз) и, вероятно, будет отображать ранний просмотр страницы раньше.
@Draemon: например, используя document.write в середине страницы для создания некоторых тегов. Да, вы можете дождаться загрузки страницы и затем установить innerHTML какого-либо элемента. Это не то, что я имею в виду. Я имел в виду возможность помещать скрипты внизу, а без рефакторинг кода.
Хорошо, я бы назвал такой код сломанным. Я не понимаю, почему вы ожидаете, что не измените код, но технически я понимаю вашу точку зрения.
Как насчет небольших встроенных фрагментов <script> </script>, которые просто инициализируют данные? Это откладывает загрузку ранее заявленных изображений и т. д.?
Я не уверен, что это проблема производительности (может быть), но я был на презентации Microsoft, и докладчик сказал, что веб-пауки иногда читают только первые x символов на веб-странице, чтобы проиндексировать ее. Таким образом, если у вас много скриптов, ваш контент может быть недоступен и проиндексирован должным образом (и рейтинг страницы вашего сайта не будет таким высоким).
Код может ссылаться на объекты DOM, которые еще не были созданы, - это самая очевидная причина, о которой я могу думать.
Код не обязательно запускается сразу после загрузки. Вы можете отложить запуск, вызвав функции в событии позже.
Да, это другой способ, но не обязательно лучший. Не используйте обходной путь, если вы можете избежать проблемы с помощью хорошего стиля кодирования. И тогда у вас есть возможность наборов фреймов и т. д.
Причина, по которой страницы со сценариями вверху по-прежнему получают оценку «А», заключается в том, что это не так важно, как другие улучшения производительности, которые можно было бы сделать.
Каждое правило взвешено, поэтому некоторые правила влияют на оценку ySlow больше, чем другие.
Я всегда помещаю скрипты внизу. Есть очень мало причин, по которым нужны скрипты вверху вашей страницы. Единственная причина, по которой я могу думать, это то, что вам нужен ваш JavaScript для выполнения немедленно перед чем-либо еще на странице, что довольно редко.
Когда пользователь запрашивает страницу с вашего сайта, HTML-код страницы начинает потоковую передачу в браузер. Как только браузер обнаруживает тег для внешнего изображения, скрипта, файла CSS и т. д., Он одновременно начинает загрузку этого файла.
Если вы поместите свои скрипты внизу страницы, они будут загружены последними. Другими словами, HTML-содержимое / структура / css / изображения вашей страницы / приложения будет загружено первым, и что-то может появиться в браузере быстрее; Вашим пользователям не нужно ждать завершения загрузки сценария, прежде чем они увидят что-то в вашем приложении.
Можете ли вы привести пример, когда «у вас нет другого выбора, кроме как разместить скрипты в определенном месте на странице»?