Гадаад CSS болон Javascript-ийг оруулснаар бид шаардлагагүй HTTP хүсэлтийг хамгийн бага хэмжээнд хүртэл бууруулахыг хүсч байна.

Энэ зорилгоор .js болон .css файлууд нь найдвартай кэшийг баталгаажуулдаг толгойгоор үйлчилдэг.

Гэхдээ хөгжүүлэлтийн явцад эдгээр файлуудын аль нэг нь өөрчлөгдөхөд та яах вэ? Бүх хэрэглэгчид үүнийг кэшэд хадгалдаг хуучин хувилбар- кэш хуучирч дуустал сервер болон үйлчлүүлэгчийн хэсгүүдийн эвдэрсэн эвдэрсэн тухай гомдол их гарах болно.

Зөв кэш хийх, хувилбар гаргах нь энэ асуудлыг бүрмөсөн арилгаж, загвар/скрипт хувилбаруудын найдвартай, ил тод синхрончлолыг хангадаг.

Энгийн ETag кэш

Статик нөөцийг кэшлэх хамгийн энгийн арга бол ETag ашиглах явдал юм.

Тохиромжтой серверийн тохиргоог идэвхжүүлэхэд хангалттай (Apache-ийн хувьд энэ нь анхдагчаар идэвхжсэн) бөгөөд толгой хэсэгт байгаа файл бүрт ETag-ыг өгөх болно - шинэчлэлтийн хугацаа, файлын хэмжээ болон (inode дээр суурилсан) зэргээс хамаарна. файлын системүүд) inode.

Хөтөч нь ийм файлыг кэш болгож, дараагийн хүсэлтээр кэш хийсэн баримтын ETag-тай If-None-Match толгой хэсгийг зааж өгдөг. Ийм толгойг хүлээн авсны дараа сервер 304 кодоор хариу өгөх боломжтой бөгөөд дараа нь баримтыг кэшээс авах болно.

Энэ нь дараах байдалтай харагдаж байна.

Серверт өгөх анхны хүсэлт (кэш цэвэрлэх) /misc/pack.js HTTP/1.1 Host: вэб сайт

Ерөнхийдөө хөтөч нь ихэвчлэн User-Agent, Accept гэх мэт олон толгойг нэмдэг. Тэдгээрийг товчлохын тулд таслав.

Серверийн хариулт Сервер нь 200 код болон ETag бүхий баримт бичигт хариу өгдөг: HTTP/1.x 200 OK Контент-кодчилол: gzip Агуулга-Төрөл: текст/javascript; charset=utf-8 Etag: "3272221997" Зөвшөөрөх хүрээ: байт Агуулгын урт: 23321 Огноо: Баасан, 2008 оны 5-р сарын 02 17:22:46 GMT Сервер: lighttpd Дараагийн хүсэлтээр хөтөч нь If-None-г нэмдэг. -Тааруулах: (кэшлэгдсэн ETag): GET /misc/pack.js HTTP/1.1 Хост: сайт If-None-Match: "453700005" Серверийн хариу Сервер харагдаж байна - тийм ээ, баримт өөрчлөгдөөгүй байна. Энэ нь та 304 код гаргаж, баримтыг дахин илгээхгүй гэсэн үг юм. HTTP/1.x 304 Өөрчлөгдөөгүй контент-кодчилол: gzip Etag: "453700005" Агуулгын төрөл: текст/javascript; charset=utf-8 Зөвшөөрөх хүрээ: байт Огноо: Мягмар, 2008 оны 4-р сарын 15 10:17:11 GMT

Альтернатив сонголт- хэрэв баримт бичиг өөрчлөгдсөн бол сервер зүгээр л шинэ ETag-тай 200 илгээдэг.

Last-Modified + If-Modified-Since хослол нь ижил төстэй байдлаар ажилладаг:

сервер нь сүүлчийн өөрчлөлтийн огноог Сүүлд өөрчилсөн толгой хэсэгт илгээдэг (ETag-ийн оронд)

Хөтөч нь баримтыг кэш болгож, дараагийн удаа ижил баримт бичгийн хүсэлт гаргахад кэш хийгдсэн хувилбарын огноог If-Modified-Since толгой хэсэгт илгээдэг (If-None-Match-ийн оронд)

сервер нь огноог шалгадаг бөгөөд хэрэв баримт бичиг өөрчлөгдөөгүй бол агуулгагүйгээр зөвхөн 304 кодыг илгээдэг.

Эдгээр аргууд нь найдвартай бөгөөд сайн ажилладаг боловч хөтөч нь скрипт эсвэл загвар бүрийн хүсэлтийг гаргах шаардлагатай хэвээр байна.

Ухаалаг кэш. Хувилбар хийх

Хувилбар хийх ерөнхий арга - товчхондоо:

Хувилбар (эсвэл өөрчилсөн огноо) нь бүх скриптэд нэмэгддэг. Жишээ нь http://site/my.js нь http://site/my.v1.2.js болно

Бүх скриптүүд нь хөтөч дээр хатуу хадгалагдсан байдаг

Скриптийг шинэчлэх үед хувилбар нь шинэ хувилбар болж өөрчлөгдөнө: http://site/my.v2.0.js

Хаяг өөрчлөгдсөн тул хөтөч дахин хүсэлт гаргаж, файлыг кэш хийх болно

Хуучин хувилбар 1.2 аажмаар кэшээс гарах болно

Хатуу кэш

Хатуу кэш- кэштэй баримт бичгийг серверт илгээх хүсэлтийг бүрэн хадаг нэгэн төрлийн лантуу.

Үүнийг хийхийн тулд зөвхөн Expires болон Cache-Control: max-age гарчгийг нэмнэ үү.

Жишээлбэл, PHP дээр 365 хоногийн турш кэш хийх:

Толгой("Хугацаа дуусах: ".gmdate("D, d M Y H:i:s", time()+86400*365)." GMT"); толгой("Кэш-Хяналт: max-age="+86400*365);

Эсвэл та Apache дээрх mod_header ашиглан агуулгыг байнга кэш болгож болно:

Ийм толгойг хүлээн авсны дараа хөтөч нь баримтыг удаан хугацаанд хадгалдаг. Баримт бичигт хандах бүх хандалтыг сервертэй холбоо барихгүйгээр хөтчийн кэшээс шууд хийх болно.

Ихэнх хөтчүүд (Opera, Internet Explorer 6+, Safari) Хаягт асуултын тэмдэг байгаа бол баримт бичгүүд нь динамик гэж тооцогддог тул кэш хийж болохгүй.

Тиймээс бид файлын нэр дээр хувилбарыг нэмдэг. Мэдээжийн хэрэг, ийм хаягтай бол та mod_rewrite гэх мэт шийдлийг ашиглах хэрэгтэй, бид үүнийг нийтлэлийн дараа авч үзэх болно.

P.S Гэхдээ Firefox асуултын тэмдэг бүхий хаягуудыг кэшээр хадгалдаг...

Автомат нэрийн шийдэл

Файлуудын нэрийг өөрчлөхгүйгээр хувилбаруудыг хэрхэн автоматаар, ил тод байдлаар өөрчлөхийг харцгаая.

Хувилбартай нэр -> Файл

Хамгийн энгийн зүйл бол хувилбартай нэрийг анхны файлын нэр болгон хувиргах явдал юм.

Apache түвшинд үүнийг mod_rewrite ашиглан хийж болно:

RewriteRule дээрх RewriteEngine ^/(.*\.)v+\.(css|js|gif|png|jpg)$ /$1$2 [L]

Энэ дүрэм нь бүх css/js/gif/png/jpg файлуудыг боловсруулж, хувилбарыг нэрнээс нь хасдаг.

Жишээлбэл:

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

Гэхдээ хувилбарыг хасахаас гадна файлуудад хатуу кэшийн толгойг нэмэх хэрэгтэй. Үүнд mod_header удирдамжийг ашигладаг:

Толгой хэсэгт "Дуусгана" нэмэх "2014 оны 7-р сарын 28-ны Даваа, 23:30:00 GMT" Гарчиг нэмэх "Кэш-Хяналт" "max-age=315360000"

Энэ нь хамтдаа дараах Apache тохиргоог хэрэгжүүлдэг:

RewriteEngine дээр # хувилбарыг устгаж, файлын хувилбартай байгаа хувьсагчийг тохируулдаг RewriteRule ^/(.*\.)v+\.(css|js|gif|png|jpg)$ /$1$2 # хатуу кэш хувилбартай файлууд Толгой хэсэгт "Дуусгана" нэмэх "2014 оны 7-р сарын 28-ны Даваа, 23:30:00 GMT" env=VERSIONED_FILE Толгой хэсэгт "Cache-Control" нэмэх "max-age=315360000" env=VERSIONED_FILE

Mod_rewrite модуль хэрхэн ажилладаг тул RewriteRule-г үндсэн хэсэгт байрлуулах шаардлагатай. тохиргооны файл httpd.conf эсвэл хавсаргасан файлууд, гэхдээ .htaccess-д хэзээ ч байхгүй, эс тэгвээс VERSIONED_FILE хувьсагчийг тохируулахаас өмнө Толгойн командуудыг эхлээд ажиллуулна.

Толгойн удирдамж нь .htaccess-д ч гэсэн хаана ч байж болно - энэ нь хамаагүй.

HTML хуудсан дээрх файлын нэрэнд автоматаар хувилбар нэмэх

Хувилбарыг скриптийн нэрэнд хэрхэн оруулах нь таны загварын систем, ерөнхийдөө скрипт (загвар гэх мэт) нэмэх аргаас хамаарна.

Жишээлбэл, өөрчлөлтийн огноог хувилбар болон Smarty загвар хөдөлгүүр болгон ашиглах үед холбоосыг дараах байдлаар тохируулж болно.

Хувилбарын функц нь хувилбарыг нэмдэг:

Функц smarty_version($args)( $stat = stat($GLOBALS["config"]["site_root"].$args["src"]); $version = $stat["mtime"]; echo preg_replace("! \.(+?)$!", ".v$ хувилбар.\$1", $args["src"]); )

Хуудасны үр дүн:

Оновчлол

Шаардлагагүй статистик дуудлагаас зайлсхийхийн тулд та одоогийн хувилбаруудын жагсаалт бүхий массивыг тусдаа хувьсагчд хадгалах боломжтой.

$хувилбарууд["css"] = массив("group.css" => "1.1", "other.css" => "3.0", )

Энэ тохиолдолд массивын одоогийн хувилбарыг зүгээр л HTML-д орлуулна.

Та хоёр хандлагыг давж гарах боломжтой бөгөөд хөгжүүлэлтийн явцад өөрчлөлтийн огноогоор - хамааралтай, үйлдвэрлэлд - гүйцэтгэлийн хувьд массиваас хувилбар гаргаж болно.

Хэрэглэх чадвар

Энэхүү кэш хийх арга нь Javascript, CSS, зураг, Flash кино гэх мэт хаа сайгүй ажилладаг.

Энэ нь баримт бичиг өөрчлөгдөх бүрт хэрэг болох боловч хөтөч нь үргэлж хамгийн сүүлийн үеийн хувилбартай байх ёстой.

Кэш нь мэдээллийн сан, вэб сервер, мөн үйлчлүүлэгчтэй ажиллах түвшинд бараг бүх вэб програмын үйл ажиллагаанд чухал үүрэг гүйцэтгэдэг.

Энэ нийтлэлд бид үйлчлүүлэгчийн кэшийг ойлгохыг хичээх болно. Ялангуяа, бид вэб хөтчүүд болон вэб серверүүд ямар HTTP толгойг ашигладаг, тэдгээр нь юу гэсэн үг болохыг авч үзэх болно.

Гэхдээ эхлээд үйлчлүүлэгчийн кэш яагаад хэрэгтэй байгааг олж мэдье? .

Вэб хуудаснууд нь олон хэсгээс бүрддэг янз бүрийн элементүүд: зураг, css болон js файлууд гэх мэт. Эдгээр элементүүдийн заримыг сайтын хэд хэдэн (олон) хуудсанд ашигладаг. Үйлчлүүлэгч талын кэш гэдэг нь хөтчүүд файлуудыг дахин татаж авахгүйн тулд хуулбарыг (серверийн хариу) хадгалах чадварыг хэлнэ. Энэ нь хуудсыг дахин ачаалах үйл явцыг ихээхэн хурдасгах, урсгалыг хэмнэх, мөн серверийн ачааллыг бууруулах боломжийг олгоно.

Үйлчлүүлэгчийн кэш процессыг удирдах хэд хэдэн өөр HTTP толгойнууд байдаг. Тэд тус бүрийн талаар ярилцъя.

Үйлчлүүлэгчийн кэшийг хянахын тулд Http толгой

Эхлээд ямар нэгэн кэш байхгүй үед сервер болон хөтөч хэрхэн харьцаж байгааг харцгаая. Ойлгомжтой байхын тулд би тэдний хоорондын харилцааны үйл явцыг текст чат хэлбэрээр төсөөлж, төсөөлөхийг хичээсэн. Хэдэн минутын турш сервер болон хөтөч нь хоорондоо харилцдаг хүмүүс гэж төсөөлөөд үз дээ :)

Кэшгүй (http толгойн кэш байхгүй тохиолдолд)

Бидний харж байгаагаар cat.png дүрс гарч ирэх бүрт хөтөч серверээс дахин татаж авах болно. Үүнийг удаан, үр дүнгүй гэж тайлбарлах шаардлагагүй гэж бодож байна.

Сүүлд өөрчилсөн хариултын толгой хэсэг ба if-Modified-Since хүсэлтийн толгой хэсэг.

Гол санаа нь сервер нь хөтөч рүү өгсөн файлд (хариу) Сүүлд өөрчилсөн толгой хэсгийг нэмдэг.

Хөтөч одоо 2014 оны 12-р сарын 1-нд файл үүсгэгдсэн (эсвэл өөрчилсөн) гэдгийг мэдэж байна. Дараагийн удаа хөтөч ижил файлыг ашиглах шаардлагатай бол if-Modified-Since толгой хэсэгтэй хүсэлт илгээх болно.

Хэрэв файл өөрчлөгдөөгүй бол сервер 304 (Өөрчлөгдөөгүй) статустай хоосон хариултыг хөтөч рүү илгээдэг. Энэ тохиолдолд хөтөч нь файл шинэчлэгдээгүй гэдгийг мэддэг бөгөөд хамгийн сүүлд хадгалсан хуулбарыг харуулах боломжтой.

Тиймээс Last-modified-ийг ашигласнаар бид ачааллаа хэмнэдэг том файл, серверээс хоосон хурдан хариу илгээх.

Etag хариултын толгой хэсэг болон If-None-Match хүсэлтийн толгой хэсэг.

Etag-ийн ажиллах зарчим нь Last-modified-тэй маш төстэй боловч үүнээс ялгаатай нь энэ нь цаг хугацаатай холбоогүй юм. Цаг хугацаа бол харьцангуй зүйл.

Гол санаа нь үүнийг үүсгэх үед болон өөрчлөгдөх бүрт сервер нь ETag нэртэй тусгай шошго бүхий файлыг таглахаас гадна хөтчид өгөх файлд (хариу) толгойг нэмж өгдөг.

ETag: "686897696a7c876b7e"

Одоо хөтөч нь одоогийн хувилбарын файл нь "686897696a7c876b7e"-тэй тэнцэх ETag-тай болохыг мэдэж байна. Дараагийн удаа хөтчид ижил файл хэрэгтэй бол "686897696a7c876b7e" If-None-Match толгойтой хүсэлт илгээх болно.

Хэрэв-Тохирохгүй бол: "686897696a7c876b7e"

Сервер нь шошгуудыг харьцуулж болох бөгөөд хэрэв файл өөрчлөгдөөгүй бол 304 (Өөрчлөгдөөгүй) статустай хоосон хариултыг хөтөч рүү илгээнэ. Last-modified-ийн нэгэн адил хөтөч нь файл шинэчлэгдээгүй байгааг олж мэдээд кэшээс хуулбарыг харуулах боломжтой болно.

Гарчгийн хугацаа дууссан

Энэ толгойн ажиллах зарчим нь дээр дурдсан Etag болон Last-modified-ээс ялгаатай. Хугацаа дууссан гэснийг ашиглан файлын "хугацаа дуусах огноо" ("холбогдох хугацаа")-ыг тодорхойлно. Тэдгээр. Эхний ачааллын үед сервер нь Хугацаа дууссан хэсэгт заасан огноо хүртэл файлыг өөрчлөхөөр төлөвлөөгүй гэдгээ хөтөчдөө мэдэгдэнэ.

Дараагийн удаа хөтөч "хугацаа дуусах хугацаа" хараахан ирээгүй байгааг мэдээд серверт хүсэлт гаргахыг оролдохгүй бөгөөд кэшээс файлыг харуулах болно.

Энэ төрлийн кэш нь нийтлэл, дүрс, фавикон, зарим css болон js файл гэх мэт дүрслэлд онцгой хамаатай.

Хамгийн их насны удирдамж бүхий кэш-хяналтын толгой хэсэг.

Cache-control-ийн ажиллах зарчим: max-age нь хугацаа дууссантай маш төстэй юм. Энд файлын "хугацаа дуусах хугацааг" бас тодорхойлсон боловч секундын дотор тохируулагдсан бөгөөд тодорхой цаг хугацаатай холбоогүй бөгөөд энэ нь ихэнх тохиолдолд илүү тохиромжтой байдаг.

Лавлахын тулд:

• 1 өдөр = 86400 секунд
• 1 долоо хоног = 604800 секунд
• 1 сар = 2629000 секунд
• 1 жил = 31536000 секунд

Жишээ нь:

Кэш-хяналт: max-age=2629000;

Cache-control толгой хэсэгт max-age-ээс гадна бусад заавар байдаг. Хамгийн алдартайг нь хурдан харцгаая:

олон нийтийн
Баримт нь хүсэлтийг зөвхөн хэрэглэгчийн эцсийн үйлчлүүлэгч (хөтөч) төдийгүй янз бүрийн завсрын прокси, CDN сүлжээ гэх мэт кэш хийх боломжтой юм. Тиймээс, нийтийн заавар нь ямар ч прокси серверийг хөтөч шиг кэш хийх боломжийг олгодог.

хувийн
Удирдамжид ингэж заасан байдаг энэ файл(серверийн хариу) нь эцсийн хэрэглэгчдэд зориулагдсан бөгөөд янз бүрийн завсрын проксид хадгалагдах ёсгүй. Үүний зэрэгцээ энэ нь эцсийн үйлчлүүлэгч (хэрэглэгчийн хөтөч) руу кэш хийх боломжийг олгодог. Жишээлбэл, энэ нь хэрэглэгчийн дотоод профайл хуудас, сесс доторх хүсэлт гэх мэт хамааралтай.

Үйлчлүүлэгч серверт хүсэлт гаргах бүрийг зааж өгөх боломжийг танд олгоно. Заримдаа дээр дурдсан Etag толгойтой хамт ашиглагддаг.

дэлгүүргүй
Үйлчлүүлэгчид ямар ч тохиолдолд хүсэлтийн хуулбар эсвэл түүний зарим хэсгийг хадгалахгүй байхыг зааварчилдаг. Энэ бол бүх кэшийг дарах хамгийн хатуу толгой юм. Энэ нь нууц мэдээлэлтэй ажиллахын тулд тусгайлан зохион бүтээгдсэн.

дахин баталгаажуулах ёстой
Энэхүү заавар нь хөтчөөс агуулгыг дахин баталгаажуулахын тулд серверт заавал хүсэлт гаргахыг зааварчилдаг (жишээлбэл, хэрэв та eTag ашиглаж байгаа бол). Баримт нь тодорхой тохиргоонд байгаа http нь кэшэд хуучирсан контентыг хадгалах боломжийг олгодог. must-revalidate нь серверт хүсэлт гаргах замаар ямар ч нөхцөлд агуулгын шинэлэг байдлыг шалгахыг хөтөчөөс үүрэг болгодог.

прокси дахин баталгаажуулах
Энэ нь заавал дахин баталгаажуулахтай адил боловч зөвхөн прокси кэшлэхэд хамаатай.

s-макс
max-age -ээс бараг ялгаагүй, зөвхөн энэ удирдамжийг өөр өөр проксигийн кэшээр тооцдог болохоос хэрэглэгчийн хөтөч өөрөө биш. "S -" үсэг нь "хуваалцсан" гэсэн үгнээс гаралтай (жишээ нь CDN). Энэхүү заавар нь CDN болон бусад зуучлагч кэшүүдэд тусгайлан зориулагдсан болно. Үүнийг зааж өгснөөр max-age заавар болон Хугацаа дууссан толгой хэсгийн утгыг дарна. Гэсэн хэдий ч, хэрэв та CDN сүлжээг бүтээгээгүй бол танд s-maxage хэрэггүй байх магадлалтай.

Сайт дээр ямар толгойг ашиглаж байгааг яаж харах вэ?

Та өөрийн дуртай хөтчийнхөө дибаглагч дотроос http хүсэлтийн толгой болон хариултын толгой хэсгийг харж болно. Энэ нь Chrome дээр хэрхэн харагдах жишээг энд харуулав.

Өөрийгөө хүндэлдэг ямар ч хөтөч эсвэл http sniffer дээр ижил зүйлийг харж болно.

Apache болон Nginx дээр кэшийг тохируулж байна

Бид алдартай серверүүдийг тохируулах баримт бичгийг дахин ярихгүй. Та үүнийг үргэлж үзэж болно. Доор бид тохиргооны файлууд ямар байдгийг харуулах бодит жишээг өгөх болно.

Жишээ Apache тохиргоо Expires-г хянах

Бид өөр өөр "хугацаа дуусах хугацааг" тогтоосон янз бүрийн төрөлфайлууд. Зургийн хувьд нэг жил, скрипт, хэв маяг, pdf болон дүрсний хувьд нэг сар. Бусад бүх зүйлд - 2 өдөр.

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 text/ сар" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 сар" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days"

Дуусах хугацааг удирдах Nginx тохиргооны жишээ

Бид өөр өөр төрлийн файлд өөр өөр "хугацаа дуусах огноо" тогтоодог. Зургийн хувьд нэг долоо хоног, хэв маяг, скриптийн хувьд нэг өдөр.

Сервер ( #... байршил ~* \.(gif|ico|jpe?g|png)(\?+)?$ ( хугацаа 1w; ) байршил ~* \.(css|js)$ ( хугацаа 1d; ) #...)

Cache-control-д зориулсан Apache тохиргооны жишээ (хамгийн их нас ба нийтийн/хувийн/кэшгүй) Толгой хэсгийн Cache-Control "max-age=2592000, нийтийн" Толгой хэсгийн Cache-Control "max-age=88000, хувийн, заавал байх ёстой- revalidate" Header set Cache-Control "хувийн, хадгалахгүй, кэшгүй, дахин баталгаажуулах ёстой, хувиргахгүй, max-age=0" Толгой хэсгийн багц Прагма "кэшгүй" Nginx тохиргооны жишээ нь Cache-control статик файл серверт зориулсан ( #... байршил ~* \.(?:ico|css|js|gif|jpe?g|png)$ ( add_header Cache-Control "max-age=88000, public"; ) #... ) In дүгнэлт

"Кэш хийж болох бүх зүйлийг кэш" гэдэг нь вэб хөгжүүлэгчийн сайн уриа юм. Заримдаа та тохиргоонд хэдхэн цаг зарцуулж, сайтынхаа хэрэглэгчийн туршлагыг эрс сайжруулж, серверийн ачааллыг эрс багасгаж, траффикийг хэмнэх боломжтой. Хамгийн гол нь үүнийг хэтрүүлж болохгүй, нөөцийнхөө онцлогийг харгалзан бүх зүйлийг зөв тохируулах явдал юм.

Зөв тохируулсан кэш нь гүйцэтгэлийн асар их ашиг тусыг өгч, зурвасын өргөнийг хэмнэж, серверийн зардлыг бууруулдаг боловч олон сайтууд кэшийг муу хэрэгжүүлж, хоорондоо холбогдсон нөөцүүдийг синхрончлолгүй болгох уралдааны нөхцөлийг бий болгодог.

Дийлэнх олонхи шилдэг туршлагуудкэш нь хоёр загварын аль нэгийг хэлнэ:

Загвар №1: хувиршгүй контент ба урт хугацааны хамгийн дээд кэш Кэш-Хяналт: max-age=31536000

• URL-ийн агуулга өөрчлөгдөхгүй тул...
• Хөтөч эсвэл CDN нь нөөцийг жилийн турш хялбархан кэшлэх боломжтой
• Заасан дээд наснаасаа бага кэш агуулгыг сервертэй зөвлөлдөхгүйгээр ашиглаж болно

Хуудас: Хөөе, надад "/script-v1.js" , "/styles-v1.css" болон "/cats-v1.jpg" хэрэгтэй байна 10:24

Бэлэн мөнгө: Би хоосон байна, чи яах вэ, Сервер? 10:24

Сервер: За, тэд энд байна. Дашрамд хэлэхэд, Бэлэн мөнгө, тэдгээрийг нэг жилийн турш ашиглах ёстой, үүнээс илүүгүй. 10:25

Бэлэн: Баярлалаа! 10:25

Хуудас: Урагшаа! 10:25

Дараагийн өдөр

Хуудас: Хөөе, надад "/script-v2 .js" , "/styles-v2 .css" болон "/cats-v1.jpg" хэрэгтэй байна 08:14

Бэлэн мөнгө: Мууртай зураг байдаг, гэхдээ бусад нь биш. Сервер үү? 08:14

Сервер: Хялбар - энд шинэ CSS & JS байна. Дахин хэлэхэд Бэлэн мөнгө: тэдний хадгалах хугацаа нэг жилээс илүүгүй байна. 08:15

Бэлэн мөнгө: Гайхалтай! 08:15

Хуудас: Баярлалаа! 08:15

Бэлэн мөнгө: Хмм, би "/script-v1.js" & "/styles-v1.css"-г ашиглаагүй удаж байна. Тэднийг арилгах цаг болжээ. 12:32

Энэ загварыг ашигласнаар та тодорхой URL-ын агуулгыг хэзээ ч өөрчлөхгүй, харин URL-ыг өөрөө өөрчилнө:

URL бүр агуулгын хамт өөрчлөгддөг зүйлтэй байдаг. Энэ нь хувилбарын дугаар, өөрчлөгдсөн огноо эсвэл агуулгын хэш байж болно (энэ нь миний блогт сонгосон зүйл).

Сервер талын ихэнх фреймворкууд танд иймэрхүү зүйлийг хялбархан хийх боломжтой хэрэгслүүдтэй байдаг (Django-д би Manifest​ Static​ Files​Storage ашигладаг); Node.js-д мөн адил асуудлыг шийддэг маш жижиг номын сангууд байдаг, жишээ нь gulp-rev.

Гэсэн хэдий ч энэ загвар нь нийтлэл, блог нийтлэл гэх мэт зүйлд тохиромжгүй. Тэдний URL-г хувилбар болгох боломжгүй бөгөөд агуулга нь өөрчлөгдөж болно. Үнэнийг хэлэхэд, би дүрмийн болон цэг таслалын алдаатай байдаг тул агуулгыг хурдан шинэчлэх шаардлагатай болдог.

Загвар №2: сервер дээр байнга баталгааждаг өөрчлөгддөг контент Cache-Control: no-cache

• URL-н агуулга өөрчлөгдөх бөгөөд энэ нь...
• Ямар ч дотоод кэштэй хувилбарыг серверийг зааж өгөхгүйгээр ашиглах боломжгүй.

Хуудас: Хөөе, надад "/about/" болон "/sw.js" 11:32-ын агуулга хэрэгтэй байна.

Бэлэн мөнгө: Би чамд тусалж чадахгүй. Сервер үү? 11:32

Сервер: Зарим нь байна. Бэлэн мөнгө, тэдгээрийг өөртөө хадгалаарай, гэхдээ тэдгээрийг ашиглахаасаа өмнө надаас асуугаарай. 11:33

Бэлэн мөнгө: Яг! 11:33

Хуудас: Баярлалаа! 11:33

Дараагийн өдөр

Хуудас: Хөөе, надад "/about/" болон "/sw.js"-ийн агуулга дахин хэрэгтэй байна 09:46

Бэлэн мөнгө: Ганцхан минут. Сервер, миний хуулбарууд зүгээр үү? "/about/"-ын хуулбар нь Даваа гарагийнх, "/sw.js" нь өчигдрийнх. 09:46

Сервер: "/sw.js" өөрчлөгдөөгүй... 09:47

Бэлэн мөнгө: Гайхалтай. Хуудас, "/sw.js" -г хадгал. 09:47

Сервер: …гэхдээ надад “/ тухай/” байна. шинэ хувилбар. Бэлэн мөнгө, барьж байгаарай, гэхдээ өмнөх шигээ эхлээд надаас асуухаа бүү мартаарай. 09:47

Бэлэн мөнгө: Ойлголоо! 09:47

Хуудас: Гайхалтай! 09:47

Анхаарна уу: кэшгүй гэдэг нь "кэш хийхгүй" гэсэн үг биш бөгөөд энэ нь сервер дээрх кэш нөөцийг "шалгах" (эсвэл дахин баталгаажуулах) гэсэн үг юм. Мөн дэлгүүргүй байх нь хөтөчийг огт кэш хийхгүй байхыг хэлдэг. Түүнчлэн, дахин баталгаажуулах ёстой гэдэг нь заавал дахин баталгаажуулах гэсэн үг биш, харин кэшэд хадгалагдсан нөөц нь заасан max-age -ээс бага тохиолдолд л ашиглагдах ба өөр тохиолдолд л дахин баталгаажуулагдана гэсэн үг юм. Ингээд л бүх зүйл эхэлсэн түлхүүр үгскэш хийх зориулалттай.

Энэ загварт бид хариуд ETag (таны сонгосон хувилбарын ID) эсвэл Сүүлд өөрчилсөн толгой хэсгийг нэмж болно. Үйлчлүүлэгч дараагийн удаа контент хүсэх үед If-None-Match эсвэл If-Modified-Since гарч ирэх бөгөөд энэ нь серверт "Өөрт байгаа зүйлээ ашигла, таны кэш шинэчлэгдсэн" гэж хэлэх боломжтой, өөрөөр хэлбэл HTTP 304-г буцаана.

Хэрэв ETag / Last-Modified-г илгээх боломжгүй бол сервер үргэлж агуулгыг бүхэлд нь илгээдэг.

Энэ загвар нь үргэлж сүлжээний дуудлага шаарддаг тул сүлжээний хүсэлтгүйгээр хийх боломжтой эхний загвар шиг тийм ч сайн биш юм.

Бидэнд эхний загварт зориулсан дэд бүтэц байхгүй байх нь ердийн зүйл биш боловч 2-р загварт сүлжээний хүсэлтүүдтэй холбоотой асуудал гарч болзошгүй. Үүний үр дүнд завсрын хувилбарыг ашигладаг: богино дээд нас, хувирах контент. Энэ бол муу буулт юм.

Хувиргах контент бүхий max-age ашиглах нь ерөнхийдөө буруу сонголт юм

Харамсалтай нь энэ нь нийтлэг байдаг; Github хуудаснууд нь жишээ юм.

Төсөөлөөд үз:

• /нийтлэл/
• /styles.css
• /script.js

Серверийн толгойтой:

Cache-Control: дахин баталгаажуулах ёстой, max-age=600

• URL агуулгын өөрчлөлт
• Хэрэв хөтөч нь 10 минутаас илүү сүүлийн үеийн кэштэй хувилбартай бол сервертэй зөвлөлдөхгүйгээр ашигладаг
• Хэрэв тийм кэш байхгүй бол сүлжээний хүсэлтийг боломжтой бол If-Modified-Since эсвэл If-None-Match ашиглана.

Хуудас: Хөөе, надад "/article/", "/script.js" болон "/styles.css" хэрэгтэй байна 10:21

Бэлэн мөнгө: Надад чам шиг юу ч байхгүй, Сервер? 10:21

Сервер: Асуудалгүй, тэд энд байна. Гэхдээ бэлэн мөнгө гэдгийг санаарай: тэдгээрийг дараагийн 10 минутын дотор ашиглах боломжтой. 10:22

Бэлэн мөнгө: Тийм ээ! 10:22

Хуудас: Баярлалаа! 10:22

Хуудас: Хөөе, надад "/article/" , "/script.js" болон "/styles.css" дахин хэрэгтэй байна 10:28

Бэлэн мөнгө: Уучлаарай, би "/styles.css"-г алдсан, гэхдээ надад бусад бүх зүйл байгаа. Сервер, та надад "/styles.css"-г тохируулж болох уу? 10:28

Сервер: Амархан, тэр чамайг хамгийн сүүлд авснаас хойш аль хэдийн өөрчлөгдсөн. Та үүнийг дараагийн 10 минутын турш аюулгүй ашиглаж болно. 10:29

Бэлэн мөнгө: Асуудалгүй. 10:29

Хуудас: Баярлалаа! Гэхдээ ямар нэг зүйл буруу болсон бололтой! Бүх зүйл эвдэрсэн! Юу болоод байна? 10:29

Туршилтын явцад энэ загвар нь амьдрах эрхтэй боловч бодит төслийн бүх зүйлийг эвдэж, хянахад маш хэцүү байдаг. Дээрх жишээн дээр сервер HTML, CSS болон JS-г шинэчилсэн боловч хуудсыг хуучин кэштэй HTML болон JS, дээр нь серверээс шинэчлэгдсэн CSS-ээр дүрсэлсэн байна. Хувилбарын тохиромжгүй байдал нь бүх зүйлийг сүйрүүлдэг.

Ихэнхдээ бид HTML-д томоохон өөрчлөлт хийхдээ шинэ бүтцийг зөв тусгахын тулд CSS-г, мөн агуулга, хэв маягийг дагаж мөрдөхийн тулд JavaScript-г хоёуланг нь өөрчилдөг. Эдгээр бүх нөөц нь бие даасан боловч кэшийн толгойнууд үүнийг илэрхийлж чадахгүй. Үүний үр дүнд хэрэглэгчид өөрсдийгөө олж болно Хамгийн сүүлийн үеийн хувилбарнэг/хоёр нөөц, үлдсэн хэсэг нь хуучин хувилбар.

max-age нь хариу өгөх хугацаатай харьцуулахад тохируулагдсан тул бүх нөөцийг нэг хаягийн хэсэг болгон шилжүүлбэл тэдгээр нь нэгэн зэрэг дуусна, гэхдээ синхрончлолгүй болох магадлал бага хэвээр байна. Хэрэв танд JavaScript ороогүй эсвэл өөр загвар агуулаагүй хуудас байгаа бол тэдгээрийн кэш дуусах хугацаа нь синхрончлолгүй болно. Хамгийн муу нь вэб хөтөч HTML, CSS, & JS нь харилцан хамааралтай гэдгийг мэдээгүй, кэшээс контентыг байнга татаж байдаг тул жагсаалтаас нэг зүйлийг аз жаргалтайгаар татаж аваад бусад бүх зүйлийг мартаж чаддаг. Эдгээр бүх хүчин зүйлсийг хамтад нь авч үзвэл таарахгүй хувилбаруудын магадлал нэлээд өндөр гэдгийг та ойлгох хэрэгтэй.

Хэрэглэгчийн хувьд үр дүн нь эвдэрсэн хуудасны бүтэц эсвэл бусад асуудал байж болно. Жижиг алдаанаас эхлээд бүрэн ашиглах боломжгүй контент хүртэл.

Аз болоход хэрэглэгчид яаралтай гарах гарцтай...

Хуудсыг шинэчлэх нь заримдаа тусалдаг

Хэрэв хуудсыг дахин ачаалж байгаа бол хөтчүүд max-age-г үл тоомсорлон сервер талын дахин баталгаажуулалтыг хийдэг. Тиймээс, хэрэв хэрэглэгч дээд насжилтаас болж ямар нэг зүйл эвдэрсэн бол хуудсыг энгийн сэргээх нь бүх зүйлийг засах боломжтой. Гэхдээ мэдээж халбага олсны дараа тунадас хэвээр үлдэж, танай сайтад хандах хандлага арай өөр байх болно.

Үйлчилгээний ажилтан эдгээр алдааны ашиглалтын хугацааг уртасгаж чадна

Жишээлбэл, танд дараах үйлчилгээний ажилтан байна.

Const хувилбар = "2"; self.addEventListener("суулгах", үйл явдал => ( event.waitUntil(caches.open(`static-$(хувилбар)`)) .then(cache => cache.addAll([ "/styles.css", "/script .js" ]))); )); self.addEventListener("идэвхжүүлэх", үйл явдал => ( // ...хуучин кэшийг устгах... )); self.addEventListener("fetch", event => ( event.respondWith(caches.match(event.request) .then(response => хариу || fetch(event.request))); ));

Энэ үйлчилгээний ажилтан:

• скрипт болон хэв маягийн кэш
• таарч байвал кэш ашигладаг, үгүй ​​бол сүлжээнд хандана

Хэрэв бид CSS/JS-г өөрчилбөл хувилбарын дугаарыг нэмэгдүүлэх бөгөөд энэ нь шинэчлэлтийг идэвхжүүлдэг. Гэсэн хэдий ч addAll нь хамгийн түрүүнд кэш рүү ханддаг тул бид хамгийн дээд нас болон CSS & JS хувилбаруудын таарахгүй байдлаас шалтгаалан уралдааны нөхцөл байдалд орж болно.

Тэдгээрийг кэш болгосны дараа бид дараагийн үйлчилгээний ажилтны шинэчлэлт хүртэл тохирохгүй CSS & JS-тэй байх болно - энэ нь шинэчлэлтийн явцад дахин уралдааны нөхцөл байдалд орохгүй л бол.

Та үйлчилгээний ажилтан дахь кэшийг алгасаж болно:

Self.addEventListener("суулгах", үйл явдал => ( event.waitUntil(caches.open(`static-$(хувилбар)`)) .then(cache => cache.addAll([ new Request("/styles.css", ( кэш: "no-cache" )), new Request("/script.js", ( кэш: "no-cache" )) ]))); ));

Харамсалтай нь, кэш хийх сонголтууд нь Chrome/Opera-д дэмжигдээгүй бөгөөд Firefox-ын шөнийн хувилбарт саяхан нэмэгдсэн боловч та үүнийг өөрөө хийж болно:

Self.addEventListener("суулгах", үйл явдал => ( event.waitUntil(caches.open(`static-$(хувилбар)`)) .then(cache => Promise.all([ "/styles.css", "/script .js" ].map(url => ( // санамсаргүй асуулгын мөрийг ашиглан кэш-баст буцаах буцаах(`$(url)?$(Math.random())`).then(response => ( // амжилтгүй болсон) 404, 500 гэх мэт хэрэв (!response.ok) хаях бол Error("Not ok"); буцах cache.put(url, хариу); )))) )))); ));

Энэ жишээнд би санамсаргүй тоо ашиглан кэшийг дахин тохируулж байна, гэхдээ та цааш явж, бүтээхдээ агуулгын хэшийг нэмж болно (энэ нь sw-precache хийдэгтэй төстэй). Энэ нь JavaScript ашиглан анхны хэв маягийн хэрэгжилтийн нэг төрөл боловч хөтөч болон CDN биш зөвхөн үйлчилгээний ажилтантай ажилладаг.

Үйлчилгээний ажилчид болон HTTP кэш нь хамтдаа маш сайн ажилладаг тул тэднийг тулалдах хэрэггүй!

Таны харж байгаагаар та үйлчилгээний ажилтны кэшийн алдаануудыг тойрон гарах боломжтой боловч асуудлын үндсийг шийдэх нь дээр. Зөв тохиргоокэш хийх нь үйлчилгээний ажилтны ажлыг хөнгөвчлөхөөс гадна үйлчилгээний ажилчдыг дэмждэггүй хөтчүүдэд (Safari, IE/Edge) туслахаас гадна CDN-ээ бүрэн ашиглах боломжийг олгодог.

Тохиромжтой кэшийн толгойнууд нь үйлчилгээний ажилтны шинэчлэлтийг ихээхэн хөнгөвчлөх боломжтой.

Const хувилбар = "23"; self.addEventListener("суулгах", үйл явдал => ( event.waitUntil(caches.open(`static-$(хувилбар)`)) .then(cache => cache.addAll([ "/", "/script-f93bca2c. js", "/styles-a837cb1e.css", "/cats-0e9a2ef4.jpg" ]))); ));

Энд би загвар №2 (сервер талын дахин баталгаажуулалт) болон бусад бүх эх сурвалжийг №1 загвартай (өөрчлөгддөггүй контент) бүхий эх хуудсыг кэш болгосон. Үйлчилгээний ажилтны шинэчлэл бүр нь үндсэн хуудсанд хүсэлт гаргах бөгөөд бусад бүх нөөцийг зөвхөн URL өөрчлөгдсөн тохиолдолд л ачаалах болно. Өмнөх хувилбараасаа шинэчлэгдэж байгаа эсэхээс үл хамааран замын хөдөлгөөнийг хэмнэж, гүйцэтгэлийг сайжруулдаг учраас энэ нь сайн хэрэг. хуучин хувилбар.

Хоёртын файлыг бүхэлд нь бага зэрэг өөрчилсөн ч татаж авах эсвэл нарийн төвөгтэй харьцуулалт хийх үед үндсэн хэрэгжүүлэлтээс ихээхэн давуу талтай байдаг. хоёртын файлууд. Ингэснээр бид харьцангуй бага ачаалалтай том хэмжээний вэб програмыг шинэчлэх боломжтой.

Үйлчилгээний ажилчид түр зуурын таяг гэхээсээ илүү сайжруулалт болгон ажилладаг тул түүнтэй тэмцэхийн оронд кэштэй ажилла.

Болгоомжтой ашиглахад хамгийн их нас, хувьсах агуулга нь маш сайн байж болно

max-age нь хувирах агуулгын хувьд ихэвчлэн буруу сонголт байдаг ч үргэлж биш байдаг. Жишээ нь, эх нийтлэлийн хамгийн дээд нас нь гурван минут байна. Ижил кэш загвар (CSS, JS & зургууд нь загвар №1 ашигладаг - хувиршгүй контент) ашиглан хуудсан дээр хамаарал байхгүй тул уралдааны нөхцөл нь асуудал биш бөгөөд бусад бүх зүйл энэ загварыг ашигладаггүй.

Энэ загвар нь би алдартай нийтлэлийг тухтай бичиж чадна гэсэн үг бөгөөд шинэчлэгдсэн нийтлэл бэлэн болтол гурван минут хүлээхэд бэлэн байгаа бол миний CDN (Cloudflare) серверийн ачааллыг арилгаж чадна. хэрэглэгчдэд хүртээмжтэй.

Энэ загварыг фанатизмгүйгээр ашиглах ёстой. Хэрэв би нийтлэлд шинэ хэсэг нэмж, өөр нийтлэлээс үүнтэй холбосон бол шийдвэрлэх ёстой хамаарлыг бий болгосон. Хэрэглэгч холбоос дээр дарж, хүссэн хэсэггүйгээр нийтлэлийн хуулбарыг авах боломжтой. Хэрэв би үүнээс зайлсхийхийг хүсч байвал нийтлэлийг дахин сэргээж, Cloudflare-ээс нийтлэлийн кэштэй хувилбарыг устгаад, гурван минут хүлээгээд дараа нь өөр нийтлэлийн холбоосыг нэмэх хэрэгтэй. Тийм ээ, энэ загвар нь болгоомжтой байхыг шаарддаг.

Зөв ашиглах үед кэш нь гүйцэтгэлийг мэдэгдэхүйц сайжруулж, зурвасын өргөнийг хэмнэнэ. Хэрэв та URL-г хялбархан өөрчлөх эсвэл сервер талын дахин баталгаажуулалтыг ашиглах боломжтой бол хувиршгүй контентоор үйлчил. Хэрэв та хангалттай зоригтой бөгөөд таны контент синхрончлолоос гарах хамааралгүй гэдэгт итгэлтэй байгаа бол хамгийн дээд насны болон хувирах контентыг холино.

Вэбсайтад өөрчлөлт оруулахдаа хуудсууд, css файлууд болон скриптүүдийн (.js) агуулгыг хөтчөөр хадгалдаг бөгөөд нэлээд удаан хугацаанд өөрчлөгдөөгүй байдаг. Энэ нь хийсэн өөрчлөлтийг бүх хөтөч дээр тусгахын тулд үйлчлүүлэгчдийг F5 эсвэл Ctrl + F5 хослолд дасгах шаардлагатай болдог. Мөн үе үе тэд дарагдсан эсэхийг шалгаарай.

Процесс нь нэлээд уйтгартай, тохиромжгүй байдаг. Мэдээжийн хэрэг та файлуудын нэрийг өөрчлөх замаар нөхцөл байдлаас гарах боломжтой, гэхдээ энэ нь дахин тохиромжгүй юм.

Гэсэн хэдий ч, бидэнд шаардлагатай үед ижил нэртэй хэвээр үлдэх, .css эсвэл .js файлуудын кэшийг дахин тохируулах боломж бий. Мөн Ctrl + F5-ийг үүрд март.

Хамгийн гол нь бид .css эсвэл .js файлууддаа псевдо параметрийг төгсгөлд нь хавсаргах бөгөөд бид үүнийг үе үе өөрчлөх бөгөөд ингэснээр хөтөч дээрх кэшийг дахин тохируулах болно.

Тиймээс, орох эх кододоо иймэрхүү харагдах болно:

186485 нь ижил файлыг гаргах дурын хослол боловч псевдо параметрийн ачаар хөтөч үүнийг шинэ гэж тайлбарладаг. ?186485

Одоо параметрийнхээ бүх тохиолдлыг өөрчлөхгүйн тулд бид үүнийг php файлд суулгаж, шаардлагатай бүх газруудтай холбох болно.