Как лучше грузить скрипты на странице?

Question

[LFFATE]

Добрался до gulp'a, чтобы объединять скрипты и минифицировать их. Однако созрел вопрос, как их лучше грузить. Проект большой, поэтому будет этап перехода от старой системы к новой (в старой системе часть скриптов вписывалась прямо в шаблоне страницы в теге script). Значит, например, jquery однозначно надо грузить в шапке. Свои скрипты можно убрать в футер. Так?

Есть такая штука ещё как RequireJS, который грузит динамически скрипты при необходимости. Какой смысл его использовать, если он нагружает сервер лишними запросами, а скрипты рекомендуется именно объединять в один файл?

Comments

[Artem Verbat]

Свои скрипты можно убрать в футер. Так? - нет, в хед с атрибутом defer

[Artem Verbat]

"jquery однозначно надо грузить в шапке" - нет, его нужно бандлить в общий файл, и уже его подключать в шапке с атрибутом defer

[LFFATE]

Artem Verbat: defer откладывает запуск скрипта, пока не прогрузится страница. В условиях я написал, что в коде страницы есть скрипты. А теперь скажите, что сработает раньше, обращение к jQuery или его объявление.

[Artem Verbat]

LFFATE: верно, упустил этот момент

Answer 1

[Олег]

Может и не прав, но для валидации https://developers.google.com/speed/pagespeed/insights/
Перед </body> делаю так:

<!--Динамическая подгрузка стилей и скриптов для валидатора-->
   <script>
    var script = document.createElement('script');
    var link = document.createElement('link');
    /*Подключаем стили*/
    document.getElementsByTagName('head')[0].appendChild(link);
    link.setAttribute('rel','stylesheet');
    link.setAttribute('type','text/css');
    link.setAttribute('href','css/style.css');
    /*Подключаем скрипт*/
    document.getElementsByTagName('head')[0].appendChild(script);
    script.type = 'text/javascript';
    script.src= 'js/script.js';
    </script>

Файл script.js содержит подключения

require('script1.js')
require('script2.js')
require('script3.js')
...
require('scriptN.js')

Comments

[Artem Verbat]

пора забыть про добавление типов к script и link
Скрипты добавлять в head с атрибутом defer
Стили - таким образом виден голый хтмл, так что тоже в head их

[Олег]

Artem Verbat: стили в head прописывать только для блока, который будет занимать весь экран. Пока все подгрузится, пользователь курит первоначальную инфу

[Artem Verbat]

Олег: ну разве что цсс весит настолько много, к примеру на проектах типа лендингов это просто не актуально, да и вообще мне страшно представить проект, где это действительно нужно

[LFFATE]

Олег: как вариант сделать прелоадер для сайта.

[Олег]

LFFATE: И как google speed отобразит?

[LFFATE]

Олег: он его даже не видит. Это же просто контейнер со стилем. яваскриптом удаляется после загрузки страницы.

Answer 2

[Shad30]

Вот тут довольно интересный метод загрузки скриптов

https://github.com/agragregra/optimizedhtml-start-...