Tashqi CSS va Javascriptni qo'shish orqali biz keraksiz HTTP so'rovlarini minimal darajaga tushirmoqchimiz.

Shu maqsadda .js va .css fayllari ishonchli keshlashni ta'minlaydigan sarlavhalar bilan xizmat qiladi.

Ammo ishlab chiqish jarayonida ushbu fayllardan biri o'zgarganda nima qilasiz? Barcha foydalanuvchilar uni keshda saqlashadi eski versiya- kesh eskirganicha, server va mijoz qismlarining buzilgan integratsiyasi haqida ko'plab shikoyatlar bo'ladi.

To'g'ri keshlash va versiyalash bu muammoni butunlay yo'q qiladi va uslublar/skript versiyalarining ishonchli, shaffof sinxronizatsiyasini ta'minlaydi.

Oddiy ETag keshlash

Statik resurslarni keshlashning eng oddiy usuli ETag dan foydalanishdir.

Tegishli server sozlamalarini yoqish kifoya (Apache uchun u sukut bo'yicha yoqilgan) va sarlavhalardagi har bir fayl uchun ETag beriladi - yangilanish vaqtiga, fayl hajmiga va (inode asosidagi) bog'liq xesh. fayl tizimlari) inode.

Brauzer bunday faylni keshlaydi va keyingi so'rovlarda keshlangan hujjatning ETag belgisi bilan If-None-Match sarlavhasini belgilaydi. Bunday sarlavhani olgandan so'ng, server 304 kodi bilan javob berishi mumkin - keyin hujjat keshdan olinadi.

Bu shunday ko'rinadi:

Serverga birinchi soʻrov (keshni tozalash) GET /misc/pack.js HTTP/1.1 Xost: veb-sayt

Umuman olganda, brauzer odatda User-Agent, Accept va hokazo kabi sarlavhalar to'plamini qo'shadi. Ular qisqalik uchun kesilgan.

Server javobi Server 200 va ETag kodli hujjat bilan javob beradi: HTTP/1.x 200 OK Kontent-kodlash: gzip Content-Type: text/javascript; charset=utf-8 Etag: "3272221997" Qabul qilish diapazonlari: bayt Kontent-uzunligi: 23321 Sana: 02-may 2008-yil 17:22:46 GMT Server: lighttpd Keyingi so'rovda brauzer If-None ni qo'shadi. -Match: (keshlangan ETag): GET /misc/pack.js HTTP/1.1 Xost: sayt If-None-Match: "453700005" Server javobi Server ko'rinadi - ha, hujjat o'zgarmagan. Bu siz 304 kodini chiqarishingiz va hujjatni qayta yubormasligingiz mumkinligini anglatadi. HTTP/1.x 304 O'zgartirilmagan kontent-kodlash: gzip Etag: "453700005" Kontent turi: matn/javascript; charset=utf-8 Qabul qilish diapazonlari: bayt Sana: Seshanba, 15 aprel 2008 yil 10:17:11 GMT

Muqobil variant- agar hujjat o'zgargan bo'lsa, server shunchaki yangi ETag bilan 200 yuboradi.

Last-Modified + If-Modified-Since kombinatsiyasi shunga o'xshash tarzda ishlaydi:

server oxirgi o'zgartirish sanasini oxirgi o'zgartirilgan sarlavhaga yuboradi (ETag o'rniga)

brauzer hujjatni keshlaydi va keyingi safar xuddi shu hujjatga so'rov yuborilganda, keshlangan versiyaning sanasini If-Modified-Since sarlavhasiga yuboradi (If-None-Match o'rniga)

server sanalarni tekshiradi va agar hujjat o'zgarmagan bo'lsa, u faqat 304 kodini mazmunsiz yuboradi.

Ushbu usullar ishonchli va yaxshi ishlaydi, ammo brauzer hali ham har bir skript yoki uslub uchun so'rov yuborishi kerak.

Aqlli keshlash. Versiyalash

Versiyalash uchun umumiy yondashuv - qisqacha:

Versiya (yoki o'zgartirish sanasi) barcha skriptlarga qo'shiladi. Masalan, http://site/my.js http://site/my.v1.2.js ga aylanadi

Barcha skriptlar brauzer tomonidan qattiq keshlangan

Skriptni yangilashda versiya yangisiga o'zgaradi: http://site/my.v2.0.js

Manzil o'zgardi, shuning uchun brauzer faylni qayta so'raydi va keshlaydi

Eski versiya 1.2 asta-sekin keshdan tushib ketadi

Qattiq keshlash

Qattiq keshlash- keshlangan hujjatlar uchun serverga so'rovlarni to'liq mixlab qo'yadigan balyozning bir turi.

Buni amalga oshirish uchun faqat Expires va Cache-Control: max-age sarlavhalarini qo'shing.

Masalan, PHPda 365 kunlik keshlash uchun:

Header("Muddati tugaydi: ".gmdate("D, d M Y H:i:s", time()+86400*365)." GMT"); header("Kesh-nazorat: max-age="+86400*365);

Yoki Apache-da mod_header yordamida tarkibni doimiy ravishda keshlashingiz mumkin:

Bunday sarlavhalarni olgan brauzer hujjatni uzoq vaqt keshlaydi. Hujjatga keyingi barcha kirish serverga murojaat qilmasdan to'g'ridan-to'g'ri brauzer keshidan taqdim etiladi.

Ko'pgina brauzerlar (Opera, Internet Explorer 6+, Safari) Agar manzilda savol belgisi bo'lsa, hujjatlarni keshlash YO'Q, chunki ular dinamik hisoblanadi.

Shuning uchun biz versiyani fayl nomiga qo'shamiz. Albatta, bunday manzillar bilan siz mod_rewrite kabi yechimdan foydalanishingiz kerak, biz buni keyinroq maqolada ko'rib chiqamiz.

P.S Lekin Firefox savol belgilari bilan manzillarni keshlaydi...

Avtomatik nomni aniqlash

Keling, fayllarning nomini o'zgartirmasdan versiyalarni avtomatik va shaffof tarzda qanday o'zgartirishni ko'rib chiqaylik.

Versiya bilan nom -> Fayl

Eng oddiy narsa, versiya bilan nomni asl fayl nomiga aylantirishdir.

Apache darajasida buni mod_rewrite yordamida amalga oshirish mumkin:

RewriteRule-da RewriteEngine ^/(.*\.)v+\.(css|js|gif|png|jpg)$ /$1$2 [L]

Bu qoida barcha css/js/gif/png/jpg fayllarni qayta ishlaydi va versiyani nomdan olib tashlaydi.

Masalan:

/images/logo.v2.gif -> /images/logo.gif
/css/style.v1.27.css -> /css/style.css
/javascript/script.v6.js -> /javascript/script.js

Ammo versiyani kesishdan tashqari, fayllarga qattiq keshlash sarlavhalarini ham qo'shishingiz kerak. Buning uchun mod_header direktivalari ishlatiladi:

Sarlavha qo'shish "Muddati tugaydi" "2014 yil 28 iyul, dushanba, 23:30:00 GMT" sarlavhasi "Kesh-nazorat" qo'shing "max-age=315360000"

Va barchasi birgalikda quyidagi Apache konfiguratsiyasini amalga oshiradi:

# ustidagi RewriteEngine versiyani o'chiradi va shu bilan birga fayl versiyasi bo'lgan o'zgaruvchini o'rnatadi RewriteRule ^/(.*\.)v+\.(css|js|gif|png|jpg)$ /$1$2 # qattiq kesh versiyali fayllar Sarlavha "Muddati tugaydi" qo'shiladi "2014 yil 28 iyul, 23:30:00 GMT" env=VERSIONED_FILE Sarlavha "Kesh-nazorat" qo'shing "max-age=315360000" env=VERSIONED_FILE

Mod_rewrite modulining ishlash usuli tufayli RewriteRule asosiy qismga joylashtirilishi kerak. konfiguratsiya fayli httpd.conf yoki kiritilgan fayllar, lekin hech qachon .htaccess da bo'lmaydi, aks holda VERSIONED_FILE o'zgaruvchisi o'rnatilishidan avval Header buyruqlari ishga tushiriladi.

Sarlavha direktivalari istalgan joyda, hatto .htaccess da bo'lishi mumkin - bu muhim emas.

HTML sahifasidagi fayl nomiga avtomatik ravishda versiya qo'shiladi

Versiyani skript nomiga qanday qo'yish shablon tizimingizga va umuman, skriptlarni (uslublar va boshqalar) qo'shish usuliga bog'liq.

Masalan, o'zgartirish sanasidan versiya va Smarty shablon mexanizmi sifatida foydalanilganda, havolalar quyidagicha o'rnatilishi mumkin:

Versiya funktsiyasi versiyani qo'shadi:

Funktsiya smarty_version($args)( $stat = stat($GLOBALS["config"]["site_root"].$args["src"]); $version = $stat["mtime"]; echo preg_replace("! \.(+?)$!", ".v$versiya.\$1", $args["src"]); )

Sahifadagi natija:

Optimallashtirish

Keraksiz statistika qo'ng'iroqlarini oldini olish uchun siz joriy versiyalar ro'yxati bilan massivni alohida o'zgaruvchida saqlashingiz mumkin.

$versions["css"] = array("group.css" => "1.1", "other.css" => "3.0", )

Bunday holda, massivdagi joriy versiya oddiygina HTMLga almashtiriladi.

Siz ikkala yondashuvni ham kesib o'tishingiz mumkin va ishlab chiqish jarayonida o'zgartirish sanasi bo'yicha versiyani ishlab chiqarasiz - dolzarbligi uchun va ishlab chiqarishda - massivdan, ishlash uchun versiya.

Qo'llanilishi

Ushbu keshlash usuli hamma joyda ishlaydi, jumladan Javascript, CSS, tasvirlar, Flash filmlar va boshqalar.

Hujjat har doim o'zgarganda foydali bo'ladi, lekin brauzerda har doim joriy, eng so'nggi versiya bo'lishi kerak.

Kesh deyarli har qanday veb-ilovaning ma'lumotlar bazalari, veb-serverlar, shuningdek mijoz bilan ishlash darajasida ishlashida muhim rol o'ynaydi.

Ushbu maqolada mijozlar keshini tushunishga harakat qilamiz. Xususan, biz brauzerlar va veb-serverlar tomonidan qanday HTTP sarlavhalari ishlatilishini va ular nimani anglatishini ko'rib chiqamiz.

Lekin birinchi navbatda, mijoz tomonidan keshlash nima uchun kerakligini aniqlaylik? .

Web-sahifalar ko'pdan iborat turli elementlar: rasmlar, CSS va JS fayllari va boshqalar. Ushbu elementlarning ba'zilari saytning bir nechta (ko'p) sahifalarida qo'llaniladi. Mijoz tomonidan keshlash brauzerlarning fayllar nusxalarini (server javoblari) ularni qayta yuklamaslik uchun saqlash qobiliyatini anglatadi. Bu sizga sahifani qayta yuklashni sezilarli darajada tezlashtirish, trafikni tejash, shuningdek, serverdagi yukni kamaytirish imkonini beradi.

Mijoz tomonidan keshlash jarayonlarini boshqarish uchun bir necha xil HTTP sarlavhalari mavjud. Keling, ularning har biri haqida gapiraylik.

Mijoz keshini boshqarish uchun Http sarlavhalari

Birinchidan, hech qanday keshlash mavjud bo'lmaganda server va brauzer qanday o'zaro ta'sir qilishini ko'rib chiqaylik. Aniq tushunish uchun men ular orasidagi muloqot jarayonini matnli suhbat shaklida tasavvur qilishga va tasavvur qilishga harakat qildim. Bir necha daqiqa server va brauzer bir-biriga mos keladigan odamlar ekanligini tasavvur qiling :)

Keshsiz (http sarlavhalarini keshlash bo'lmasa)

Ko'rib turganimizdek, cat.png tasviri har safar ko'rsatilganda, brauzer uni serverdan yana yuklab oladi. Menimcha, bu sekin va samarasiz ekanligini tushuntirishga hojat yo'q.

Oxirgi oʻzgartirilgan javob sarlavhasi va if-Modified-Since soʻrov sarlavhasi.

G'oya shundan iboratki, server brauzerga bergan faylga (javobga) Oxirgi o'zgartirilgan sarlavha qo'shadi.

Brauzer endi fayl 2014-yil 1-dekabrda yaratilganini (yoki o‘zgartirilganligini) biladi. Keyingi safar brauzerga xuddi shu fayl kerak bo‘lganda, u if-Modified-Since sarlavhasi bilan so‘rov yuboradi.

Agar fayl o'zgartirilmagan bo'lsa, server brauzerga 304 (O'zgartirilmagan) holati bilan bo'sh javob yuboradi. Bunday holda, brauzer fayl yangilanmaganligini biladi va oxirgi marta saqlangan nusxasini ko'rsatishi mumkin.

Shunday qilib, Last-modified-dan foydalanib, biz yuklashni tejaymiz katta fayl, serverdan bo'sh tezkor javob bilan chiqish.

Etag javob sarlavhasi va If-None-Match so'rov sarlavhasi.

Etagning ishlash printsipi oxirgi o'zgartirilganga juda o'xshaydi, ammo undan farqli o'laroq, u vaqtga bog'liq emas. Vaqt nisbiy narsa.

G'oya shundan iboratki, u yaratilganda va har safar u o'zgarganda, server faylni ETag deb nomlangan maxsus teg bilan teglaydi, shuningdek, brauzerga yuboradigan faylga (javob) sarlavha qo'shadi:

ETag: "686897696a7c876b7e"

Endi brauzer joriy versiya faylida "686897696a7c876b7e" ga teng ETag borligini biladi. Keyingi safar brauzer bir xil faylga muhtoj bo'lsa, u If-None-Match sarlavhasi bilan so'rov yuboradi: "686897696a7c876b7e" .

Agar mos kelmasa: "686897696a7c876b7e"

Server teglarni solishtirishi mumkin va agar fayl o'zgartirilmagan bo'lsa, brauzerga 304 (O'zgartirilmagan) holati bilan bo'sh javob yuborishi mumkin. So'nggi o'zgartirilganda bo'lgani kabi, brauzer fayl yangilanmaganligini aniqlaydi va keshdan nusxasini ko'rsatishi mumkin.

Sarlavha muddati tugagan

Ushbu sarlavhaning ishlash printsipi yuqorida tavsiflangan Etag va oxirgi o'zgartirilgandan farq qiladi. Muddati tugaganidan foydalanib, faylning “yaroqlilik muddati” (“muvofiqlik davri”) aniqlanadi. Bular. Birinchi yuklashda server brauzerga faylni muddati tugaguniga qadar oʻzgartirishni rejalashtirmaganligi haqida xabar beradi:

Keyingi safar brauzer "yaroqlilik muddati" hali kelmaganligini bilib, hatto serverga so'rov yuborishga urinmaydi va faylni keshdan ko'rsatadi.

Ushbu kesh turi, ayniqsa, maqolalar, piktogrammalar, favikonlar, ba'zi CSS va JS fayllari va boshqalar uchun rasmlar uchun juda mos keladi.

Max-age direktivasi bilan kesh-nazorat sarlavhasi.

Kesh-nazoratning ishlash printsipi: max-age muddati tugaganiga juda o'xshash. Bu erda faylning "yaroqlilik muddati" ham aniqlanadi, lekin u soniyalarda o'rnatiladi va ma'lum bir vaqtga bog'liq emas, bu ko'p hollarda ancha qulayroqdir.

Malumot uchun:

• 1 kun = 86400 soniya
• 1 hafta = 604800 soniya
• 1 oy = 2629000 soniya
• 1 yil = 31536000 soniya

Masalan:

Kesh-nazorat: max-age=2629000;

Kesh-nazorat sarlavhasida max-agedan tashqari boshqa ko'rsatmalar mavjud. Keling, eng mashhurlarini qisqacha ko'rib chiqaylik:

ommaviy
Gap shundaki, so'rovlar nafaqat foydalanuvchining oxirgi mijozi (brauzer), balki turli xil oraliq proksi-serverlar, CDN tarmoqlari va boshqalar tomonidan keshlanishi mumkin. Shunday qilib, ommaviy direktiva har qanday proksi-serverga xuddi brauzer kabi keshlashni amalga oshirishga imkon beradi.

xususiy
Direktivda shunday deyilgan bu fayl(server javobi) oxirgi foydalanuvchi uchun xosdir va turli oraliq proksi-serverlar tomonidan keshda saqlanmasligi kerak. Shu bilan birga, u oxirgi mijozga (foydalanuvchi brauzeri) keshlash imkonini beradi. Masalan, bu foydalanuvchi profilining ichki sahifalari, sessiya ichidagi so'rovlar va boshqalar uchun tegishli.

Mijoz har safar serverga so'rov yuborishi kerakligini belgilash imkonini beradi. Ba'zan yuqorida tavsiflangan Etag sarlavhasi bilan ishlatiladi.

do'konsiz
Mijozga hech qanday sharoitda so'rovning nusxasini yoki uning qismlarini saqlamaslik kerakligini ko'rsatadi. Bu har qanday keshlarni bekor qiluvchi eng qattiq sarlavha. Maxfiy ma'lumotlar bilan ishlash uchun maxsus ixtiro qilingan.

qayta tasdiqlanishi kerak
Ushbu ko'rsatma brauzerga tarkibni qayta tekshirish uchun serverga majburiy so'rov yuborishni buyuradi (masalan, agar siz eTag dan foydalansangiz). Gap shundaki, ma'lum bir konfiguratsiyadagi http keshga eskirgan tarkibni saqlashga imkon beradi. must-revalidate brauzerni serverga so'rov yuborish orqali har qanday sharoitda kontentning yangiligini tekshirishga majbur qiladi.

proksi-revalidate
Bu revalidatsiya bilan bir xil, lekin faqat proksi-serverlarni keshlash uchun amal qiladi.

s - maksimal
Amalda max-age dan farq qilmaydi, bundan mustasno, bu ko'rsatma faqat turli xil proksi-serverlarning keshi tomonidan hisobga olinadi, lekin foydalanuvchi brauzerining o'zi tomonidan emas. "S -" harfi "shared" so'zidan (masalan, CDN) keladi. Ushbu direktiv CDN va boshqa vositachi keshlar uchun maxsus mo'ljallangan. Uni belgilash max-age direktivasi va Muddati tugagan sarlavhasi qiymatlarini bekor qiladi. Biroq, agar siz CDN tarmoqlarini qurmasangiz, sizga hech qachon s-maxage kerak bo'lmaydi.

Saytda qanday sarlavhalar ishlatilishini qanday ko'rishim mumkin?

Sevimli brauzeringizning tuzatuvchisida http so'rov sarlavhalari va javob sarlavhalarini ko'rishingiz mumkin. Bu Chrome brauzerida qanday ko'rinishiga misol:

Xuddi shu narsani har qanday o'zini hurmat qiladigan brauzer yoki http snifferda ko'rish mumkin.

Apache va Nginx-da keshlashni sozlash

Biz mashhur serverlarni o'rnatish uchun hujjatlarni takrorlamaymiz. Siz uni har doim tomosha qilishingiz mumkin va. Quyida biz konfiguratsiya fayllari qanday ko'rinishini ko'rsatish uchun haqiqiy hayotdan misollar keltiramiz.

Misol Apache konfiguratsiyasi Expires nazorat qilish

Biz turli xil "yaroqlilik muddati" ni belgilaymiz har xil turlari fayllar. Tasvirlar uchun bir yil, skriptlar, uslublar, pdf va piktogrammalar uchun bir oy. Qolgan hamma narsa uchun - 2 kun.

ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType plus 1 yil "ExiresByType" text/ month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 oy" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "kirish va 2 kun"

Muddati tugashini boshqarish uchun Nginx konfiguratsiyasiga misol

Biz har xil turdagi fayllar uchun turli xil "yaroqlilik muddati" o'rnatamiz. Tasvirlar uchun bir hafta, uslublar va skriptlar uchun bir kun.

Server ( #... joylashuv ~* \.(gif|ico|jpe?g|png)(\?+)?$ ( muddati 1w; ) manzil ~* \.(css|js)$ ( muddati 1d; ) #...)

Kesh-nazorat uchun Apache konfiguratsiyasi misoli (max-age va ommaviy/xususiy/keshsiz) Sarlavhalar to'plami Kesh-nazorat "max-age=2592000, ommaviy" Sarlavhalar to'plami Kesh-nazorat "max-age=88000, shaxsiy, kerak- revalidate" Sarlavhalar to'plami Cache-Control "xususiy, do'konsiz, kesh yo'q, qayta tekshirish kerak, o'zgartirilmaydi, max-age=0" Sarlavhalar to'plami Pragma "keshsiz" Keshni boshqarish statik fayllar serveri uchun Nginx konfiguratsiyasi misoli ( #... joylashuv ~* \.(?:ico|css|js|gif|jpe?g|png)$ ( add_header Cache-Control "max-age=88000, public"; ) #... ) In xulosa

"Keshlanishi mumkin bo'lgan hamma narsani keshlash" veb-dasturchi uchun yaxshi shiordir. Ba'zan siz konfiguratsiyaga bir necha soat sarflashingiz va shu bilan birga saytingizning foydalanuvchi tajribasini sezilarli darajada yaxshilashingiz, server yukini sezilarli darajada kamaytirishingiz va trafikni tejashingiz mumkin. Asosiysi, uni haddan tashqari oshirmaslik va resursingizning xususiyatlarini hisobga olgan holda hamma narsani to'g'ri sozlash.

To'g'ri sozlangan keshlash unumdorlikning katta afzalliklarini ta'minlaydi, tarmoqli kengligini tejaydi va server xarajatlarini kamaytiradi, lekin ko'plab saytlar keshlashni yomon amalga oshiradi, bu esa o'zaro bog'langan resurslarni sinxronlashtirishga olib keladigan poyga holatini yaratadi.

Ajoyib ko'pchilik eng yaxshi amaliyotlar keshlash ikkita naqshdan biriga ishora qiladi:

Naqsh № 1: o'zgarmas kontent va uzoq maksimal yoshdagi kesh Kesh-nazorat: max-age=31536000

• URL mazmuni o'zgarmaydi, shuning uchun...
• Brauzer yoki CDN resursni bir yil davomida osongina keshlashi mumkin
• Belgilangan maksimal yoshdan yoshroq keshlangan kontentdan server bilan maslahatlashmasdan foydalanish mumkin

Sahifa: Hey, menga "/script-v1.js" , "/styles-v1.css" va "/cats-v1.jpg" kerak 10:24

Naqd: Men bo'shman, sizchi, Server? 10:24

Server: OK, ular shu yerda. Aytgancha, Cash, ular bir yil davomida ishlatilishi kerak, ortiq emas. 10:25

Cash: Rahmat! 10:25

Sahifa: Huray! 10:25

Ertasiga; ertangi kun

Sahifa: Hey, menga "/script-v2 .js" , "/styles-v2 .css" va "/cats-v1.jpg" kerak 08:14

Naqd pul: Mushuklar bilan rasm bor, ammo qolganlari emas. Servermi? 08:14

Server: Oson - bu yangi CSS va JS. Yana bir bor, Cash: ularning saqlash muddati bir yildan ortiq emas. 08:15

Naqd pul: Ajoyib! 08:15

Sahifa: Rahmat! 08:15

Naqd pul: Hmm, men anchadan beri "/script-v1.js" va "/styles-v1.css" dan foydalanmadim. Ularni olib tashlash vaqti keldi. 12:32

Ushbu naqshdan foydalanib, siz hech qachon ma'lum bir URL mazmunini o'zgartirmaysiz, URLning o'zini o'zgartirasiz:

Har bir URLda kontent bilan birga o'zgaruvchan narsa bor. Bu versiya raqami, o'zgartirilgan sana yoki kontent xeshi bo'lishi mumkin (bu mening blogim uchun tanlagan narsa).

Aksariyat server tomonidagi ramkalar shu kabi ishlarni osonlik bilan bajarishga imkon beruvchi vositalarga ega (Djangoda men Manifest Static Files Storage-dan foydalanaman); Node.js da bir xil muammolarni hal qiladigan juda kichik kutubxonalar ham mavjud, masalan, gulp-rev.

Biroq, bu naqsh maqolalar va blog postlari kabi narsalar uchun mos emas. Ularning URL manzillarini versiya qilib boʻlmaydi va ularning mazmuni oʻzgarishi mumkin. Jiddiy ravishda, menda tez-tez grammatik va tinish belgilarida xatolar bor va kontentni tezda yangilashim kerak.

Shakl №2: serverda har doim tasdiqlangan o'zgaruvchan tarkib Kesh-nazorat: kesh yo'q

• URL mazmuni o'zgaradi, ya'ni...
• Mahalliy keshlangan har qanday versiyadan serverni ko'rsatmasdan foydalanib bo'lmaydi.

Sahifa: Hey, menga "/about/" va "/sw.js" 11:32 mazmuni kerak

Naqd: Men sizga yordam bera olmayman. Servermi? 11:32

Server: Ba'zilar bor. Naqd pul, ularni o'zingiz bilan saqlang, lekin ularni ishlatishdan oldin mendan so'rang. 11:33

Naqd pul: Aynan! 11:33

Sahifa: Rahmat! 11:33

Keyingi kunda

Sahifa: Hey, menga yana "/about/" va "/sw.js" mazmuni kerak 09:46

Naqd pul: Bir daqiqa. Server, mening nusxalarim yaxshimi? “/about/” nusxasi dushanbadan, “/sw.js” esa kechagidan. 09:46

Server: "/sw.js" o'zgarmadi... 09:47

Naqd pul: ajoyib. Sahifada "/sw.js" ni saqlang. 09:47

Server: …lekin menda “/haqida/” bor yangi versiya. Naqd pul, ushlab turing, lekin oxirgi marta bo'lgani kabi, avval mendan so'rashni unutmang. 09:47

Naqd: Tushundim! 09:47

Sahifa: Ajoyib! 09:47

Eslatma: kesh yo'q "kesh qilmang" degani emas, bu serverdagi keshlangan resursni "tekshirish" (yoki qayta tekshirish) degan ma'noni anglatadi. Va hech qanday do'kon brauzerga umuman kesh saqlamaslikni aytadi. Bundan tashqari, qayta tekshirish majburiy qayta tekshirishni anglatmaydi, lekin keshlangan resurs belgilangan maksimal yoshdan kichik bo'lsagina ishlatiladi va aks holda u qayta tasdiqlanadi. Hammasi shunday boshlandi kalit so'zlar keshlash uchun.

Ushbu naqshda biz javobga ETag (siz tanlagan versiya identifikatori) yoki oxirgi tahrirlangan sarlavhani qo'shishimiz mumkin. Mijoz keyingi safar kontent so'raganda, mos ravishda If-None-Match yoki If-Modified-Since chiqadi, bu esa serverga "Sizda bor narsadan foydalaning, keshingiz yangilangan" deyishiga imkon beradi, ya'ni HTTP 304 ni qaytaradi.

Agar ETag / Oxirgi o'zgartirilgan yuborish imkoni bo'lmasa, server har doim butun tarkibni yuboradi.

Ushbu naqsh har doim tarmoq qo'ng'iroqlarini talab qiladi, shuning uchun u tarmoq so'rovlarisiz amalga oshirilishi mumkin bo'lgan birinchi naqsh kabi yaxshi emas.

Bizda birinchi naqsh uchun infratuzilma mavjud emasligi odatiy hol emas, lekin 2-rasmda tarmoq so'rovlari bilan bog'liq muammolar ham paydo bo'lishi mumkin.Natijada oraliq variant qo'llaniladi: qisqa maksimal yosh va o'zgaruvchan kontent. Bu yomon kelishuv.

O'zgaruvchan kontent bilan maksimal yoshdan foydalanish odatda noto'g'ri tanlovdir

Va, afsuski, bu keng tarqalgan; Github sahifalari bunga misoldir.

Tasavvur qiling:

• /maqola/
• /styles.css
• /script.js

Server sarlavhasi bilan:

Kesh-nazorat: qayta tekshirish kerak, maksimal yosh = 600

• URL tarkibi o'zgaradi
• Agar brauzerda 10 daqiqadan ko'proq so'nggi keshlangan versiya mavjud bo'lsa, u server bilan maslahatlashmasdan foydalaniladi
• Agar bunday kesh bo'lmasa, agar iloji bo'lsa, If-Modified-Since yoki If-None-Match bilan tarmoq so'rovi ishlatiladi.

Sahifa: Hey, menga "/article/", "/script.js" va "/styles.css" kerak 10:21

Naqd pul: Menda siz kabi hech narsa yo'q, Server? 10:21

Server: Muammo yo'q, ular mana. Ammo esda tuting, Cash: ular keyingi 10 daqiqa ichida ishlatilishi mumkin. 10:22

Naqd pul: Ha! 10:22

Sahifa: Rahmat! 10:22

Sahifa: Hey, menga yana "/article/", "/script.js" va "/styles.css" kerak 10:28

Naqd pul: Voy, kechirasiz, lekin men "/styles.css" ni yo'qotdim, lekin menda hamma narsa bor. Server, men uchun "/styles.css" ni sozlay olasizmi? 10:28

Server: Oson, siz uni oxirgi marta olganingizdan beri u allaqachon o'zgargan. Keyingi 10 daqiqa davomida uni xavfsiz ishlatishingiz mumkin. 10:29

Naqd pul: Muammo yo'q. 10:29

Sahifa: Rahmat! Lekin nimadir noto'g'ri ketganga o'xshaydi! Hammasi buzilgan! Nima bo'lyapti o'zi? 10:29

Sinov paytida bu naqsh hayot huquqiga ega, ammo u haqiqiy loyihada hamma narsani buzadi va uni kuzatish juda qiyin. Yuqoridagi misolda server HTML, CSS va JS-ni yangiladi, lekin sahifa eski keshlangan HTML va JS hamda serverdan yangilangan CSS bilan ko'rsatilgan. Versiyaning mos kelmasligi hamma narsani buzadi.

Ko'pincha biz HTML-ga jiddiy o'zgartirishlar kiritganimizda, biz yangi tuzilmani to'g'ri aks ettirish uchun CSS-ni ham, tarkib va ​​uslubga rioya qilish uchun JavaScript-ni o'zgartiramiz. Bu resurslarning barchasi mustaqildir, lekin keshlash sarlavhalari buni ifoda eta olmaydi. Natijada, foydalanuvchilar o'zlarini topishlari mumkin oxirgi versiya bir/ikki manba va qolganlarning eski versiyasi.

max-age javob vaqtiga nisbatan o'rnatiladi, shuning uchun agar barcha resurslar bitta manzilning bir qismi sifatida o'tkazilsa, ular bir vaqtning o'zida tugaydi, lekin hali ham sinxronizatsiya qilishning kichik imkoniyati mavjud. Agar sizda JavaScript-ni o'z ichiga olmagan yoki boshqa uslublarni o'z ichiga olgan sahifalaringiz bo'lsa, ularning keshning amal qilish muddati sinxronlashtirilmaydi. Va bundan ham yomoni, brauzer HTML, CSS va JS bir-biriga bog'liqligini bilmay, doimiy ravishda keshdan tarkibni tortib oladi, shuning uchun u ro'yxatdagi bir narsani xursandchilik bilan chiqarib tashlashi va qolgan hamma narsani unutishi mumkin. Ushbu omillarning barchasini birgalikda hisobga olsak, mos kelmaydigan versiyalar ehtimoli juda yuqori ekanligini tushunishingiz kerak.

Foydalanuvchi uchun natija buzilgan sahifa tartibi yoki boshqa muammolar bo'lishi mumkin. Kichik nosozliklardan butunlay yaroqsiz tarkibgacha.

Yaxshiyamki, foydalanuvchilar favqulodda chiqishga ega...

Sahifani yangilash ba'zan yordam beradi

Agar sahifa yangilanish orqali yuklangan boʻlsa, brauzerlar har doim max-age ga eʼtibor bermay, server tomonidan qayta tekshirishni amalga oshiradilar. Shuning uchun, agar foydalanuvchi max-age tufayli biror narsa buzilgan bo'lsa, oddiy sahifani yangilash hamma narsani tuzatishi mumkin. Lekin, albatta, qoshiqlar topilgandan so'ng, cho'kindi hali ham qoladi va saytingizga bo'lgan munosabat biroz boshqacha bo'ladi.

Xizmat ko'rsatuvchi xodim ushbu xatolarning ishlash muddatini uzaytirishi mumkin

Masalan, sizda shunday xizmat xodimi bor:

Const versiyasi = "2"; self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`)) .then(kesh => cache.addAll([ "/styles.css", "/script .js" ]))); )); self.addEventListener("faollashtirish", hodisa => ( // ...eski keshlarni o'chirish... )); self.addEventListener("olish", voqea => ( event.respondWith(caches.match(event.request) .then(response => respond || fetch(event.request))); ));

Ushbu xizmat xodimi:

• skript va uslublarni keshlaydi
• mos kelsa, keshdan foydalanadi, aks holda tarmoqqa kiradi

Agar biz CSS/JS-ni o'zgartirsak, biz yangilanishni keltirib chiqaradigan versiya raqamini ham oshiramiz. Biroq, addAll birinchi navbatda keshga kirishi sababli, biz maksimal yosh va mos kelmaydigan CSS va JS versiyalari tufayli poyga holatiga kirishimiz mumkin.

Ular keshlangandan so'ng, keyingi xizmat xodimi yangilanishigacha biz mos kelmaydigan CSS va JSga ega bo'lamiz - va bu yangilanish paytida yana poyga holatiga tushmagunimizcha.

Xizmat xodimida keshlashni o'tkazib yuborishingiz mumkin:

Self.addEventListener("o'rnatish", voqea => ( event.waitUntil(caches.open(`static-$(version)`)) .then(kesh => cache.addAll([ new Request("/styles.css", ( kesh: "keshsiz" )), yangi so'rov ("/script.js", ( kesh: "kesh yo'q" )) ]))); ));

Afsuski, Chrome/Opera’da keshlash imkoniyatlari qo‘llab-quvvatlanmaydi va endigina Firefox-ning tungi tuzilishiga qo‘shilgan, ammo buni o‘zingiz qilishingiz mumkin:

Self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`)) .then(kesh => Promise.all([ "/styles.css", "/script .js" ].map(url => ( // tasodifiy so‘rovlar qatori yordamida kesh-bust qaytarildi.(`$(url)?$(Math.random())`).then(response => ( // bajarilmadi 404, 500 va hokazolarda, agar (!response.ok) xato bo'lsa ("Yaxshi emas"); cache.put(url, javob); )) )))); ));

Ushbu misolda men tasodifiy raqam yordamida keshni qayta tiklayapman, lekin siz oldinga o'tishingiz va qurishda tarkibning xeshini qo'shishingiz mumkin (bu sw-precache bajaradigan narsaga o'xshaydi). Bu JavaScript-dan foydalangan holda birinchi naqshni amalga oshirishning bir turi, lekin brauzerlar va CDN emas, balki faqat xizmat ko'rsatuvchi ishchi bilan ishlaydi.

Xizmat xodimlari va HTTP keshi birgalikda ajoyib ishlaydi, ularni jang qilishga majburlamang!

Ko'rib turganingizdek, siz xizmat ko'rsatuvchi xodimingizdagi keshlash xatolarini hal qilishingiz mumkin, ammo muammoning ildizini hal qilish yaxshiroqdir. To'g'ri sozlash keshlash nafaqat xizmat ko'rsatuvchi xodimning ishini osonlashtiradi, balki xizmat ko'rsatuvchi ishchilarni (Safari, IE/Edge) qo'llab-quvvatlamaydigan brauzerlarga ham yordam beradi, shuningdek, CDN-dan maksimal darajada foydalanish imkonini beradi.

To'g'ri keshlash sarlavhalari ham xizmat xodimini yangilashni ancha osonlashtirishi mumkin.

Const versiyasi = "23"; self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`)) .then(kesh => cache.addAll([ "/", "/script-f93bca2c. js", "/styles-a837cb1e.css", "/cats-0e9a2ef4.jpg" ]))); ));

Bu erda men №2 naqsh (server tomonidan qayta tekshirish) va №1 naqsh (o'zgarmas kontent) bilan boshqa barcha resurslar bilan ildiz sahifani keshlashdim. Har bir xizmat xodimi yangilanishi ildiz sahifasiga so'rovni keltirib chiqaradi va boshqa barcha manbalar faqat URL manzili o'zgargan taqdirda yuklanadi. Bu yaxshi, chunki oldingisidan yangilanayotganingizdan qat'i nazar, u trafikni tejaydi va ish faoliyatini yaxshilaydi. eski versiya.

Bu erda mahalliy dasturga nisbatan sezilarli ustunlik mavjud, agar butun ikkilik hatto kichik o'zgarishlar bilan ham yuklab olinsa yoki murakkab taqqoslashga olib keladi. ikkilik fayllar. Shunday qilib, biz nisbatan kichik yuk bilan katta veb-ilovani yangilashimiz mumkin.

Xizmat ko'rsatish xodimlari vaqtinchalik qo'ltiq tayoqchasi emas, balki yaxshilanish sifatida yaxshi ishlaydi, shuning uchun u bilan kurashish o'rniga kesh bilan ishlang.

Ehtiyotkorlik bilan foydalanilganda, maksimal yosh va o'zgaruvchan tarkib juda yaxshi bo'lishi mumkin

max-age ko'pincha o'zgaruvchan kontent uchun noto'g'ri tanlovdir, lekin har doim ham emas. Masalan, asl maqolaning maksimal yoshi uch daqiqaga teng. Poyga holati muammo emas, chunki sahifada bir xil keshlash naqshidan foydalangan holda bog'liqliklar yo'q (CSS, JS va tasvirlar №1 naqshdan foydalanadi - o'zgarmas tarkib), qolgan hamma narsa bu naqshdan foydalanmaydi.

Ushbu naqsh men mashhur maqolani bemalol yozishim mumkinligini anglatadi va mening CDN (Cloudflare) serverdan yukni olib tashlashi mumkin, chunki men yangilangan maqola paydo bo'lishi uchun uch daqiqa kutishga tayyorman. foydalanuvchilar uchun ochiq.

Ushbu naqsh fanatizmsiz ishlatilishi kerak. Agar men maqolaga yangi bo'lim qo'shsam va unga boshqa maqoladan bog'langan bo'lsam, men hal qilinishi kerak bo'lgan qaramlikni yaratdim. Foydalanuvchi havolani bosish va kerakli bo'limsiz maqolaning nusxasini olishi mumkin. Agar men bunga yo'l qo'ymaslikni istasam, maqolani yangilashim, Cloudflare-dan maqolaning keshlangan versiyasini o'chirishim, uch daqiqa kutishim va shundan keyingina boshqa maqolaga havola qo'shishim kerak. Ha, bu naqsh ehtiyotkorlik talab qiladi.

To'g'ri qo'llanilganda, keshlash ish faoliyatini sezilarli darajada yaxshilaydi va tarmoqli kengligini tejash imkonini beradi. Agar siz URL manzilini osongina o‘zgartira olsangiz yoki server tomonida qayta tekshirishdan foydalansangiz, o‘zgarmas kontentni taqdim eting. Agar siz etarlicha jasoratli bo'lsangiz va kontentingizda sinxronlashdan chiqib ketishi mumkin bo'lgan bog'liqliklar yo'qligiga ishonchingiz komil bo'lsa, maksimal yoshdagi va o'zgaruvchan kontentni aralashtiring.

Veb-saytlarga o'zgartirishlar kiritishda biz ko'pincha sahifalar, CSS fayllari va skriptlar (.js) tarkibi brauzer tomonidan keshlanganligi va uzoq vaqt davomida o'zgarmasligi faktiga duch kelamiz. Bu kiritilgan o'zgarishlar barcha brauzerlarda aks etishi uchun mijozlarni F5 yoki Ctrl + F5 ning murakkab kombinatsiyalariga o'rgatish kerakligiga olib keladi. Va vaqti-vaqti bilan ular bosilganligiga ishonch hosil qiling.

Jarayon juda zerikarli va noqulay. Siz, albatta, har safar fayllar nomini o'zgartirish orqali vaziyatdan chiqib ketishingiz mumkin, lekin yana bu noqulay.

Shu bilan birga, bizga bir xil nomlar bilan qolishimizga va kerakli vaqtda .css yoki .js fayllarini keshlashni tiklashga imkon beradigan usul mavjud. Va Ctrl + F5 ni abadiy unuting.

Xulosa shuki, biz oxirida .css yoki .js fayllarimizga psevdo-parametrni biriktiramiz, uni vaqti-vaqti bilan o'zgartiramiz va shu bilan brauzerdagi keshni qayta tiklaymiz.

Shunday qilib, kirish manba kodi endi shunday ko'rinadi:

Bu erda 186485 bir xil faylni chiqaradigan ixtiyoriy kombinatsiyadir, lekin psevdo-parametr tufayli brauzer uni yangi deb izohlaydi. ?186485

Endi, har safar parametrimizning barcha holatlarini o'zgartirmaslik uchun biz uni PHP fayliga o'rnatamiz, biz uni barcha kerakli joylarga ulaymiz: