Прискорення завантаження JavaScript і CSS

Прискорення завантаження JavaScript і CSS

Незнаю знаєте ви чи не знаєте, але


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