Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

параллельная загрузка Java script и css файлов без прерывания

902 views

Published on

  • Be the first to comment

  • Be the first to like this

параллельная загрузка Java script и css файлов без прерывания

  1. 1. Параллельная загрузка JavaScript и CSS файлов без прерывания парсинга страницы
  2. 2. Old school• Известно, что следуя идеям старой школы, а именно, добавляя ссылки на JS и CSS в страницы, может обернуться большим временем загрузки страницы. Браузер отображает страницу по мере скачивания, но останавливается, если натыкается на тег script со ссылкой, до того момента, пока скрипт не будет загружен и выполнен.
  3. 3. Способы ускорить загрузку страницы• — поместить стили и скрипты прямо в страницу; — установка аттрибутов async/defer тегу script; — склеить все скрипты в один файл; — помесить ссылки на скрипты в конец body; — разместить все файлы на CDN/на разных хостах; — свой вариант…
  4. 4. Помещение скриптов и стилей прямо в страницу• Очевидно, что это решение подходит только для маленьких страниц, где не много скриптов стилей, так как в случае перезагрузки страницы будут повторно загружаться статические данные, и кеширование не может сработать.
  5. 5. Установка атрибутов async/defer тегу script
  6. 6. Установка атрибутов async/defer тегу script
  7. 7. Склеивание скриптов и стилей
  8. 8. Помещение stylesheet в head, а script — в конец body• Достойно упоминания и использования, но в этом случае, как и в описанных выше, до момента document.ready могут быть неразрешённые зависимости между скриптами, и если для jQuery с плагинами это допустимо, то для варианта, когда мы загружаем библиотеку API Facebookа или VKontakte, и хотим тут же запустить наш скрипт, который пошлёт на API запрос определения, залогинен ли пользователь, это сулит костылями, либо загрузкой библиотеки API в начале страницы, блокируя её отображение.
  9. 9. Загрузка с CDNОдноточечная дистрибуция (слева) и дистрибуция средствами CDN (справа)
  10. 10. Свое решение• Что если попробовать загружать скрипты в тот момент, пока страница грузится, но не выполнять их, и вообще скрывать от браузера, что это скрипты до того момента, пока они не догрузились, чтобы не блокировать первичное отображение страницы?
  11. 11. Заключение— встроить в head страницы script, указывающий на загрузчик; — встроить inline скрипт, использующий загрузчик для подгрузки других скриптов и стилей; — объединять скрипты и стили, использующиеся только совместно, в один для минимизации количества HTTP запросов; — минимизировать скрипты и стили; — убедиться в том, что сервер пакует передаваемые данные gzipом; — убедиться в том, что сервер правильно кеширует; — осторожно и вдумчиво использовать сторонние CDN и дополнительные хосты.

×