Ko'pchilik sukut bo'yicha havola yoki @import orqali ulangan CSS fayllar keshlanmagan deb o'ylaydi. Men sizni xafa qilishim kerak. Aynan CSS alohida faylda keshlangan va u juda yaxshi, men juda zo'r deyman. Ushbu ma'lumot 6 va undan yuqori va boshqa brauzerlarda ishonchli tarzda tekshiriladi. Shunisi e'tiborga loyiqki, ko'plab sevimlilar bunday fayllarni mutlaqo yovvoyi tezlikda keshlaydi, ya'ni aytganda, bu ish uchun birinchi o'rinni egallaydi. Aytgancha, aynan shu mexanizmga ko'ra, Opera ko'p hollarda boshqa brauzerlarga nisbatan sezilarli tezlikka ega. Ammo men darhol shuni ta'kidlaymanki, Opera-dagi ushbu "super" keshlash AJAX texnologiyasidan foydalanganda shafqatsiz hazildir. Boshqalar AJAX-dan foydalanganda chiroyli to'plamlarni o'zgartirsalar, Opera eskisini oladi. Ammo bu alohida mavzuning qo'shig'i.
CSS keshlash
LEKIN! Bu yo'nalishda hali ham ba'zi qayg'uli muammolar mavjud. Bu, qoida tariqasida, noto'g'ri sarlavhalarni ishlab chiqaradigan noto'g'ri tuzilgan Apache serveriga bog'liq. Sarlavha yordamida siz fayllarni keshlashni boshqarishingiz mumkin. Odatiy bo'lib, albatta, kesh har doim yoqilgan. Ammo fayllarni keshlash kerak bo'lmagan holatlar mavjud. Buning uchun professionallar HTTP sarlavhalari haqida daflar bilan raqsga tushishni boshlaydilar. Ammo agar siz ushbu maqolani to'liq o'qiyotgan bo'lsangiz, siz hali ham HTTP sarlavhalarini boshqarishdan juda uzoqdasiz. Sizni ishontirib aytamanki, yaqin kelajakda siz bunday vazifaga duch kelmaysiz. Va shunga qaramay, agar siz tubdan qiziqsangiz, men sizga bu qanday sodir bo'lishini qisqacha aytib beraman.
- HTTP sarlavhasini WEB-serverga yuboradi - ular aytadilar, hoy, shirin qalampir, menga CSS faylini bering, aks holda menda CSS bor, lekin oxirgi marta bunday o'zgarish bo'lgan.
- Va server unga javoban aytadi, juda shirin, o'sha paytdan beri hech qanday o'zgarishlar bo'lmadi, eski CSS-ni dadillik bilan oling va foydalaning.
- Agar CSS o'zgargan bo'lsa, brauzer CSS-ni keshda ahmoqona yangilaydi.
Xo'sh, endi, agar charchamasangiz, unda qandaydir tajribadan ozgina ilmiy axlat.
Men sizga darhol aytaman, pastki matn WEB-da yangi boshlanuvchilar tomonidan yomon tushuniladi. Asosan, bu keshni o'chirish va yoqish vazifalari bilan hali ham duch kelganlar uchun foydali bo'ladi.
Barcha tajribalar haqiqiy, pullik asosda o'tkazildi. Yaxshi hoster, ta'bir joiz bo'lsa, HTTP sarlavhalari tomonidan buzib kirishi haqida paranoyaga hojat qoldirmasdan HTTP sarlavhalarining tuzilishini o'zgartirishga imkon beradi :)
Brauzer rejimlari
Shunday qilib, har qanday brauzer mavjud 2 rejim:
1. Standart rejim, qaytarilgan sarlavha:
Kesh-nazorat: do'kon yo'q, kesh yo'q, qayta tekshirish kerak, tekshirishdan keyingi = 0, oldindan tekshirish = 0
2. Keshni yoqish rejimi, qaytarilgan sarlavha:
Kesh-nazorat: shaxsiy, maksimal yosh = 10800, oldindan tekshirish = 10800
Keyinchalik, men brauzerlarning xatti-harakatlarini tasvirlayman
FireFox 3.5 va undan yuqori
Birinchisida rejimi tashqi JavaScript fayllarini qattiq keshlaydi va sahifani yangilashga majburlamaguningizcha yangilanishlarni ham tekshirmaydi. CSS sarlavha so'rovi bilan tasdiqlangan.
If-Modified-Since: "joriy sana" GMT If-None-Match: "o'z xesh-kodi"
Ya'ni, CSS faqat haqiqatda yangilangan bo'lsa, qayta yuklanadi.
Ikkinchidan rejimi sahifani butunlay yangilashni to'xtatadi. Ya'ni, biz ma'lumotlar bazasidagi sahifada ko'rsatilgan tarkibni o'zgartirgan bo'lsak ham, u yangilashga majbur bo'lsa ham buni ko'rsatmaydi, chunki u so'rov yuboradi:
GET / HTTP / 1.1 Xost: xxx.com If-Modified-Since: joriy GMT sanasi
va javob oladi:
HTTP / 1.1 304 O'zgartirilmagan
Internet Explorer 8 (IE8)
Birinchisida Internet Explorer rejimi JavaScript va CSS uchun If-Modified-Since & If-None-Match so'rovlarini yuboradi, ya'ni JavaScript va CSS-ni faqat ular haqiqatda yangilangan bo'lsa yuklaydi. Agar sahifani yangilashga majbur bo'lsa, xuddi shunday bo'ladi.
Ikkinchidan Internet Explorer rejimi ham JavaScript va CSS uchun If-Modified-Since va If-None-Match so'rovlarini yuboradi. Ammo shu bilan birga, u hatto sahifani o'zi yuklashga / yangilashga urinmaydi, ya'ni so'rov yubormaydi, ya'ni JS/CSS yangilanadi, lekin shablon va sahifa mazmuni yangilanmaydi. Hatto sahifani majburiy yangilash ham tarkibni yangilashga yordam bermaydi.
Opera 10 va undan katta
Birinchisida Opera rejimi, birinchi rejimda, js va CSS yangilanishi sozlamalardagi Tasvirlarni tekshirish opsiyasi qiymatiga bog'liq. Agar parametr “Har doim” ga oʻrnatilgan boʻlsa, opera JS va CSS yangilanishlarini tekshirish uchun If-Modified-Since va If-None-Match bilan soʻrovlarni yuboradi. Agar qiymat o'rnatilgan bo'lsa, masalan, 5 soat, keyin, shunga ko'ra, u har 5 soatda bir marta yoki sahifani majburiy yangilash orqali tekshiriladi.
Ikkinchidan Ushbu rejimda Opera js va CSS yangilanishlarini tekshirmaydi (GET so'rovlarini yubormaydi), shuningdek sahifaning o'zi uchun GET so'rovini qilmaydi, ya'ni biz JS va CSS yangilanishlarini yoki kontent yangilanishlarini ko'rmaymiz, masalan boshqa narsalar va boshqa brauzerlarda. Ammo majburiy yangilanish bilan Opera yaxshiroq. IE va FF-dan farqli o'laroq, Opera sahifa mazmunini If-Modified-Since va If-None-Matchsiz aniq so'raydi. Majburiy yangilash uchun Js va CSS yangilash soʻrovlari If-Modified-Since va If-None-Match bilan birga keladi.
xulosalar
- Keshlash, agar siz uning turli xil brauzerlarda qanday ishlashini va qanday oqibatlarga olib kelishini aniq tushunmasangiz, bu juda xavfli narsa.
- Keshlashni faqat sahifa kamdan-kam yangilanadigan bo'lsa (ya'ni saytda real vaqtda yangilanadigan sahifalar bo'lmasa) yoqish mumkin va hatto bu holatda ham keshlash cheklash muddatiga cheklov qo'yish kerak (masalan, , bir necha soat yoki bir kun)
- Menimcha, FireFox o'zini IE dan biroz aqlliroq tutadi, chunki keshlash o'chirilgan bo'lsa ham, u doimo JavaScript yangilanishlarini tekshirmaydi, bu mantiqiy ko'rinadi, chunki JavaScript juda kam yangilanadi.
- Opera sizga rasmlar, JavaScript va CSS-ning yangilanishini "Tasvirlarni tekshirish" sozlamalari yordamida moslashuvchan boshqarish imkonini beradi, bu esa ortiqcha. Opera shuningdek, keshlash yoqilgan va majburiy yangilash bilan IE va FF ga qaraganda yaxshiroq ishlaydi, chunki sizga eslatib o'taman, Opera bu holatda sahifa tarkibini to'liq yangilaydi va IE & FF sizni baxtli jaholatda qoldiradi.
Omad va foydali saytlar.
To'g'ri sozlangan keshlash katta samaradorlikni ta'minlaydi, tarmoqli kengligini tejaydi va server xarajatlarini kamaytiradi, lekin ko'p saytlar keshlashni yaxshi amalga oshirmaydi, bu esa tegishli resurslar o'rtasida sinxronlashning buzilishiga olib keladigan poyga holatini yaratadi.
Eng yaxshi keshlash amaliyotlarining aksariyati ikkita naqshdan biriga to'g'ri keladi:
Shakl №1: o'zgarmas tarkib va keshning uzoq maksimal yoshi
Kesh-nazorat: maksimal yosh = 31536000- URLdagi tarkib o'zgarmaydi, shuning uchun ...
- Brauzer yoki CDN resursni bir yil davomida muammosiz keshlashi mumkin
- Belgilangan maksimal yoshdan kichik keshlangan kontentdan server bilan maslahatlashmasdan foydalanish mumkin
Sahifa : Hey, menga "/script-v1.js", "/styles-v1.css" va "/cats-v1.jpg" kerak 10:24
Kesh : Men bo'sh qoldim, sen-chi Server? 10:24
Server : OK, ular shu yerda. Aytgancha, Cash, ular bir yil ichida ishlatilishi kerak, ko'proq emas. 10:25
Kesh : RAHMAT! 10:25
Sahifa : Xayr! 10:25
Ertasiga; ertangi kun
Sahifa : Hey, menga "/ skript kerak v2.js "," / uslublar- v2.css "va" /cats-v1.jpg "08:14
Kesh : Mushuklar bilan rasm bor, qolganlari yo'q. Servermi? 08:14
Server : Oson - bu yerda yangi CSS & JS. Yana bir bor, Cash: ularning saqlash muddati bir yildan ortiq emas. 08:15
Kesh : Super! 08:15
Sahifa : rahmat! 08:15
Kesh : Hmm, men "/script-v1.js" va "/styles-v1.css" dan uzoq vaqt foydalanmadim. Ularni yo'q qilish 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'zgarib turadigan narsa bor. Bu versiya raqami, o'zgartirilgan sana yoki tarkibning xeshi bo'lishi mumkin (bu mening blogim uchun tanlagan variant).
Aksariyat server tomonidagi ramkalar bunday ishlarni osonlik bilan bajarish uchun vositalarga ega (Django-da men Manifest Static Files Storage-dan foydalanaman); Node.js da gulp-rev kabi xuddi shunday ishni bajaradigan juda kichik kutubxonalar ham mavjud.
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 juda ko'p grammatika va tinish belgilarida xatolar bor va kontentni tezda yangilashim kerak.
Shakl №2: serverda har doim qayta tasdiqlanadigan o'zgaruvchan tarkib
Kesh-nazorat: kesh yo'q- URL mazmuni o'zgaradi, shuning uchun ...
- Har qanday mahalliy keshlangan versiyadan serverni ko'rsatmasdan foydalanib bo'lmaydi.
Sahifa : Hey, menga "/ about /" va "/sw.js" 11:32 mazmuni kerak
Kesh : Unga yordam bera olmayman. Servermi? 11:32
Server : Bundaylar bor. Naqd pul, ularni o'zingiz bilan saqlang, lekin ishlatishdan oldin mendan so'rang. 11:33
Kesh : Xuddi shunday! 11:33
Sahifa : RAHMAT! 11:33
Keyingi kunda
Sahifa : Hey, menga yana "/ about /" va "/sw.js" ning mazmuni kerak 09:46
Kesh : Bir daqiqa kuting. Server, mening nusxalarim yaxshimi? “/ about /” nusxasi dushanbadan, “/sw.js” esa kechagidan. 09:46
Server : "/sw.js" o'zgarmadi ... 09:47
Kesh : Ajoyib. Sahifa, “/sw.js” tugmachasini bosib turing. 09:47
Server : ... lekin "/ haqida /" Menda yangi versiya bor. Naqd pul, uni ushlab turing, lekin oxirgi marta bo'lgani kabi, avval mendan so'rashni unutmang. 09:47
Kesh : Tushundim! 09:47
Sahifa : Yaxshi! 09:47
Eslatma: kesh yo'q "kesh saqlamang" degani emas, bu keshlangan resursni serverdan "tekshirish" (yoki qayta tekshirish) degan ma'noni anglatadi. No-do'kon brauzerga umuman kesh saqlamaslikni buyuradi. Shuningdek, revalidatsiya qilish sharti majburiy qayta tekshirishni anglatmaydi, balki keshlangan resurs belgilangan maksimal yoshdan kichikroq bo‘lsagina foydalaniladi, aks holda u qayta tasdiqlanadi. Bu kalit so'zlarni keshlash bilan boshlanadi.
Ushbu naqshda siz javobga ETag (siz tanlagan versiya identifikatori) yoki oxirgi tahrirlangan sarlavhani qo'shishingiz mumkin. Mijozdan keyingi kontent so'rovida u mos ravishda If-None-Match yoki If-Modified-Since ni chiqaradi, bu esa serverga "Sizda bor narsadan foydalaning, keshingiz yangilangan" deyishiga imkon beradi, ya'ni HTTPni qaytarish uchun. 304.
Agar ETag / Oxirgi o'zgartirilgan yuborish imkoni bo'lmasa, server har doim butun tarkibni yuboradi.
Ushbu naqsh har doim tarmoq so'rovlarini talab qiladi, shuning uchun tarmoq so'rovlarisiz bajariladigan birinchi naqsh kabi yaxshi emas.
Birinchi naqsh uchun infratuzilmaga ega bo'lmaganimizda tez-tez uchraydigan holat emas, lekin 2 naqshdagi 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, keng tarqalgan, Github sahifalarini misol qilib olish mumkin.
Tasavvur qiling:
- / maqola /
- /styles.css
- /script.js
Server tomoni sarlavhasi bilan:
Kesh-nazorat: qayta tekshirish kerak, maksimal yosh = 600
- URL mazmuni o'zgaradi
- Agar brauzerda keshlangan yangi 10 daqiqalik versiya mavjud bo'lsa, u server bilan maslahatlashmasdan ishlatiladi
- Agar bunday kesh bo'lmasa, tarmoq so'rovi, ehtimol If-Modified-Since yoki If-None-Match bilan ishlatiladi.
Sahifa : Hey, menga "/ article /", "/script.js" va "/styles.css" kerak 10:21
Kesh : Menda sizga o'xshagan 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
Kesh : U yerda! 10:22
Sahifa : RAHMAT! 10:22
Sahifa : Hey, menga yana "/ article /", "/script.js" va "/styles.css" kerak 10:28
Kesh : Kechirasiz, men "/styles.css" ni yo'qotdim, lekin menda hamma narsa bor, oling. Server, men uchun "/styles.css" ni sozlay olasizmi? 10:28
Server : Oson, oxirgi marta olganingizdan beri u allaqachon o'zgargan. Keyingi 10 daqiqa davomida uni xavfsiz ishlatishingiz mumkin. 10:29
Kesh : Muammosiz. 10:29
Sahifa : rahmat! Lekin nimadir noto'g'ri ketganga o'xshaydi! Hammasi buzilgan! Nima bo'lyapti o'zi? 10:29
Ushbu naqsh sinovda yashash 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 serverdan yangilangan CSS qo'shilgan keshdagi eski HTML va JS bilan ko'rsatiladi. Versiyaning mos kelmasligi hamma narsani buzadi.
Ko'pincha HTML-ga sezilarli o'zgartirishlar kiritayotganda, biz yangi tuzilmani to'g'ri aks ettirish uchun CSS-ni ham, tarkib va uslublardan xabardor bo'lish uchun JavaScript-ni o'zgartiramiz. Bu resurslarning barchasi mustaqildir, lekin kesh sarlavhalari buni ifoda eta olmaydi. Natijada, foydalanuvchilar bitta / ikkita manbaning so'nggi versiyasiga va qolganlarning eski versiyasiga ega bo'lishlari mumkin.
max-age javob vaqtiga nisbatan o'rnatiladi, shuning uchun agar barcha resurslar bir xil manzilning bir qismi sifatida o'tkazilsa, ular bir vaqtning o'zida tugaydi, ammo sinxronizatsiya qilishning kichik imkoniyati hali ham 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'liq ekanligini bilmay, doimiy ravishda keshdan tarkibni tortib oladi, shuning uchun u ro'yxatni baxtli ravishda olib tashlashi va qolgan hamma narsani unutishi mumkin. Ushbu omillarning barchasini birgalikda hisobga olgan holda, mos kelmaslik versiyalari 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 saqlaydi
Agar sahifa yangilanish orqali yuklangan bo'lsa, brauzerlar har doim maksimal yoshni e'tiborsiz qoldirib, server tomonidan qayta tekshirishni amalga oshiradilar. Shuning uchun, agar foydalanuvchi maksimal yoshi tufayli biror narsa buzilgan bo'lsa, oddiy sahifani yangilash hamma narsani tuzatishi mumkin. Lekin, albatta, qoshiqlar topilgandan so'ng, cho'kma 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 xizmatchi bor:
Const versiyasi = "2"; self.addEventListener ("o'rnatish", voqea => (event.waitUntil (kesh.open (`statik - $ (versiya))) .keyin (kesh => cache.addAll (["/styles.css", "/ skript .js "])));)); self.addEventListener ("faollashtirish", hodisa => (//… eski keshlarni o'chirish ...)); self.addEventListener ("olish", voqea => (event.respondWith (keshlar.match (voqea. so'rov) .keyin) (javob => javob || olib kelish (voqea. so'rov)));));
Ushbu xizmat xodimi:
- skript va uslublarni keshlaydi
- o'yinda 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 tushib qolishimiz mumkin.
Ular keshlangandan so'ng, biz xizmat ko'rsatuvchi xodimning keyingi yangilanishigacha mos kelmaydigan CSS va JS-ga ega bo'lamiz - va bu yangilanish paytida biz yana poyga holatiga tushmasak.
Xizmat xodimida keshlashni o'tkazib yuborishingiz mumkin:
Self.addEventListener ("o'rnatish", voqea => (event.waitUntil (keshlar.open (`statik - $ (versiya))) .keyin (kesh => cache.addAll ([yangi so'rov ("/ styles.css), (kesh: "no-kesh")), yangi so'rov ("/ script.js", (kesh: "kesh yo'q"))])));));
Afsuski, Chrome/Opera-da keshlash opsiyalari qo‘llab-quvvatlanmaydi va endigina Firefox tungi tuzilishiga qo‘shilgan, ammo buni o‘zingiz qilishingiz mumkin:
Self.addEventListener ("o'rnatish", voqea => (event.waitUntil (keshlar.open (`statik - $ (versiya))) .keyin (kesh => Promise.all (["/styles.css", "/ skript .js "] .map (url => (// kesh-bust tasodifiy soʻrovlar satrini qaytarish (` $ (url)? $ (Math.random ()) `) .keyin (javob => (// muvaffaqiyatsiz) 404, 500 va hokazolarda, agar (! javob.ok) xato bo'lsa ("Yaxshi emas"); cache.put (url, javob);)))))))))))));
Ushbu misolda men tasodifiy raqam yordamida keshni tozalayapman, lekin siz davom eting va qurilishda tarkibning xeshini qo'shishingiz mumkin (bu sw-precache qiladigan narsaga o'xshaydi). Bu birinchi namunadagi JavaScript-ni amalga oshirishning bir turi, lekin u brauzerlar va CDN-lar emas, balki faqat xizmat ko'rsatuvchi ishchi bilan ishlaydi.
Xizmat ishchilari 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. Keshlashni to'g'ri sozlash nafaqat xizmat ko'rsatuvchi xodimning ishini osonlashtiradi, balki xizmat ko'rsatuvchi ishchilarni (Safari, IE / Edge) qo'llab-quvvatlamaydigan brauzerlarga ham yordam beradi va CDN-dan maksimal darajada foydalanish imkonini beradi.
To'g'ri keshlash sarlavhalari ham xizmat xodimini yangilashni ancha osonlashtirishi mumkin.
Const versiyasi = "23"; self.addEventListener ("o'rnatish", voqea => (event.waitUntil (keshlar.open (`statik - $ (versiya))) .keyin (kesh => cache.addAll (["/", "/ script-f93bca2c. js "," /styles-a837cb1e.css "," /cats-0e9a2ef4.jpg "])));));
Bu erda men №2 naqsh (server tomonida qayta tekshirish) va №1 naqsh (o'zgarmas kontent) bilan boshqa barcha resurslar bilan ildiz sahifani keshlashtirdim. Xizmat ko'rsatuvchi xodimning har bir yangilanishi ildiz sahifasiga so'rovni keltirib chiqaradi va boshqa barcha resurslar faqatgina URL manzili o'zgargan taqdirda yuklanadi. Yaxshi xabar shundaki, u oldingi versiyadan yoki juda eski versiyadan yangilanayotgan bo'lsangiz ham, trafikni tejaydi va ish faoliyatini yaxshilaydi.
Bu erda mahalliy dasturga nisbatan sezilarli ustunlik mavjud, bu erda butun ikkilik kichik o'zgarishlar bilan ham yuklab olinadi yoki murakkab ikkilik taqqoslashlarni chaqiradi. Shu tarzda biz nisbatan kichik yuklangan katta veb-ilovani yangilashimiz mumkin.
Xizmat ko'rsatuvchi xodimlar 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 shartlari muammo emas, chunki sahifada bir xil keshlash naqshidan foydalangan holda bog'liqliklar yo'q (CSS, JS va tasvirlar №1 naqshdan foydalanadi - o'zgarmas kontent), qolgan hamma narsa bu naqshdan foydalanmaydi.
Ushbu naqsh men mashhur maqolani xotirjam yozayotganimni anglatadi va mening CDN (Cloudflare) serverdan yukni olib tashlashi mumkin, agar men yangilangan maqola foydalanuvchilar uchun mavjud bo'lishi uchun uch daqiqa kutishga tayyor bo'lsam.
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 bosib, o'zi qidirayotgan 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 ishlatilsa, keshlash sezilarli ishlash va o'tkazish qobiliyatini tejash imkonini beradi. Agar siz URL manzilini osongina o'zgartira olsangiz yoki server tomonidan qayta tekshirishdan foydalansangiz, o'zgarmas kontentni o'tkazing. Kontentingizda sinxronlashtirilmasligi mumkin bo'lgan bog'liqliklar yo'qligiga ishonch hosil qilish uchun etarlicha dadil bo'lsangiz, maksimal yoshdagi va o'zgaruvchan kontentni aralashtiring.
Tashqi CSS va Javascriptni qo'shish orqali biz keraksiz HTTP so'rovlarini minimal darajaga tushirmoqchimiz.
Buning uchun .js va .css fayllari ishonchli keshlashni ta'minlovchi sarlavhalar bilan xizmat qiladi.
Ammo ishlab chiqish jarayonida ushbu fayllardan biri o'zgarsa nima bo'ladi? Barcha foydalanuvchilar keshda eski versiyaga ega - kesh eskirganiga qadar, server va mijoz qismlarining buzilgan integratsiyasi haqida ko'plab shikoyatlar keladi.
Keshlash va versiyalashning to'g'ri usuli bu muammoni butunlay yo'q qiladi va uslublar / skript versiyalarining ishonchli, shaffof sinxronizatsiyasini ta'minlaydi.
Oson ETag keshlash
Statik resurslarni keshlashning eng oson yo'li ETag-dan foydalanishdir.
Tegishli server sozlamalarini yoqish kifoya (Apache uchun u sukut bo'yicha yoqilgan) - va sarlavhalardagi har bir faylga ETag beriladi - yangilanish vaqtiga, fayl hajmiga va (inode-ga asoslangan fayl tizimlarida) bog'liq xesh. ) inode.
Brauzer bunday faylni keshlaydi va keyingi so'rovlarda keshlangan hujjatning ETagidan 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: sayt
Umuman olganda, brauzer odatda User-Agent, Accept va hokazo kabi sarlavhalar to'plamini qo'shadi. Ular qisqalik uchun kesiladi.
Server javobi Server javob sifatida 200 kodi va ETag bilan hujjat yuboradi: HTTP / 1.x 200 OK Content-Encoding: gzip Content-Type: text / javascript; charset = utf-8 Etag: "3272221997" Qabul qilish diapazonlari: bayt Kontent uzunligi: 23321 Sana: 2008-yil, 02-may 17:22:46 GMT Server: lighttpd Keyingi so'rov bo'yicha brauzer If-None-Match qo'shadi: (keshlangan ETag): GET /misc/pack.js HTTP / 1.1 Xost: sayt If-None-Match: "453700005" Server javobi Server qidirmoqda - ha, hujjat o'zgarmagan. Bu siz 304 kodini chiqarishingiz va hujjatni boshqa yubormasligingiz mumkinligini anglatadi. HTTP / 1.x 304 O'zgartirilmagan kontent-kodlash: gzip Etag: "453700005" Kontent turi: matn / javascript; charset = utf-8 Qabul qilish diapazonlari: baytlar Sana: seshanba, 15 aprel 2008 yil 10:17:11 GMT
Shu bilan bir qatorda, agar hujjat o'zgargan bo'lsa, server shunchaki yangi ETag bilan 200 yuboradi.
Last-Modified + If-Modified-Since to'plami xuddi shunday ishlaydi:
- server oxirgi o'zgartirilgan sanani oxirgi tahrirlangan sarlavhaga yuboradi (ETag o'rniga)
- brauzer hujjatni keshlaydi va xuddi shu hujjatning keyingi so'rovida 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 yuboradi, kontent yo'q.
Ushbu usullar barqaror va yaxshi ishlaydi, lekin brauzer har bir skript yoki uslub uchun baribir talabga binoan buni amalga oshirishi kerak.
Aqlli keshlash. Versiyalash
Versiyalashning umumiy yondashuvi qisqacha:
- Versiya (yoki o'zgartirish sanasi) barcha skriptlarga qo'shiladi. Masalan, http: // site / my.js http: // saytga aylanadi my.v1.2.js
- Barcha skriptlar brauzer tomonidan qattiq keshlangan
- Skript yangilanganda, versiya yangisiga o'zgaradi: http: // site / my.v2.0.js
- Manzil o'zgardi, shuning uchun brauzer faylni yana 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:
Sarlavha ("Muddati tugaydi:" .gmdate ("D, d M Y H: i: s", vaqt () + 86400 * 365). "GMT"); sarlavha ("Kesh-nazorat: max-age =" + 86400 * 365);
Yoki Apache'da mod_header yordamida kontentni uzoq vaqt keshlashingiz mumkin:
Bunday sarlavhalarni olgandan so'ng, brauzer hujjatni uzoq vaqt davomida qattiq keshlaydi. Hujjatga keyingi barcha qo'ng'iroqlar serverga murojaat qilmasdan to'g'ridan-to'g'ri brauzer keshidan amalga oshiriladi.
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 echimdan foydalanishingiz kerak, biz buni maqolada keyinroq ko'rib chiqamiz.
P.S Ammo Firefox manzillarni savol belgilari bilan keshlaydi.
Avtomatik nom tarjimasi
Keling, fayllarning nomini o'zgartirmasdan versiyalarni avtomatik va shaffof tarzda qanday o'zgartirishni ko'rib chiqaylik.
Versiya nomi -> Fayl
Eng oddiy narsa versiya nomini 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]
Ushbu qoida barcha CSS / js / gif / png / jpg fayllarini 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 keshlangan sarlavhalarni 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 "maksimal yosh = 315360000"
Va barchasi birgalikda shunday 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 versiyasi fayllari Sarlavha "Muddati tugaydi" qo'shiladi "2014 yil 28-iyul, dushanba, 23:30:00 GMT" env = VERSIONED_FILE Sarlavhasi "Kesh-nazorat" "max-age = 315360000" env = VERSIONED_FILE
Mod_rewrite modulining ishlash usuli tufayli RewriteRule asosiy konfiguratsiya httpd.conf fayliga yoki unga ulangan fayllarga joylashtirilishi kerak, lekin hech qanday holatda .htaccess da, aks holda Sarlavha buyruqlari undan oldin ishga tushiriladi. o'rnatilgan o'zgaruvchi VERSIONED_FILE.
Sarlavha direktivalari istalgan joyda, hatto .htaccess da bo'lishi mumkin - farq yo'q.
HTML sahifasidagi fayl nomiga avtomatik ravishda versiya qo'shing
Skript nomiga versiyani qanday qo'yish shablon tizimiga va umuman, skriptlarni (uslublar va boshqalar) qanday qo'shishingizga 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 $ versiyasi. \ $ 1 ", $ args [" src "]);)
Natija sahifada:
Optimallashtirish
Keraksiz statistika qo'ng'iroqlarini oldini olish uchun siz joriy versiyalar ro'yxatini alohida o'zgaruvchida saqlashingiz mumkin.
$ versiyalari ["css"] = massiv ("group.css" => "1.1", "other.css" => "3.0",)
Bunday holda, HTML oddiygina massivdagi joriy versiya bilan almashtiriladi.
Siz ikkala yondashuvni kesib o'tishingiz va ishlab chiqish jarayonida o'zgartirish sanasi bo'yicha versiyani chiqarishingiz mumkin - dolzarbligi uchun va ishlab chiqarishda - ishlash uchun massivdan versiya.
Qo'llanilishi
Ushbu keshlash usuli hamma joyda ishlaydi, jumladan Javascript, CSS, tasvirlar, flesh-filmlar va boshqalar.
Hujjat o'zgarganda foydali bo'ladi, lekin brauzerda har doim joriy versiya bo'lishi kerak.