Odkaz: http://www.sindelka.cz/cz/zrychleni-nacitani-javacriptu/

Pavel ve svém příspěvku uvádí pár zajímavých myšlenek, jak se stavět k problému bobtnajících JavaScriptů a CSS souborů se stále složitějšími designy.

Pokračování:

Shrnutí

Pavel rozebírá problémy spojování souborů do jednoho velkého, jeho možnost komprese pomocí Apache a také uvádí způsob jeho cacheování pomocí mod_rewrite.

Co s rozrůstající se knihovnou JS?

Cílem našeho snažení by mělo být omezení HTTP requestů na server a uložení co nejvíce obsahu do keše prohlížeče uživatele. Omezení HTTP requestů rozebírají na Yahoo blogu, ponaučením, které si můžeme odnést je, že zhruba polovina uživatelů má prázdnou keš. Proto se snažíme sloučit soubory tak, abychom ze serveru žádali co nejméně souborů. Tím pádem je vhodné abyste sloučili všechny vaše JavaScriptové soubory do jednoho, CSS soubory taky do jednoho. Sice se je uživatel bude muset stahnout při prvním přístupu, ale při jejich nakešování jejich velikost nebude vadit.

Spojení souborů lze provést ve Windows pomocí příkazu:

copy /b soubor1.js + soubor2.js + souborN.js output.js

nebo v Linuxu:

cat soubor1.js soubor2.js > output.js

Výsledný soubor můžeme nechat tak jak je, nebo ho zabalit. Pokud chceme zmenšit velikost pomocí balení, je nutné si vybrat takový balící nástroj, který nám nerozbije funkčnost skriptů. Balící skripty se rozlišují na dva druhy. První z nich pouze vyhodí všechny komentáře a přebytečné mezery, druhý typ celý javascript enkóduje pomocí Base64. Pak výsledek začíná většinou:

eval(function(p,a,c,k,e,r)

Druhému způsobu doporučuji se vyhnout, neboť používání evalu je zlo :-), ale hlavně dekódování stojí procesorový čas při každém použití (načtení stránky), kdežto načtení většího souboru se děje pouze jednou.

Pro kompresi CSS souboru je možné využít online CSS kompresor. U kompresování CSS na nejvyšší uroveň může nastat problém se Safari 1 a 2, pokud posledním pravidlem v chlupaté závorce je komentářový rovnítkový hack.

Kešování

Pokud máme dva soubory (jeden JS a druhý CSS), chceme aby si je uživatelé stáhli jednou a zůstali jim nakešovaný. Ale také chceme, abychom mohli jednoduše změnit obsah a prohlížeče uživatelů na změnu reagovaly okamžitě. Toho lze docílit verzováním souborů.

/js/main.js?13

Pavel ve svém článku nejdříve psal, že v RFC 2616 pro HTTP protokol je napsáno, že URL s parametry za otazníkem se nemají kešovat a proto doporučuje verzi vkládat do názvu souboru a použít mod_rewrite pro nasměrování na správné názvy souborů. Nyní po Vránově upozornění se již opravil, takže použití mod_rewrite postrádá smysl. Jeho použití zaprvé zbytečně zatěžuje server a za druhé jeho použití by využilo pouze 3% uživatelů, kteří používají Operu, která URL s otazníkem nikdy nekešuje.

Poslední věc co musíme nastavit je, aby server posílal správně hlavičku s expirací v keši prohlížeče, což Pavel zapoměl zmínit. Pokud máte přístup k nastavení Apache, je možné v httpd.conf souboru nastavit modul mod_expires např. takto:


ExpiresActive On
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000


Pak budou JavaScripty a CSS soubory kešovány jeden měsíc. Pokud k tomuto nastavení nemáte přístup, musíte si ho obstarat jinými prostředky, tedy nejlépe ve vašem skriptovacím jazyku, např. PHP.

Nezapomeňte, že to samé nastavení můžete provést i pro obrázky.