Убыстрение загрузки JS и CSS файлов.

[Kashey]

Незнаю знаете вы или не знаете, но
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 вообще любит не спрашивать даже если надо ( и сидит как дурак со старыми версиями )

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

Итак для решения этих проблем ( которые до меня дошли после прочтения http://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>

(размер оригинала, размер минимизированого, размер сжатого
и все за ОДИН запрос)

и получаем некое ИМЯ. которое меняется при изменении файлов( те уникально для набора файлов и времени их изменения ( а вообще это простой E-Tag ))
и файло этот Expires гдето через год.
При обращении к файлу он выбирает лучший вариант сжатия и отдает вам.
(требуется добавить в .htaccess)

RewriteRule (.*\.cssf) combine.php?type=css&fetch=$1 [QSA,L]
RewriteRule (.*\.jsf) combine.php?type=javascript&fetch=$1 [QSA,L]

Уже нааамного лучше..
Ну и последний "бест" вариант это использовать заместо combine_makeref функцию combine_staticref
она на этапе выдачи хидера определит вариант сжатия и даст статическую линку на файло..
Отдавайте его гниксами и другими приблудами без вызова php кода лишний раз..

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

[Kashey]

.. так забыл дописать
"СТРАШНАЯ СТРОКА"
(размер оригинала 204 кб, размер минимизированого 133кб, размер сжатого 31кб
и все за ОДИН запрос)

Эта страница( вот прямо вот эта )
при полной перерисовки тянет 3 скрипта на 60кб и тратит на это полторы секунды!

[Wink]

Сообщение от Kashey

Ну в общем жду каментов

Афтар аццкей сотона. Каменты на хабре рулят.

Сообщение от Vitaly

Проблема в том, что часть устаревших браузеров не умеет понимать упакованный жабаскрипт и CSS. Вот HTML умеет, а JS и CSS ни фига. Честное пионерское.

[Kashey]

На хабре база данных упала. Посему туда на раздербанивание это не отправиш.
А что такое часть устаревших браузеров?

if (!strstr($_SERVER['HTTP_USER_AGENT'], 'Opera') &&
preg_match('/^Mozilla\/4\.0 \(compatible; MSIE ([0-9]\.[0-9])/i', $_SERVER['HTTP_USER_AGENT'], $matches))
{
$version = floatval($matches[1]);
if ($version < 6)$encoding = 'none';
if ($version == 6 && !strstr($_SERVER['HTTP_USER_AGENT'], 'EV1')) $encoding = 'none';
}

далой старые браузеры.
Все не все не знаю. Но если один человек из тысячи залеся на сайт. С интернет эксплорер 4.0 Да он и так ничего нормального не увидит, в своем разрешении 640х480
это так сарказм. УБИВАТЬ НАДО ТАКИХ юзвероЛЮДЕЙ. И ФАЕР ИМ НАСИЛЬНО СТАВИТЬ..
ВСЕМ!!.МУхахаха-ахаха-аха

[Wink]

Да и фиг бы с этими старыми браузерами. Непонятно как поведут себя в таких случаях

Nokia6230i/2.0 (03.25) Profile/MIDP-2.0 Configuration/CLDC-1.1
SonyEricssonT610/R501 Profile/MIDP-1.0 Configuration/CLDC-1.0

и им подобные. А таких становится всё больше.

[Kashey]

SEW610 кушает
А вообще у меня на сайте при загрузке страницы идет Ajax.Request двух скрипт файликов. По разному упакованных.
И по факту их работы я выношу суждение о поддержке сжатия.

[Siava]

Мда.. у меня css и js отдаёт nginx который также можно настроить на сжатие контента, вот посему и не пойму этих извращений

[Kashey]

1.Его можно настроить на опционое сжатие?
2.Он выставляет Expires на парулет "туда"?
3.Он сливает однотипные файлы вместе и делает им "min"?

[seocore]

Сообщение от Kashey

1. Его можно настроить на опционое сжатие?
2. Он выставляет Expires на парулет "туда"?
3. Он сливает однотипные файлы вместе и делает им "min"?

1. Можно сжимать что угодно и какие угодно MIME-типы, разумеется также проверяется поддержка браузером gzip сжатия
2. А зачем на пару лет туда? - вы что пару лет не будете обновлять эти файлы? (на худой конец есть же E-Tag, который более корректен и надежен в данном случае)
3. Что мешает вам ручками объединить все .js и .css файлы?

вообще зачем такие заморочки? - достаточно всего одного удаленного .js (например от РСЯ), чтобы испортить всю "скорость" загрузки

[Kashey]

РСЯ можно и в конце грузить
>2.зачем на пару лет туда? - вы что пару лет не будете обновлять эти файлы
Вы не читали что я написал - имя файла и есть частью E-Tag и при обновлении набора файлов( или самих файлов) меняется.
В вашем же случаю ВСЕГДА(ну ладно - часто, точнее это к тупому ИЕ не относиться) будет проверяться апдейт файлов.. Быстро конечно но зачем?