Параллельная загрузка JavaScript и CSS файлов без прерывания

парсинга страницы

Old school

• Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен.

Способы ускорить загрузку страницы

• — поместить стили и скрипты прямо в страницу;— установка аттрибутов async/defer тегу script;— склеить все скрипты в один файл;— помесить ссылки на скрипты в конец body;— разместить все файлы на CDN/на разных хостах;— свой вариант…

Помещение скриптов и стилей прямо в страницу

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

Установка атрибутов async/defer тегу script

Установка атрибутов async/defer тегу script

Склеивание скриптов и стилей

Помещение stylesheet в head, а script — в конец body

• Достойно упоминания и использования, но в этом случае, как и в описанных выше, до момента document.ready могут быть неразрешённые зависимости между скриптами, и если для jQuery с плагинами это допустимо, то для варианта, когда мы загружаем библиотеку API Facebook'а или VKontakte, и хотим тут же запустить наш скрипт, который пошлёт на API запрос определения, залогинен ли пользователь, это сулит костылями, либо загрузкой библиотеки API в начале страницы, блокируя её отображение.

Загрузка с CDN

Одноточечная дистрибуция (слева) и дистрибуция средствами CDN (справа)

Свое решение

• Что если попробовать загружать скрипты в тот момент, пока страница грузится, но не выполнять их, и вообще скрывать от браузера, что это скрипты до того момента, пока они не догрузились, чтобы не блокировать первичное отображение страницы?

Заключение— встроить в head страницы script, указывающий на

загрузчик;— встроить inline скрипт, использующий загрузчик для подгрузки других скриптов и стилей;— объединять скрипты и стили, использующиеся только совместно, в один для минимизации количества HTTP запросов;— минимизировать скрипты и стили;— убедиться в том, что сервер пакует передаваемые данные gzip'ом;— убедиться в том, что сервер правильно кеширует;— осторожно и вдумчиво использовать сторонние CDN и дополнительные хосты.