Как стать автором
Обновить

Ускорение загрузки JavaScript и CSS

Время на прочтение 3 мин
Количество просмотров 954
Незнаю знаете вы или не знаете, но
1.Пока не загрузятся стили — страница отображаться не будет
2.Пока не загрузиться(и не выполниться) скрипт который вы инклюдите — дальше страница отображаться не будет
3.Из пункта 2 следует что в один момент времени грузиться( и исполняется) только один скрипт.
*Но в зависимости от написания второй скрипт тоже может грузиться(но не исполняться) одновременно с первым… но
4.Один браузер в один момент времени держит только два(или четыре?) соединения с одним хостом.
Тоесть в среднем за загрузку 6ти скриптом браузер сделает 6 запросов к серверу один за другим.
К картинкам это в общем плане не относиться, мозила вроде 4 картинки одновременно тащит.
НО НЕ БОЛЕЕ!

Что же делать?


Получается что стандартная страница с
1. один файл css
2. один файл js
3. пара файлов js фреймворка ( А ПРЕДСТАВИМ ЧТО ЭТО ПРОТОТИП! С АСУЛОУСОМ!)
ждет в среднем 1-2 секунды на «fetch» этих файлов. И только потом прорисовывается.

Да половина загрузок выглядит аки «If-Match || If-Modifited» и обрабатывается относительно быстро
Часть файлов вообще не запрашивается ( встроенный Min-Max Age )
А всеми нелюбимый IE вообще любит не спрашивать даже если надо ( и сидит как дурак со старыми версиями )

В общем это была вступительная статейка, чтобы люди прониклись…

Итак для решения этих проблем ( которые до меня дошли после прочтения habrahabr.ru/blog/AJAX/16489.html )
я взял описанный в статье скриптик и малек его перешурстил
сам скриптик доступен тут

Итак скриптик может как вариант работать также как и оригинал
добавляем в .htaccess
RewriteRule (.*\.css) combine.php?type=css&files=$1 [QSA,L]
RewriteRule (.*\.js) combine.php?type=javascript&files=$1 [QSA,L]

и работает вторая ветка combine.php
И… получаем только минимизированые jsminом скрипты, сжатые вместе и отданные вам в суппортед кодировке, ровно также как в оригинальной статье

Или… ( вот оно наконец нововведение )
В вашем HEADER( который, будем надеяться. генериться с помошью php ) пишем
link rel=«stylesheet» type=«text/css» href="=combine_makeref(«css»,$HEADERcssfile)"

или страшную строчку
Цитата:
script language=«JavaScript» src="?=combine_makeref(«javascript»,«scripts/positioning.js,~brouser.js,~scripts.js,~site.js,sc ripts/aculous/lib/prototype.js,scripts/aculous/src/builder.js,~effects.js,~dragdrop.js,~controls.js,~ slider.js»)" /script

(размер оригинала СТРАШНОЙ СТРОКИ — 204 кб, размер минимизированого jsminом — 133кб, размер сжатого 31кб)
В общем вызываем combine_makeref и на выходе получаем некое ИМЯ. Которое меняется при изменении файлов( те уникально для набора файлов и времени их изменения ( а вообще это простой E-Tag ))
и файло этот Expires гдето через год.
И один человек будет его грузить один раз! (В оригинальном варианте апдейт скрипта проверялся каждый раз)
При обращении к файлу он выбирает лучший вариант сжатия и отдает вам.
(требуется добавить в .htaccess)
RewriteRule (.*\.cssf) combine.php?type=css&fetch=$1 [QSA,L]
RewriteRule (.*\.jsf) combine.php?type=javascript&fetch=$1 [QSA,L]

Чтож — уже нааамного лучше оригинала, но некоторые люди могут спросить: " а не круто ли это отдавать статитку через php?"
Крутовато иногда… поэтому есть последний «бест» вариант — это использовать заместо combine_makeref функцию combine_staticref
Она на этапе выдачи хидера определит вариант сжатия и даст статическую линку на файло…
Отдавайте его потом гниксами и другими приблудами без вызова php кода лишний раз…

Ух, донаписался.
Ну в общем жду каментов.

еще раз
combine.php
kernel.php
Теги:
Хабы:
+3
Комментарии 6
Комментарии Комментарии 6

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн