Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

904 visualizaciones

Publicado el

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

параллельная загрузка 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 и дополнительные хосты.

×