{"id":16878,"date":"2020-04-13T02:16:56","date_gmt":"2020-04-12T19:16:56","guid":{"rendered":"https:\/\/kiencang.net\/?p=16177"},"modified":"2020-04-13T02:16:56","modified_gmt":"2020-04-12T19:16:56","slug":"tim-hieu-http-caching","status":"publish","type":"post","link":"https:\/\/kiencang.net\/tim-hieu-http-caching\/","title":{"rendered":"T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching"},"content":{"rendered":"\n<p>T\u00ecm n\u1ea1p t\u00e0i nguy\u00ean qua m\u1ea1ng internet v\u1eeba ch\u1eadm, v\u1eeba t\u1ed1n k\u00e9m. C\u00e1c ph\u1ea3n h\u1ed3i n\u1eb7ng y\u00eau c\u1ea7u nhi\u1ec1u v\u00f2ng l\u1eb7p kh\u1ee9 h\u1ed3i (roundtrips) gi\u1eefa m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7 (server). \u0110i\u1ec1u n\u00e0y l\u00e0m kh\u1ea3 n\u0103ng hi\u1ec7n di\u1ec7n c\u1ee7a ch\u00fang b\u1ecb tr\u00ec ho\u00e3n, v\u00e0 \u0111\u1ed3ng th\u1eddi l\u00e0m tr\u1ec5 th\u1eddi \u0111i\u1ec3m <a href=\"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 x\u1eed l\u00fd ch\u00fang<\/a>. N\u00f3 c\u0169ng l\u00e0m ph\u00e1t sinh chi ph\u00ed d\u1eef li\u1ec7u (data cost) c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web. H\u1ec7 qu\u1ea3 l\u00e0, <a href=\"https:\/\/kiencang.net\/bo-nho-dem-trinh-duyet\/\" target=\"_blank\" rel=\"noreferrer noopener\">kh\u1ea3 n\u0103ng cache<\/a> v\u00e0 t\u00e1i s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean \u0111\u00e3 \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p tr\u01b0\u1edbc \u0111\u00f3 l\u00e0 m\u1ed9t y\u1ebfu t\u1ed1 quan tr\u1ecdng trong vi\u1ec7c <a href=\"https:\/\/kiencang.net\/tang-toc-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9<\/a>.<\/p>\n\n\n<p>Tin t\u1ed1t l\u00e0 <a href=\"https:\/\/caniuse.com\/#search=http%20cache\" target=\"_blank\" rel=\"noreferrer noopener\">t\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t \u0111\u1ec1u \u0111\u00e3 tri\u1ec3n khai HTTP cache<\/a>. T\u1ea5t c\u1ea3 nh\u1eefng g\u00ec b\u1ea1n c\u1ea7n l\u00e0 \u0111\u1ea3m b\u1ea3o m\u1ed7i ph\u1ea3n h\u1ed3i c\u1ee7a m\u00e1y ch\u1ee7 cung c\u1ea5p <em>c\u00e1c ch\u1ec9 th\u1ecb header HTTP<\/em> ch\u00ednh x\u00e1c \u0111\u1ec3 h\u01b0\u1edbng d\u1eabn tr\u00ecnh duy\u1ec7t, nh\u1edd v\u1eady n\u00f3 bi\u1ebft \u0111\u01b0\u1ee3c c\u00f3 th\u1ec3 cache m\u1ed9t ph\u1ea3n h\u1ed3i v\u00e0o l\u00fac n\u00e0o <em>v\u00e0<\/em> trong bao l\u00e2u.<\/p>\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng WebView \u0111\u1ec3 t\u00ecm n\u1ea1p v\u00e0 hi\u1ec3n th\u1ecb n\u1ed9i dung web trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n, b\u1ea1n c\u00f3 th\u1ec3 c\u1ea7n cung c\u1ea5p c\u00e1c c\u1edd t\u00f9y ch\u1ec9nh b\u1ed5 sung \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng HTTP cache \u0111\u01b0\u1ee3c b\u1eadt, k\u00edch c\u1ee1 c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp v\u1edbi gi\u00e1 tr\u1ecb h\u1ee3p l\u00fd \u0111\u1ec3 kh\u1edbp v\u1edbi nhu c\u1ea7u c\u1ee7a ri\u00eang b\u1ea1n, v\u00e0 b\u1ed9 nh\u1edb cache \u0111\u01b0\u1ee3c duy tr\u00ec. Tham kh\u1ea3o th\u00eam c\u00e1c t\u00e0i li\u1ec7u c\u0103n b\u1ea3n \u0111\u1ec3 ch\u1eafc ch\u1eafn c\u00e1c c\u00e0i \u0111\u1eb7t c\u1ee7a b\u1ea1n l\u00e0 ch\u00ednh x\u00e1c.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/http-request.png\" alt=\"y\u00eau c\u1ea7u http\" class=\"wp-image-16179\"\/><\/figure><\/div>\n\n\n<p>Khi m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1 m\u1ed9t ph\u1ea3n h\u1ed3i, n\u00f3 c\u0169ng c\u00f3 th\u1ec3 ph\u00e1t ra m\u1ed9t t\u1eadp h\u1ee3p c\u00e1c header HTTP, d\u00f9ng \u0111\u1ec3 m\u00f4 t\u1ea3 ki\u1ec3u n\u1ed9i dung, \u0111\u1ed9 d\u00e0i, c\u00e1c ch\u1ec9 th\u1ecb caching, token x\u00e1c minh (ETag), v\u00e0 nhi\u1ec1u th\u1ee9 kh\u00e1c n\u1eefa. L\u1ea5y v\u00ed d\u1ee5, trong trao \u0111\u1ed5i \u1edf tr\u00ean, m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1 ph\u1ea3n h\u1ed3i c\u00f3 k\u00edch c\u1ee1 1024-byte (content-length), h\u01b0\u1edbng d\u1eabn m\u00e1y kh\u00e1ch cache n\u00f3 trong kho\u1ea3ng th\u1eddi gian 120 gi\u00e2y (cache-control: max-age), v\u00e0 cung c\u1ea5p token x\u00e1c th\u1ef1c &#8220;x234dff&#8221; (ETag) m\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng sau khi ph\u1ea3n h\u1ed3i h\u1ebft h\u1ea1n (expired) \u0111\u1ec3 ki\u1ec3m tra xem t\u00e0i nguy\u00ean \u0111\u00e3 c\u00f3 b\u1ea5t k\u1ef3 s\u1eeda \u0111\u1ed5i n\u00e0o hay ch\u01b0a (modified).<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d664880aa\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d664880aa\"  type=\"checkbox\" id=\"item-6577d664880aa\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/#Xac_thuc_cac_phan_hoi_da_duoc_cache_bang_ETags\" title=\"X\u00e1c th\u1ef1c c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache b\u1eb1ng ETags\">X\u00e1c th\u1ef1c c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache b\u1eb1ng ETags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/#Cache-Control\" title=\"Cache-Control\">Cache-Control<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/#Xac_dinh_chinh_sach_Cache-Control_toi_uu\" title=\"X\u00e1c \u0111\u1ecbnh ch\u00ednh s\u00e1ch Cache-Control t\u1ed1i \u01b0u\">X\u00e1c \u0111\u1ecbnh ch\u00ednh s\u00e1ch Cache-Control t\u1ed1i \u01b0u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/#Vo_hieu_hoa_va_cap_nhat_cac_phan_hoi_da_duoc_cache\" title=\"V\u00f4 hi\u1ec7u h\u00f3a v\u00e0 c\u1eadp nh\u1eadt c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache\">V\u00f4 hi\u1ec7u h\u00f3a v\u00e0 c\u1eadp nh\u1eadt c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/#Danh_sach_kiem_tra_cache\" title=\"Danh s\u00e1ch ki\u1ec3m tra cache\">Danh s\u00e1ch ki\u1ec3m tra cache<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\" id=\"xac-th\u1ef1c-cac-ph\u1ea3n-h\u1ed3i-da-d\u01b0\u1ee3c-cache-b\u1eb1ng-etags\"><span class=\"ez-toc-section\" id=\"Xac_thuc_cac_phan_hoi_da_duoc_cache_bang_ETags\"><\/span>X\u00e1c th\u1ef1c c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache b\u1eb1ng ETags<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>T\u00f3m t\u1eaft (TL;DR)<\/p>\n\n\n<ul><li>M\u00e1y ch\u1ee7 s\u1eed d\u1ee5ng header HTTP ETag \u0111\u1ec3 trao \u0111\u1ed5i token x\u00e1c th\u1ef1c (validation).<\/li><li>Token x\u00e1c th\u1ef1c cho ph\u00e9p ki\u1ec3m tra xem li\u1ec7u t\u00e0i nguy\u00ean \u0111\u00e3 \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt hay ch\u01b0a m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3: s\u1ebd kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ea3i d\u1eef li\u1ec7u (\u0111\u00e3 \u0111\u01b0\u1ee3c cache) qua m\u1ea1ng n\u1eefa n\u1ebfu t\u00e0i nguy\u00ean ch\u01b0a c\u00f3 b\u1ea5t k\u1ef3 thay \u0111\u1ed5i n\u00e0o.<\/li><\/ul>\n\n\n<p>Gi\u1ea3 s\u1eed \u0111\u00e3 qua 120 gi\u00e2y k\u1ec3 t\u1eeb l\u1ea7n t\u00ecm n\u1ea1p \u0111\u1ea7u ti\u00ean v\u00e0 tr\u00ecnh duy\u1ec7t b\u1eaft \u0111\u1ea7u th\u1ef1c hi\u1ec7n m\u1ed9t t\u00ecm n\u1ea1p m\u1edbi cho c\u00f9ng ngu\u1ed3n t\u00e0i nguy\u00ean (same resource). \u0110\u1ea7u ti\u00ean, tr\u00ecnh duy\u1ec7t ki\u1ec3m tra local cache v\u00e0 t\u00ecm ki\u1ebfm ph\u1ea3n h\u1ed3i \u0111\u00e3 c\u00f3 tr\u01b0\u1edbc \u0111\u00f3. Kh\u00f4ng may, tr\u00ecnh duy\u1ec7t kh\u00f4ng th\u1ec3 s\u1eed d\u1ee5ng ph\u1ea3n h\u1ed3i tr\u01b0\u1edbc \u0111\u00f3 b\u1edfi v\u00ec ph\u1ea3n h\u1ed3i n\u00e0y gi\u1edd \u0111\u00e3 h\u1ebft h\u1ea1n. T\u1ea1i th\u1eddi \u0111i\u1ec3m \u0111\u00f3, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 nhanh ch\u00f3ng g\u1eedi \u0111i m\u1ed9t y\u00eau c\u1ea7u m\u1edbi v\u00e0 t\u00ecm n\u1ea1p ph\u1ea3n h\u1ed3i m\u1edbi \u0111\u1ea7y \u0111\u1ee7 (full response). Tuy nhi\u00ean, \u0111i\u1ec1u n\u00e0y kh\u00f4ng hi\u1ec7u qu\u1ea3, b\u1edfi v\u00ec n\u1ebfu d\u1eef li\u1ec7u c\u1ee7a t\u00e0i nguy\u00ean kh\u00f4ng c\u00f3 g\u00ec thay \u0111\u1ed5i, b\u1ea1n ch\u1eb3ng c\u00f3 l\u00fd do g\u00ec \u0111\u1ec3 t\u1ea3i c\u00f9ng m\u1ed9t th\u00f4ng tin m\u00e0 \u0111\u00e3 \u0111\u01b0\u1ee3c cache s\u1eb5n \u1edf \u0111\u1ea5y r\u1ed3i!<\/p>\n\n\n<p>\u0110\u00e2y l\u00e0 v\u1ea5n \u0111\u1ec1 m\u00e0 c\u00e1c token x\u00e1c th\u1ef1c, nh\u01b0 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh trong header ETag \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 kh\u1eafc ph\u1ee5c. M\u00e1y ch\u1ee7 t\u1ea1o ra v\u00e0 tr\u1ea3 v\u1ec1 m\u00e3 token t\u00f9y \u00fd, n\u00f3 th\u01b0\u1eddng l\u00e0 m\u1ed9t hash ho\u1eb7c d\u1ea5u nh\u1eadn bi\u1ebft duy nh\u1ea5t (fingerprint) cho c\u00e1c n\u1ed9i dung c\u1ee7a file. M\u00e1y kh\u00e1ch kh\u00f4ng c\u1ea7n bi\u1ebft c\u00e1ch d\u1ea5u nh\u1eadn bi\u1ebft duy nh\u1ea5t n\u00e0y \u0111\u01b0\u1ee3c t\u1ea1o ra nh\u01b0 th\u1ebf n\u00e0o; n\u00f3 ch\u1ec9 c\u1ea7n ho\u00e0n th\u00e0nh nhi\u1ec7m v\u1ee5 l\u00e0 g\u1eedi n\u00f3 tr\u1edf l\u1ea1i m\u00e1y ch\u1ee7 trong l\u1ea7n y\u00eau c\u1ea7u k\u1ebf ti\u1ebfp. N\u1ebfu fingerprint v\u1eabn y nguy\u00ean, \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 t\u00e0i nguy\u00ean ch\u01b0a c\u00f3 g\u00ec thay \u0111\u1ed5i, v\u00e0 b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ea3i t\u00e0i nguy\u00ean \u0111\u00f3 qua m\u1ea1ng internet n\u1eefa.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/http-cache-control.png\" alt=\"HTTP cache control\" class=\"wp-image-16180\"\/><\/figure><\/div>\n\n\n<p>Trong v\u00ed d\u1ee5 tr\u01b0\u1edbc, m\u00e1y kh\u00e1ch t\u1ef1 \u0111\u1ed9ng cung c\u1ea5p token ETag trong header y\u00eau c\u1ea7u HTTP c\u00f3 t\u00ean &#8220;If-None-Match\/N\u1ebfu-Kh\u00f4ng-Kh\u1edbp&#8221;. M\u00e1y ch\u1ee7 ki\u1ec3m tra token m\u1ed9t l\u1ea7n n\u1eefa cho t\u00e0i nguy\u00ean hi\u1ec7n t\u1ea1i (current resource). N\u1ebfu token kh\u00f4ng thay \u0111\u1ed5i, m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1 ph\u1ea3n h\u1ed3i &#8220;304 Not Modified \/ Kh\u00f4ng Thay \u0110\u1ed5i&#8221;, c\u00e1i n\u00e0y s\u1ebd n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft r\u1eb1ng ph\u1ea3n h\u1ed3i m\u00e0 n\u00f3 c\u00f3 trong cache kh\u00f4ng thay \u0111\u1ed5i v\u00e0 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c l\u00e0m m\u1edbi l\u1ea1i b\u1eb1ng c\u00e1ch b\u1ed5 sung th\u00eam th\u1eddi gian cho cache l\u00e0 120 gi\u00e2y. L\u01b0u \u00fd l\u00e0 khi \u1ea5y b\u1ea1n kh\u00f4ng t\u1ea3i l\u1ea1i ph\u1ea3n h\u1ed3i, \u0111i\u1ec1u \u0111\u00f3 gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m th\u1eddi gian v\u00e0 b\u0103ng th\u00f4ng.<\/p>\n\n\n<p><strong>V\u00ed d\u1ee5 trong th\u1ef1c t\u1ebf<\/strong>. \u0110\u01b0\u1eddng link n\u00e0y: <a rel=\"noreferrer noopener\" href=\"https:\/\/static.kiencang.net\/2020\/cache-demo\/60s\/cache-control-60.html\" target=\"_blank\">https:\/\/static.kiencang.net\/2020\/cache-demo\/60s\/cache-control-60.html<\/a> c\u00f3 th\u1eddi gian cache (max-age) cho 4 t\u00e0i nguy\u00ean l\u00e0 m\u1ed9t \u1ea3nh (.jpg), m\u1ed9t style (.css), hai font (.ttf) kho\u1ea3ng 60 gi\u00e2y. Sau th\u1eddi gian n\u00e0y cache \u0111\u00e3 h\u1ebft h\u1ea1n, b\u1ea1n th\u1eed t\u1ea3i l\u1ea1i trang l\u1ea7n n\u1eefa, k\u1ebft qu\u1ea3 l\u00e0: d\u00f9 tr\u00ecnh duy\u1ec7t bi\u1ebft t\u00e0i nguy\u00ean c\u1ea7n t\u1ea3i \u0111\u00e3 c\u00f3 cache nh\u01b0ng v\u00ec h\u1ebft h\u1ea1n n\u00ean n\u00f3 kh\u00f4ng th\u1ec3 l\u1ea5y t\u00e0i nguy\u00ean cache ngay l\u1eadp t\u1ee9c, n\u00f3 s\u1ebd h\u1ecfi l\u1ea1i m\u00e1y ch\u1ee7 web xem t\u00e0i nguy\u00ean \u0111\u00f3 c\u00f3 thay \u0111\u1ed5i g\u00ec kh\u00f4ng th\u00f4ng qua m\u00e3 x\u00e1c th\u1ef1c ETag. K\u1ebft qu\u1ea3 ETag v\u1eabn gi\u1eef nguy\u00ean (m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1 k\u1ebft qu\u1ea3 304), khi \u0111\u00f3 tr\u00ecnh duy\u1ec7t bi\u1ebft r\u1eb1ng n\u00f3 \u0111\u01b0\u1ee3c ph\u00e9p d\u00f9ng l\u1ea1i cache n\u00f3 \u0111ang c\u00f3 v\u00e0 ti\u1ebfp t\u1ee5c gia h\u1ea1n th\u00eam th\u1eddi gian s\u1ed1ng c\u1ee7a cache n\u00e0y:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/thoi-gian-cache-ngan.png\" alt=\"T\u00e0i nguy\u00ean trong cache tr\u1ea3 v\u1ec1 k\u1ebft qu\u1ea3 304\"\/><figcaption>tap-viet.ttf v\u00e0 thu-phap.ttf l\u00e0 nh\u1eefng file n\u1eb7ng, nh\u1edd vi\u1ec7c x\u00e1c th\u1ef1c ETag (ch\u1ec9 t\u1ed1n 275 Byte d\u1eef li\u1ec7u trao \u0111\u1ed5i) m\u00e0 tr\u00ecnh duy\u1ec7t bi\u1ebft r\u1eb1ng n\u00f3 kh\u00f4ng c\u1ea7n t\u1ea3i l\u1ea1i 2 file n\u00e0y. \u0110i\u1ec1u t\u01b0\u01a1ng t\u1ef1 c\u0169ng x\u1ea3y ra v\u1edbi file .css v\u00e0 .jpg<\/figcaption><\/figure><\/div>\n\n\n<p>L\u00e0 ng\u01b0\u1eddi l\u1eadp tr\u00ecnh web, l\u00e0m th\u1ebf n\u00e0o b\u1ea1n t\u1eadn d\u1ee5ng \u0111\u01b0\u1ee3c vi\u1ec7c x\u00e1c nh\u1eadn l\u1ea1i m\u1ed9t c\u00e1ch c\u00f3 hi\u1ec7u qu\u1ea3? Tr\u00ecnh duy\u1ec7t \u0111\u00e3 l\u00e0m m\u1ecdi vi\u1ec7c thay m\u1eb7t ch\u00fang ta. Tr\u00ecnh duy\u1ec7t t\u1ef1 \u0111\u1ed9ng ph\u00e1t hi\u1ec7n n\u1ebfu token x\u00e1c th\u1ef1c \u0111\u00e3 \u0111\u01b0\u1ee3c ch\u1ec9 \u0111\u1ecbnh tr\u01b0\u1edbc \u0111\u00f3, n\u00f3 n\u1ed1i th\u00eam token x\u00e1c th\u1ef1c v\u00e0o y\u00eau c\u1ea7u g\u1eedi \u0111i, v\u00e0 n\u00f3 c\u1eadp nh\u1eadt d\u1ea5u th\u1eddi gian cache khi c\u1ea7n, d\u1ef1a tr\u00ean ph\u1ea3n h\u1ed3i nh\u1eadn \u0111\u01b0\u1ee3c t\u1eeb m\u00e1y ch\u1ee7. <strong>Ch\u1ec9 c\u00f2n m\u1ed9t \u0111i\u1ec1u duy nh\u1ea5t c\u1ea7n ph\u1ea3i l\u00e0m l\u00e0 \u0111\u1ea3m b\u1ea3o r\u1eb1ng m\u00e1y ch\u1ee7 cung c\u1ea5p c\u00e1c token ETag c\u1ea7n thi\u1ebft. Ki\u1ec3m tra t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn cho m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n \u0111\u1ec3 c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c c\u1edd t\u00f9y ch\u1ec9nh c\u1ea7n thi\u1ebft<\/strong>.<\/p>\n\n\n<p>M\u1eb9o c\u1ea7n l\u01b0u \u00fd: D\u1ef1 \u00e1n HTML5 Boilerplate bao g\u1ed3m <a href=\"https:\/\/github.com\/h5bp\/server-configs\">c\u00e1c file t\u00f9y ch\u1ec9nh m\u1eabu<\/a> cho t\u1ea5t c\u1ea3 c\u00e1c m\u00e1y ch\u1ee7 ph\u1ed5 bi\u1ebfn nh\u1ea5t v\u1edbi ch\u00fa th\u00edch chi ti\u1ebft cho t\u1eebng c\u1edd t\u00f9y ch\u1ec9nh v\u00e0 c\u00e0i \u0111\u1eb7t. T\u00ecm m\u00e1y ch\u1ee7 \u01b0a th\u00edch c\u1ee7a b\u1ea1n trong danh s\u00e1ch, t\u00ecm ki\u1ebfm c\u00e1c thi\u1ebft l\u1eadp ph\u00f9 h\u1ee3p, v\u00e0 copy\/x\u00e1c th\u1ef1c m\u00e1y ch\u1ee7 c\u1ee7a b\u1ea1n \u0111\u00e3 \u0111\u01b0\u1ee3c t\u00f9y ch\u1ec9nh theo c\u00e1c c\u00e0i \u0111\u1eb7t \u0111\u01b0\u1ee3c khuy\u1ebfn ngh\u1ecb.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"cache-control\"><span class=\"ez-toc-section\" id=\"Cache-Control\"><\/span>Cache-Control<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>T\u00f3m t\u1eaft:<\/p>\n\n\n<ul><li>T\u1eebng t\u00e0i nguy\u00ean c\u00f3 th\u1ec3 \u0111\u1ecbnh ngh\u0129a ch\u00ednh s\u00e1ch cache c\u1ee7a n\u00f3 th\u00f4ng qua header HTTP c\u00f3 t\u00ean Cache-Control.<\/li><li>Cache-Control \u0111\u01b0a ra ch\u1ec9 th\u1ecb \u0111i\u1ec1u khi\u1ec3n cho bi\u1ebft ai c\u00f3 th\u1ec3 cache ph\u1ea3n h\u1ed3i, d\u01b0\u1edbi \u0111i\u1ec1u ki\u1ec7n c\u1ee5 th\u1ec3 n\u00e0o, v\u00e0 trong th\u1eddi gian bao l\u00e2u.<\/li><\/ul>\n\n\n<p>D\u01b0\u1edbi c\u00e1i nh\u00ecn v\u1ec1 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t, y\u00eau c\u1ea7u t\u1ed1t nh\u1ea5t l\u00e0 y\u00eau c\u1ea7u m\u00e0 b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i giao ti\u1ebfp v\u1edbi m\u00e1y ch\u1ee7: m\u1ed9t b\u1ea3n sao ch\u00e9p c\u1ee5c b\u1ed9 c\u1ee7a ph\u1ea3n h\u1ed3i (d\u1eef li\u1ec7u cache tr\u00ean thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng) cho ph\u00e9p b\u1ea1n lo\u1ea1i b\u1ecf t\u1ea5t c\u1ea3 c\u00e1c v\u1ea5n \u0111\u1ec1 v\u1ec1 \u0111\u1ed9 tr\u1ec5 m\u1ea1ng (network latency) v\u00e0 tr\u00e1nh l\u00e3ng ph\u00ed d\u1eef li\u1ec7u (data charges) do ph\u1ea3i trao \u0111\u1ed5i d\u1eef li\u1ec7u. \u0110\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3, ch\u1ec9 th\u1ecb HTTP cho ph\u00e9p m\u00e1y ch\u1ee7 tr\u1ea3 v\u1ec1 c\u00e1c ch\u1ec9 th\u1ecb Cache-Control, c\u00e1i s\u1ebd \u0111i\u1ec1u khi\u1ec3n c\u00e1ch (v\u00e0 trong bao l\u00e2u) th\u00ec tr\u00ecnh duy\u1ec7t v\u00e0 c\u00e1c n\u1ec1n t\u1ea3ng cache trung gian kh\u00e1c c\u00f3 th\u1ec3 cache m\u1ed9t ph\u1ea3n h\u1ed3i c\u1ee5 th\u1ec3.<\/p>\n\n\n<p><strong>L\u01b0u \u00fd<\/strong>: Header Cache-Control \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a trong c\u00e1c ch\u1ec9 th\u1ecb HTTP\/1.1 v\u00e0 \u0111\u01b0\u1ee3c d\u00f9ng \u0111\u1ec3 thay th\u1ebf c\u00e1c header tr\u01b0\u1edbc \u0111\u00f3 (ch\u1eb3ng h\u1ea1n nh\u01b0 Expires) d\u00f9ng \u0111\u1ec3 \u0111\u1ecbnh ngh\u0129a c\u00e1c ch\u00ednh s\u00e1ch cache ph\u1ea3n h\u1ed3i. T\u1ea5t c\u1ea3 c\u00e1c tr\u00ecnh duy\u1ec7t hi\u1ec7n \u0111\u1ea1i \u0111\u1ec1u \u0111\u00e3 h\u1ed7 tr\u1ee3 Cache-Control, \u0111\u00f3 l\u00e0 t\u1ea5t c\u1ea3 nh\u1eefng g\u00ec m\u00e0 ch\u00fang ta c\u1ea7n.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/http-cache-control-highlight.png\" alt=\"HTTP Cache-Control\" class=\"wp-image-16186\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"no-cache-va-no-store\">&#8220;no-cache&#8221; v\u00e0 &#8220;no-store&#8221;<\/h3>\n\n\n<p>&#8220;no-cache&#8221; ch\u1ec9 th\u1ecb r\u1eb1ng m\u1ed9t ph\u1ea3n h\u1ed3i tr\u1ea3 v\u1ec1 kh\u00f4ng th\u1ec3 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 \u0111\u00e1p \u1ee9ng y\u00eau c\u1ea7u ti\u1ebfp theo (subsequent request) cho c\u00f9ng m\u1ed9t URL m\u00e0 ch\u01b0a <em>ki\u1ec3m tra tr\u01b0\u1edbc v\u1edbi m\u00e1y ch\u1ee7 \u0111\u1ec3 xem ph\u1ea3n h\u1ed3i \u0111\u00f3 \u0111\u00e3 thay \u0111\u1ed5i n\u1ed9i dung hay ch\u01b0a<\/em> (t\u00e0i nguy\u00ean c\u00f3 b\u1ea5t c\u1ee9 s\u1eeda \u0111\u1ed5i n\u00e0o hay kh\u00f4ng). H\u1ec7 qu\u1ea3 l\u00e0, n\u1ebfu c\u00f3 token x\u00e1c th\u1ef1c ph\u00f9 h\u1ee3p (ETag), no-cache ph\u00e1t sinh m\u1ed9t v\u00f2ng l\u1eb7p kh\u1ee9 h\u1ed3i \u0111\u1ec3 x\u00e1c th\u1ef1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache, nh\u01b0ng <em>n\u00f3 v\u1eabn c\u00f3 th\u1ec3 lo\u1ea1i b\u1ecf h\u00e0nh vi t\u1ea3i v\u1ec1 n\u1ebfu t\u00e0i nguy\u00ean v\u1eabn ch\u01b0a thay \u0111\u1ed5i<\/em>.<\/p>\n\n\n<p><strong>V\u00ed d\u1ee5 trong th\u1ef1c t\u1ebf<\/strong>. \u0110\u01b0\u1eddng link n\u00e0y: <a href=\"https:\/\/static.kiencang.net\/2020\/cache-demo\/10phut\/cache-control-10phut.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/static.kiencang.net\/2020\/cache-demo\/10phut\/cache-control-10phut.html<\/a> c\u00f3 th\u1eddi gian cache (max-age) cho 2 style (thaydoi.css v\u00e0 giunguyen.css) l\u00e0 10 ph\u00fat. Trong th\u1eddi gian d\u01b0\u1edbi 10 ph\u00fat sau l\u01b0\u1ee3t t\u1ea3i l\u1ea7n \u0111\u1ea7u t\u00f4i s\u1ebd th\u1eed t\u1ea3i l\u1ea1i (l\u1ea7n t\u1ea3i th\u1ee9 hai) \u0111\u1ec3 xem th\u00f4ng tin v\u1ec1 ph\u1ea3n h\u1ed3i. R\u1ed3i sau \u0111\u00f3 s\u1eeda l\u1ea1i m\u1ed9t CSS, v\u00e0 m\u1ed9t c\u00e1i gi\u1eef nguy\u00ean (Cache-Control cho c\u1ea3 hai CSS \u0111\u00f3 l\u00e0 &#8220;no-cache&#8221;) r\u1ed3i t\u1ea3i l\u1ea1i l\u1ea7n n\u1eefa (l\u1ea7n t\u1ea3i th\u1ee9 ba).<\/p>\n\n\n<p>ETag c\u1ee7a thaydoi.css khi ch\u01b0a ch\u1ec9nh s\u1eeda (m\u00e3 ph\u1ea3n h\u1ed3i \/ status code l\u00e0 304 trong l\u1ea7n t\u1ea3i th\u1ee9 hai \/ m\u00e1y ch\u1ee7 web ki\u1ec3m tra Etag v\u00e0 th\u1ea5y n\u00f3 gi\u1eef nguy\u00ean n\u00ean tr\u1ea3 v\u1ec1 ph\u1ea3n h\u1ed3i Not Moified):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/ETag1-css.png\" alt=\"ETag gi\u1eef nguy\u00ean\" class=\"wp-image-16370\"\/><\/figure><\/div>\n\n\n<p>Sau khi s\u1eeda thaydoi.css, d\u00f9 v\u1eabn c\u00f2n trong th\u1eddi gian cache, nh\u01b0ng tr\u00ecnh duy\u1ec7t ki\u1ec3m tra ETag \u0111\u00e3 thay \u0111\u1ed5i n\u00ean n\u00f3 s\u1ebd t\u1ea3i l\u1ea1i t\u00e0i nguy\u00ean n\u00e0y (m\u00e3 ph\u1ea3n h\u1ed3i \/ status code l\u00e0 200):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/ETag2-css.png\" alt=\"Etag \u0111\u00e3 thay \u0111\u1ed5i\" class=\"wp-image-16371\"\/><\/figure><\/div>\n\n\n<p>Hai CSS c\u0169ng c\u00f3 m\u00e3 ph\u1ea3n h\u1ed3i kh\u00e1c nhau (c\u1ea3 hai \u0111\u1ec1u ph\u1ea3i ki\u1ec3m tra ETag, t\u00e0i nguy\u00ean kh\u00f4ng thay \u0111\u1ed5i c\u00f3 m\u00e3 ph\u1ea3n h\u1ed3i 304, t\u00e0i nguy\u00ean thay \u0111\u1ed5i c\u00f3 m\u00e3 ph\u1ea3n h\u1ed3i l\u00e0 200):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/ma-phan-hoi-khac.png\" alt=\"\" class=\"wp-image-16373\"\/><\/figure><\/div>\n\n\n<p>L\u01b0u \u00fd \u0111\u1ec3 tr\u00e1nh nh\u1ea7m l\u1eabn: c\u00e1c t\u00e0i nguy\u00ean kh\u00f4ng c\u1ea7n ph\u1ea3i ki\u1ec3m tra ETag (kh\u00f4ng c\u00f3 thu\u1ed9c t\u00ednh no-cache v\u00e0 th\u1eddi gian cache ch\u01b0a h\u1ebft h\u1ea1n) th\u00ec m\u00e3 ph\u1ea3n h\u1ed3i tr\u1ea3 v\u1ec1 c\u0169ng l\u00e0 200 nh\u01b0ng b\u1ea1n s\u1ebd th\u1ea5y \u1edf ph\u1ea7n size ghi r\u00f5 l\u00e0 memory cache, c\u00f2n nh\u1eefng c\u00e1i c\u1ea7n ki\u1ec3m tra ETag v\u00ec v\u1eabn c\u00f3 trao \u0111\u1ed5i d\u1eef li\u1ec7u \u0111\u1ec3 ki\u1ec3m tra n\u00ean d\u00f9 m\u00e3 ph\u1ea3n h\u1ed3i l\u00e0 g\u00ec v\u1eabn c\u00f3 trao \u0111\u1ed5i d\u1eef li\u1ec7u d\u00f9 nh\u1ecf (n\u1ebfu r\u01a1i v\u00e0o tr\u01b0\u1eddng h\u1ee3p 304):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/cache-khac-nhau.png\" alt=\"c\u00e1c m\u00e3 ph\u1ea3n h\u1ed3i kh\u00e1c nhau\" class=\"wp-image-16377\"\/><\/figure><\/div>\n\n\n<p>&#8212;<\/p>\n\n\n<p>V\u00ec 2 file CSS \u0111\u01b0a v\u00e0o th\u1eed nghi\u1ec7m \u0111\u1ec1u c\u00f3 k\u00edch c\u1ee1 nh\u1ecf, n\u00ean \u0111\u1ec3 ch\u1eafc ch\u1eafn h\u01a1n t\u00f4i l\u00e0m t\u0103ng k\u00edch c\u1ee1 c\u1ee7a n\u00f3 \u0111\u1ec3 xem khi ch\u1ec9nh s\u1eeda ETag, l\u01b0\u1ee3ng d\u1eef li\u1ec7u c\u00f3 trao \u0111\u1ed5i nhi\u1ec1u kh\u00f4ng qua \u0111\u00f3 s\u1ebd kh\u1eb3ng \u0111\u1ecbnh \u0111\u01b0\u1ee3c 100% v\u1ec1 chuy\u1ec7n t\u1ea3i v\u1ec1.<\/p>\n\n\n<p>\u0110\u00e2y l\u00e0 l\u01b0\u1ee3ng d\u1eef li\u1ec7u c\u1ee7a c\u1ea3 hai trong l\u1ea7n t\u1ea3i \u0111\u1ea7u ti\u00ean (ch\u01b0a c\u00f3 cache), b\u1ea1n quan t\u00e2m \u0111\u1ebfn KB v\u00e0 th\u1eddi gian t\u1ea3i v\u1ec1:<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/luot-tai-dau-css.png\" alt=\"l\u01b0\u1ee3t t\u1ea3i d\u1eef li\u1ec7u l\u1ea7n \u0111\u1ea7u ch\u01b0a c\u00f3 cache\" class=\"wp-image-16385\"\/><\/figure><\/div>\n\n\n<p>Khi \u0111\u01b0\u1ee3c cache (ch\u1ec9 c\u00f3 m\u1ed9t l\u01b0\u1ee3ng d\u1eef li\u1ec7u r\u1ea5t nh\u1ecf trao \u0111\u1ed5i \u0111\u1ec3 x\u00e1c th\u1ef1c ETag):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/da-duoc-cache.png\" alt=\"\" class=\"wp-image-16386\"\/><\/figure><\/div>\n\n\n<p>Khi ch\u1ec9nh s\u1eeda m\u1ed9t file v\u00e0 gi\u1eef nguy\u00ean m\u1ed9t file (d\u00f9 trong th\u1eddi gian cache, file thaydoi.css \u0111\u00e3 c\u00f3 ETag kh\u00e1c n\u00ean v\u1eabn ph\u1ea3i t\u1ea3i v\u1ec1 \u0111\u1ea7y \u0111\u1ee7 d\u1eef li\u1ec7u l\u00e0 69,9 KB c\u00f2n file giunguyen.css th\u00ec v\u1eabn gi\u1eef nguy\u00ean ETag n\u00ean d\u1eef li\u1ec7u v\u1eabn l\u1ea5y t\u1eeb cache):<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/da-sua-css.png\" alt=\"\" class=\"wp-image-16387\"\/><\/figure><\/div>\n\n\n<p>&#8212;<\/p>\n\n\n<p>Ng\u01b0\u1ee3c l\u1ea1i, &#8220;no-store&#8221; \u0111\u01a1n gi\u1ea3n h\u01a1n nhi\u1ec1u. N\u00f3 \u0111\u01a1n gi\u1ea3n l\u00e0 kh\u00f4ng cho ph\u00e9p tr\u00ecnh duy\u1ec7t v\u00e0 t\u1ea5t c\u1ea3 c\u00e1c n\u1ec1n t\u1ea3ng cache trung gian kh\u00e1c l\u01b0u tr\u1eef b\u1ea5t c\u1ee9 phi\u00ean b\u1ea3n n\u00e0o c\u1ee7a ph\u1ea3n h\u1ed3i tr\u1ea3 v\u1ec1, v\u00ed d\u1ee5 d\u1eef li\u1ec7u bao g\u1ed3m th\u00f4ng tin ri\u00eang t\u01b0 ho\u1eb7c d\u1eef li\u1ec7u ng\u00e2n h\u00e0ng. B\u1ea5t c\u1ee9 khi n\u00e0o ng\u01b0\u1eddi d\u00f9ng y\u00eau c\u1ea7u t\u00e0i nguy\u00ean n\u00e0y, m\u1ed9t y\u00eau c\u1ea7u s\u1ebd \u0111\u01b0\u1ee3c g\u1eedi \u0111\u1ebfn m\u00e1y ch\u1ee7 v\u00e0 m\u1ed9t ph\u1ea3n h\u1ed3i \u0111\u1ea7y \u0111\u1ee7 (t\u01b0\u01a1i m\u1edbi) s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"public-va-private\">&#8220;public&#8221; v\u00e0 &#8220;private&#8221;<\/h3>\n\n\n<p>N\u1ebfu ph\u1ea3n h\u1ed3i \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u l\u00e0 &#8220;public&#8221;, th\u00ec n\u00f3 c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cache, th\u1eadm ch\u00ed ngay c\u1ea3 khi n\u00f3 c\u00f3 HTTP authentication li\u00ean k\u1ebft v\u1edbi n\u00f3, v\u00e0 th\u1eadm ch\u00ed khi m\u00e3 tr\u1ea1ng th\u00e1i ph\u1ea3n h\u1ed3i (response status code) kh\u00f4ng c\u00f3 kh\u1ea3 n\u0103ng cache theo c\u00e1ch th\u00f4ng th\u01b0\u1eddng. Trong h\u1ea7u h\u1ebft tr\u01b0\u1eddng h\u1ee3p, &#8220;public&#8221; l\u00e0 kh\u00f4ng c\u1ea7n thi\u1ebft, v\u00ec c\u00e1c th\u00f4ng tin cache r\u00f5 r\u00e0ng (ch\u1eb3ng h\u1ea1n nh\u01b0 &#8220;max-age&#8221;) \u0111\u00e3 ch\u1ec9 ra r\u1eb1ng d\u00f9 sao ph\u1ea3n h\u1ed3i l\u00e0 c\u00f3 kh\u1ea3 n\u0103ng cache.<\/p>\n\n\n<p>Ng\u01b0\u1ee3c l\u1ea1i, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 cache ph\u1ea3n h\u1ed3i &#8220;private&#8221;. D\u00f9 v\u1eady, c\u00e1c ph\u1ea3n h\u1ed3i n\u00e0y th\u01b0\u1eddng d\u00e0nh ri\u00eang cho m\u1ed9t ng\u01b0\u1eddi d\u00f9ng c\u1ee5 th\u1ec3, v\u00ec th\u1ebf m\u1ed9t cache trung gian kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p cache ch\u00fang. L\u1ea5y v\u00ed d\u1ee5, tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 cache m\u1ed9t trang HTML v\u1edbi th\u00f4ng tin ri\u00eang t\u01b0 c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, nh\u01b0ng CDN kh\u00f4ng th\u1ec3 cache trang.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"max-age\">&#8220;max-age&#8221;<\/h3>\n\n\n<p>\u0110\u00e2y l\u00e0 h\u01b0\u1edbng d\u1eabn c\u1ee5 th\u1ec3 v\u1ec1 th\u1eddi gian t\u1ed1i \u0111a t\u00ednh theo gi\u00e2y m\u00e0 &#8220;ph\u1ea3n h\u1ed3i \u0111\u00e3 t\u00ecm n\u1ea1p&#8221; \u0111\u01b0\u1ee3c ph\u00e9p s\u1eed d\u1ee5ng l\u1ea1i t\u00ednh t\u1eeb th\u1eddi \u0111i\u1ec3m c\u00f3 y\u00eau c\u1ea7u. L\u1ea5y v\u00ed d\u1ee5, &#8220;max-age=60&#8221; ch\u1ec9 th\u1ecb r\u1eb1ng ph\u1ea3n h\u1ed3i c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cache v\u00e0 s\u1eed d\u1ee5ng l\u1ea1i trong v\u00f2ng 60 gi\u00e2y <strong>k\u1ebf ti\u1ebfp<\/strong>.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"xac-d\u1ecbnh-chinh-sach-cache-control-t\u1ed1i-\u01b0u\"><span class=\"ez-toc-section\" id=\"Xac_dinh_chinh_sach_Cache-Control_toi_uu\"><\/span>X\u00e1c \u0111\u1ecbnh ch\u00ednh s\u00e1ch Cache-Control t\u1ed1i \u01b0u<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/http-cache-decision-tree.png\" alt=\"ch\u00ednh s\u00e1ch cache-control t\u1ed1i \u01b0u\" class=\"wp-image-16190\"\/><\/figure><\/div>\n\n\n<p>Ch\u00fa th\u00edch:<\/p>\n\n\n<ul><li>H\u00e0ng 1: Reusable response? T\u00e1i s\u1eed d\u1ee5ng ph\u1ea3n h\u1ed3i?<\/li><li>H\u00e0ng 2: N\u1ebfu <strong>Kh\u00f4ng<\/strong> (No) th\u00ec \u00e1p d\u1ee5ng &#8220;no-store&#8221;, n\u1ebfu <strong>C\u00f3<\/strong> (Yes) th\u00ec h\u1ecfi ti\u1ebfp: Revalidate each time? \/ C\u00f3 x\u00e1c th\u1ef1c l\u1ea1i m\u1ed7i l\u1ea7n t\u00ecm n\u1ea1p hay kh\u00f4ng?<\/li><li>H\u00e0ng 3: N\u1ebfu C\u00f3 th\u00ec \u00e1p d\u1ee5ng &#8220;no-cache&#8221;, c\u00f2n n\u1ebfu Kh\u00f4ng th\u00ec h\u1ecfi ti\u1ebfp: Cacheable by intermediate caches? \/ C\u00f3 kh\u1ea3 n\u0103ng cache b\u1edfi c\u00e1c n\u1ec1n t\u1ea3ng cache trung gian?<\/li><li>H\u00e0ng 4: N\u1ebfu C\u00f3 th\u00ec \u00e1p d\u1ee5ng &#8220;public&#8221;, n\u1ebfu Kh\u00f4ng th\u00ec \u00e1p d\u1ee5ng &#8220;private&#8221;<\/li><li>H\u00e0ng 5: T\u1ed1i \u0111a h\u00f3a th\u1eddi gian s\u1ed1ng c\u1ee7a cache? (maximum cache lifetime?)<\/li><li>H\u00e0ng 6: \u0110\u01b0a ra ch\u1ec9 th\u1ecb max-age=&#8230;<\/li><li>H\u00e0ng 7: Th\u00eam header ETag<\/li><\/ul>\n\n\n<p>Ch\u00fang ta s\u1ebd s\u1eed d\u1ee5ng c\u00e2y ra quy\u1ebft \u0111\u1ecbnh \u1edf tr\u00ean \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh ch\u00ednh s\u00e1ch cache t\u1ed1i \u01b0u cho m\u1ed9t t\u00e0i nguy\u00ean c\u1ee5 th\u1ec3, ho\u1eb7c m\u1ed9t thi\u1ebft l\u1eadp cho c\u00e1c t\u00e0i nguy\u00ean m\u00e0 \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n s\u1eed d\u1ee5ng. L\u00fd t\u01b0\u1edfng nh\u1ea5t, b\u1ea1n ph\u1ea3i h\u01b0\u1edbng \u0111\u1ebfn vi\u1ec7c cache c\u00e0ng nhi\u1ec1u ph\u1ea3n h\u1ed3i c\u00e0ng t\u1ed1t tr\u00ean m\u00e1y kh\u00e1ch v\u1edbi th\u1eddi gian cache t\u1ed1i \u0111a trong kh\u1ea3 n\u0103ng, v\u00e0 cung c\u1ea5p m\u00e3 token x\u00e1c th\u1ef1c cho t\u1eebng ph\u1ea3n h\u1ed3i \u0111\u1ec3 b\u1eadt t\u00ednh n\u0103ng x\u00e1c th\u1ef1c l\u1ea1i (revalidation) m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3.<\/p>\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><strong>C\u00e1c ch\u1ec9 th\u1ecb Cache-Control &amp; gi\u1ea3i th\u00edch \u00fd ngh\u0129a<\/strong><\/td><\/tr><tr><td>max-age=86400<\/td><td>Ph\u1ea3n h\u1ed3i c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cache b\u1edfi tr\u00ecnh duy\u1ec7t v\u00e0 b\u1ea5t k\u1ef3 n\u1ec1n t\u1ea3ng cache trung gian n\u00e0o \/ intermediary cache (c\u00e1i n\u00e0y l\u00e0 &#8220;public&#8221;) trong th\u1eddi gian 1 ng\u00e0y (60 gi\u00e2y x 60 x 24).<\/td><\/tr><tr><td>private, max-age=600<\/td><td>Ph\u1ea3n h\u1ed3i c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cache b\u1edfi tr\u00ecnh duy\u1ec7t m\u00e1y kh\u00e1ch trong v\u00f2ng ch\u1ec9 10 ph\u00fat (60 gi\u00e2y x 10).<\/td><\/tr><tr><td>no-store<\/td><td>Ph\u1ea3n h\u1ed3i (d\u1eef li\u1ec7u tr\u1ea3 v\u1ec1 t\u1eeb m\u00e1y ch\u1ee7) kh\u00f4ng \u0111\u01b0\u1ee3c ph\u00e9p cache v\u00e0 ph\u1ea3i t\u00ecm n\u1ea1p \u0111\u1ea7y \u0111\u1ee7 m\u1ed7i khi c\u00f3 y\u00eau c\u1ea7u.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n<p>Theo HTTP Archive, trong s\u1ed1 300 ng\u00e0n website \u0111\u01b0\u1ee3c truy c\u1eadp nhi\u1ec1u nh\u1ea5t (theo th\u1ee9 h\u1ea1ng Alexa), <a href=\"http:\/\/httparchive.org\/trends.php#maxage0\" target=\"_blank\" rel=\"noreferrer noopener\">tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 cache g\u1ea7n m\u1ed9t n\u1eeda t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 t\u1ea3i xu\u1ed1ng<\/a>, \u0111i\u1ec1u \u0111\u00f3 gi\u00fap ti\u1ebft ki\u1ec7m r\u1ea5t nhi\u1ec1u cho c\u00e1c l\u1ea7n truy c\u1eadp l\u1eb7p l\u1ea1i. T\u1ea5t nhi\u00ean, \u0111i\u1ec1u \u0111\u00f3 kh\u00f4ng c\u00f3 ngh\u0129a l\u00e0 \u1ee9ng d\u1ee5ng c\u1ee5 th\u1ec3 c\u1ee7a b\u1ea1n ch\u1ec9 c\u00f3 th\u1ec3 cache 50% m\u00e0 th\u00f4i. M\u1ed9t s\u1ed1 website c\u00f3 th\u1ec3 cache nhi\u1ec1u h\u01a1n 90% c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a h\u1ecd, trong khi c\u00e1c trang kh\u00e1c c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u d\u1eef li\u1ec7u ri\u00eang t\u01b0 (private) ho\u1eb7c nh\u1ea1y c\u1ea3m v\u1edbi th\u1eddi gian (time-sensitive data), \u0111\u00e2y \u0111\u1ec1u l\u00e0 d\u1eef li\u1ec7u kh\u00f4ng n\u00ean cache m\u1ed9t ch\u00fat n\u00e0o.<\/p>\n\n\n<p><strong>B\u1ea1n c\u1ea7n ki\u1ebfm tra trang c\u1ee7a b\u1ea1n \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh c\u00e1c t\u00e0i nguy\u00ean n\u00e0o c\u00f3 th\u1ec3 cache v\u00e0 \u0111\u1ea3m b\u1ea3o \u0111\u01b0\u1ee3c r\u1eb1ng ch\u00fang tr\u1ea3 v\u1ec1 Cache-Control v\u00e0 ETag header ch\u00ednh x\u00e1c.<\/strong><\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"vo-hi\u1ec7u-hoa-va-c\u1eadp-nh\u1eadt-cac-ph\u1ea3n-h\u1ed3i-da-d\u01b0\u1ee3c-cache\"><span class=\"ez-toc-section\" id=\"Vo_hieu_hoa_va_cap_nhat_cac_phan_hoi_da_duoc_cache\"><\/span>V\u00f4 hi\u1ec7u h\u00f3a v\u00e0 c\u1eadp nh\u1eadt c\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>T\u00f3m t\u1eaft:<\/p>\n\n\n<ul><li>C\u00e1c ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache c\u1ee5c b\u1ed9 tr\u00ean thi\u1ebft b\u1ecb c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (local cached) v\u1eabn \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho \u0111\u1ebfn khi t\u00e0i nguy\u00ean b\u1ecb xem l\u00e0 &#8220;h\u1ebft h\u1ea1n&#8221;.<\/li><li>Nh\u00fang m\u1ed9t file fingerprint v\u00e0o trong URL cho ph\u00e9p b\u1ea1n b\u1eaft bu\u1ed9c m\u00e1y kh\u00e1ch ph\u1ea3i c\u1eadp nh\u1eadt phi\u00ean b\u1ea3n m\u1edbi c\u1ee7a ph\u1ea3n h\u1ed3i.<\/li><li>T\u1eebng \u1ee9ng d\u1ee5ng c\u1ea7n ph\u1ea3i \u0111\u1ecbnh ngh\u0129a h\u1ec7 th\u1ed1ng c\u1ea5p b\u1eadc cache c\u1ee7a n\u00f3 \u0111\u1ec3 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t, t\u1ed1c \u0111\u1ed9.<\/li><\/ul>\n\n\n<p>T\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u HTTP m\u00e0 tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n tr\u01b0\u1edbc ti\u00ean \u0111\u01b0\u1ee3c g\u1eedi \u0111\u1ebfn cho b\u1ed9 nh\u1edb \u0111\u1ec7m tr\u00ecnh duy\u1ec7t \u0111\u1ec3 ki\u1ec3m tra xem li\u1ec7u r\u1eb1ng c\u00f3 m\u1ed9t ph\u1ea3n h\u1ed3i n\u00e0o \u0111\u00e3 \u0111\u01b0\u1ee3c cache (m\u00e0 v\u1eabn h\u1ee3p l\u1ec7 \/ valid) \u0111\u1ec3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng cho vi\u1ec7c ho\u00e0n th\u00e0nh y\u00eau c\u1ea7u hay kh\u00f4ng. Ph\u1ea3n h\u1ed3i \u0111\u1ecdc t\u1eeb cache lo\u1ea1i b\u1ecf c\u1ea3 \u0111\u1ed9 tr\u1ec5 m\u1ea1ng v\u00e0 chi ph\u00ed d\u1eef li\u1ec7u m\u00e0 vi\u1ec7c t\u1ea3i qua m\u1ea1ng s\u1ebd ph\u00e1t sinh.<\/p>\n\n\n<p><strong>Tuy nhi\u00ean, n\u1ebfu b\u1ea1n mu\u1ed1n c\u1eadp nh\u1eadt ho\u1eb7c l\u00e0m m\u1ea5t hi\u1ec7u l\u1ef1c c\u1ee7a ph\u1ea3n h\u1ed3i \u0111\u00e3 \u0111\u01b0\u1ee3c cache th\u00ec ph\u1ea3i l\u00e0m th\u1ebf n\u00e0o?<\/strong> L\u1ea5y v\u00ed d\u1ee5, gi\u1ea3 s\u1eed b\u1ea1n n\u00f3i v\u1edbi tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng cache file stylesheet CSS trong v\u00f2ng 24 gi\u1eddi (max-age=86400), nh\u01b0ng b\u00ean thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n v\u1eeba m\u1edbi \u0111\u01b0a ra m\u1ed9t b\u1ea3n c\u1eadp nh\u1eadt m\u00e0 b\u1ea1n mu\u1ed1n n\u00f3 kh\u1ea3 d\u1ee5ng cho t\u1ea5t c\u1ea3 ng\u01b0\u1eddi d\u00f9ng. L\u00e0m th\u1ebf n\u00e0o b\u1ea1n th\u00f4ng b\u00e1o cho t\u1ea5t c\u1ea3 ng\u01b0\u1eddi d\u00f9ng, nh\u1eefng ng\u01b0\u1eddi hi\u1ec7n \u0111ang c\u00f3 b\u1ea3n sao ch\u00e9p cache &#8220;c\u0169&#8221; c\u1ee7a CSS \u0111\u1ec3 c\u1eadp nh\u1eadt cache c\u1ee7a h\u1ecd? B\u1ea1n kh\u00f4ng th\u1ec3, \u00edt nh\u1ea5t l\u00e0 khi kh\u00f4ng thay \u0111\u1ed5i URL c\u1ee7a t\u00e0i nguy\u00ean.<\/p>\n\n\n<p>Sau khi tr\u00ecnh duy\u1ec7t cache ph\u1ea3n h\u1ed3i, phi\u00ean b\u1ea3n c\u1ee7a cache \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng cho \u0111\u1ebfn khi n\u00f3 kh\u00f4ng c\u00f2n t\u01b0\u01a1i m\u1edbi n\u1eefa, c\u00e1i \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh b\u1eb1ng th\u00f4ng s\u1ed1 max-age ho\u1eb7c expires, ho\u1eb7c cho \u0111\u1ebfn khi n\u00f3 b\u1ecb lo\u1ea1i b\u1ecf kh\u1ecfi cache v\u00ec m\u1ed9t l\u00fd do n\u00e0o \u0111\u00f3-ch\u1eb3ng h\u1ea1n, ng\u01b0\u1eddi d\u00f9ng x\u00f3a b\u1ed9 nh\u1edb \u0111\u1ec7m cache c\u1ee7a tr\u00ecnh duy\u1ec7t. H\u1ec7 qu\u1ea3 l\u00e0, ng\u01b0\u1eddi d\u00f9ng kh\u00e1c nhau, cu\u1ed1i c\u00f9ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c phi\u00ean b\u1ea3n kh\u00e1c nhau c\u1ee7a c\u00f9ng m\u1ed9t file khi trang \u0111\u01b0\u1ee3c x\u00e2y d\u1ef1ng: nh\u1eefng ng\u01b0\u1eddi d\u00f9ng v\u1eeba m\u1edbi t\u00ecm n\u1ea1p t\u00e0i nguy\u00ean s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n m\u1edbi, trong khi ng\u01b0\u1eddi d\u00f9ng cache b\u1ea3n sao t\u1eeb tr\u01b0\u1edbc (nh\u01b0ng v\u1eabn h\u1ee3p l\u1ec7, \u00fd l\u00e0 ch\u01b0a h\u1ebft h\u1ea1n &#8220;max-age&#8221;) s\u1eed d\u1ee5ng m\u1ed9t phi\u00ean b\u1ea3n c\u0169 h\u01a1n c\u1ee7a ph\u1ea3n h\u1ed3i.<\/p>\n\n\n<p><strong>L\u00e0m th\u1ebf n\u00e0o b\u1ea1n ho\u00e0n th\u00e0nh \u0111\u01b0\u1ee3c c\u1ea3 hai m\u1ee5c ti\u00eau: cache ph\u00eda m\u00e1y kh\u00e1ch (client-side) v\u00e0 c\u1eadp nh\u1eadt nhanh ch\u00f3ng?<\/strong> B\u1ea1n thay \u0111\u1ed5i URL c\u1ee7a t\u00e0i nguy\u00ean v\u00e0 \u00e9p ng\u01b0\u1eddi d\u00f9ng t\u1ea3i ph\u1ea3n h\u1ed3i m\u1edbi b\u1ea5t c\u1ee9 khi n\u00e0o n\u1ed9i dung c\u1ee7a n\u00f3 thay \u0111\u1ed5i. Th\u01b0\u1eddng th\u00ec b\u1ea1n l\u00e0m \u0111i\u1ec1u \u0111\u00f3 b\u1eb1ng c\u00e1ch nh\u00fang m\u1ed9t fingerprint v\u00e0o file, ho\u1eb7c m\u1ed9t con s\u1ed1 ch\u1ec9 phi\u00ean b\u1ea3n (vesion number), trong filename c\u1ee7a n\u00f3-l\u1ea5y v\u00ed d\u1ee5, style.<strong>x234dff<\/strong>.css.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/04\/http-cache-hierarchy.png\" alt=\"h\u1ec7 th\u1ed1ng cache\" class=\"wp-image-16196\"\/><\/figure><\/div>\n\n\n<p>Kh\u1ea3 n\u0103ng \u0111\u1ecbnh ngh\u0129a ch\u00ednh s\u00e1ch cache cho t\u1eebng t\u00e0i nguy\u00ean cho ph\u00e9p b\u1ea1n x\u00e1c \u0111\u1ecbnh &#8220;h\u1ec7 th\u1ed1ng ph\u00e2n c\u1ea5p cache \/ cache hierarchies&#8221; t\u1eeb \u0111\u00f3 cho b\u1ea1n quy\u1ec1n kh\u00f4ng ch\u1ec9 x\u00e1c \u0111\u1ecbnh \u0111\u1ed9 d\u00e0i c\u1ee7a t\u1eebng cache, m\u00e0 c\u00f2n m\u1ee9c \u0111\u1ed9 nhanh ch\u00f3ng ng\u01b0\u1eddi d\u00f9ng nh\u00ecn th\u1ea5y phi\u00ean b\u1ea3n m\u1edbi. \u0110\u1ec3 minh h\u1ecda \u0111i\u1ec1u n\u00e0y, h\u00e3y ph\u00e2n t\u00edch v\u00ed d\u1ee5 tr\u00ean:<\/p>\n\n\n<ul><li>HTML \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u l\u00e0 &#8220;no-cache&#8221;, \u0111i\u1ec1u \u0111\u00f3 c\u00f3 ngh\u0129a l\u00e0 tr\u00ecnh duy\u1ec7t l\u00fac n\u00e0o c\u0169ng x\u00e1c nh\u1eadn l\u1ea1i (revalidate) t\u00e0i li\u1ec7u cho t\u1eebng y\u00eau c\u1ea7u v\u00e0 t\u00ecm n\u1ea1p phi\u00ean b\u1ea3n m\u1edbi nh\u1ea5t n\u1ebfu n\u1ed9i dung thay \u0111\u1ed5i. C\u0169ng v\u1eady, trong m\u00e3 \u0111\u00e1nh d\u1ea5u HTML, b\u1ea1n nh\u00fang fingerprint v\u00e0o URL cho t\u00e0i nguy\u00ean CSS v\u00e0 JavaScript: n\u1ebfu n\u1ed9i dung c\u1ee7a c\u00e1c file n\u00e0y thay \u0111\u1ed5i, th\u00ec HTML c\u1ee7a trang c\u0169ng thay \u0111\u1ed5i theo v\u00e0 m\u1ed9t b\u1ea3n copy m\u1edbi cho ph\u1ea3n h\u1ed3i HTML s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1.<\/li><li>CSS cho ph\u00e9p cache b\u1edfi tr\u00ecnh duy\u1ec7t v\u00e0 c\u00e1c n\u1ec1n t\u1ea3ng cache trung gian (v\u00ed d\u1ee5 CDN), v\u00e0 thi\u1ebft l\u1eadp th\u1eddi gian h\u1ebft h\u1ea1n trong v\u00f2ng 1 n\u0103m. L\u01b0u \u00fd r\u1eb1ng b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng &#8220;th\u1eddi \u0111i\u1ec3m trong t\u01b0\u01a1ng lai xa&#8221; trong v\u00f2ng 1 n\u0103m m\u1ed9t c\u00e1ch an to\u00e0n b\u1edfi v\u00ec b\u1ea1n \u0111\u00e3 nh\u00fang file fingerprint v\u00e0o b\u00ean trong t\u00ean file c\u1ee7a n\u00f3: n\u1ebfu CSS \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt, URL c\u0169ng thay \u0111\u1ed5i.<\/li><li>JavaScript c\u0169ng \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp th\u1eddi gian h\u1ebft h\u1ea1n trong v\u00f2ng 1 n\u0103m, nh\u01b0ng \u0111\u01b0\u1ee3c \u0111\u00e1nh d\u1ea5u l\u00e0 private, c\u00f3 l\u1ebd v\u00ec n\u00f3 bao g\u1ed3m m\u1ed9t s\u1ed1 d\u1eef li\u1ec7u ri\u00eang t\u01b0 m\u00e0 CDN kh\u00f4ng th\u1ec3 cache.<\/li><li>\u1ea2nh \u0111\u01b0\u1ee3c cache m\u00e0 kh\u00f4ng c\u1ea7n phi\u00ean b\u1ea3n ho\u1eb7c d\u1ea5u nh\u1eadn bi\u1ebft ri\u00eang bi\u1ec7t duy nh\u1ea5t (fingerprint) v\u00e0 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp th\u1eddi gian h\u1ebft h\u1ea1n trong v\u00f2ng 1 ng\u00e0y.<\/li><\/ul>\n\n\n<p>S\u1ef1 k\u1ebft h\u1ee3p gi\u1eefa ETag, Cache-Control, v\u00e0 URL duy nh\u1ea5t cho ph\u00e9p b\u1ea1n ph\u00e2n ph\u1ed1i n\u1ed9i dung theo c\u00e1ch t\u1ed1t nh\u1ea5t tr\u00ean nhi\u1ec1u kh\u00eda c\u1ea1nh: th\u1eddi gian h\u1ebft h\u1ea1n d\u00e0i, quy\u1ebft \u0111\u1ecbnh ph\u1ea3n h\u1ed3i n\u00e0o c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cache, v\u00e0 c\u00e1c c\u1eadp nh\u1eadt theo nhu c\u1ea7u.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\" id=\"danh-sach-ki\u1ec3m-tra-cache\"><span class=\"ez-toc-section\" id=\"Danh_sach_kiem_tra_cache\"><\/span>Danh s\u00e1ch ki\u1ec3m tra cache<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Kh\u00f4ng c\u00f3 ch\u00ednh s\u00e1ch cache n\u00e0o l\u00e0 t\u1ed1t nh\u1ea5t trong m\u1ecdi tr\u01b0\u1eddng h\u1ee3p. Ph\u1ee5 thu\u1ed9c v\u00e0o m\u1eabu l\u01b0u l\u01b0\u1ee3ng truy c\u1eadp (traffic patterns), ki\u1ec3u d\u1eef li\u1ec7u (type of data), v\u00e0 c\u00e1c y\u00eau c\u1ea7u \u1ee9ng d\u1ee5ng c\u1ee5 th\u1ec3 cho m\u1ee9c \u0111\u1ed9 t\u01b0\u01a1i m\u1edbi c\u1ee7a d\u1eef li\u1ec7u (data freshness), b\u1ea1n ph\u1ea3i x\u00e1c \u0111\u1ecbnh v\u00e0 t\u00f9y ch\u1ec9nh c\u00e1c c\u00e0i \u0111\u1eb7t th\u00edch h\u1ee3p v\u1edbi t\u1eebng t\u00e0i nguy\u00ean, c\u0169ng nh\u01b0 &#8220;h\u1ec7 th\u1ed1ng c\u1ea5p b\u1eadc caching&#8221; n\u00f3i chung.<\/p>\n\n\n<p>M\u1ed9t s\u1ed1 m\u1eb9o v\u00e0 k\u1ef9 thu\u1eadt \u0111\u1ec3 c\u1ea7n ghi nh\u1edb khi b\u1ea1n th\u1ef1c thi chi\u1ebfn l\u01b0\u1ee3c cache:<\/p>\n\n\n<ul><li><strong>S\u1eed d\u1ee5ng URL c\u1ed1 \u0111\u1ecbnh<\/strong>: n\u1ebfu b\u1ea1n ph\u1ee5c v\u1ee5 c\u00f9ng n\u1ed9i dung tr\u00ean c\u00e1c URL kh\u00e1c nhau, th\u1ebf th\u00ec n\u1ed9i dung s\u1ebd \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p v\u00e0 l\u01b0u tr\u1eef nhi\u1ec1u l\u1ea7n. L\u01b0u \u00fd: URL c\u00f3 ph\u00e2n bi\u1ec7t ch\u1eef hoa v\u00e0 ch\u1eef th\u01b0\u1eddng (case sensitive).<\/li><li><strong>\u0110\u1ea3m b\u1ea3o m\u00e1y ch\u1ee7 cung c\u1ea5p token x\u00e1c th\u1ef1c (ETag)<\/strong>: c\u00e1c token x\u00e1c th\u1ef1c lo\u1ea1i b\u1ecf nhu c\u1ea7u t\u1ea3i d\u1eef li\u1ec7u m\u1ea1ng khi t\u00e0i nguy\u00ean tr\u00ean m\u00e1y ch\u1ee7 kh\u00f4ng thay \u0111\u1ed5i.<\/li><li><strong>X\u00e1c \u0111\u1ecbnh c\u00e1c t\u00e0i nguy\u00ean n\u00e0o c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c cache b\u1edfi trung gian<\/strong>: nh\u1eefng t\u00e0i nguy\u00ean c\u00f3 \u0111\u00e1p \u1ee9ng gi\u1ed1ng h\u1ec7t nhau cho t\u1ea5t c\u1ea3 ng\u01b0\u1eddi d\u00f9ng l\u00e0 \u1ee9ng c\u1eed vi\u00ean s\u00e1ng gi\u00e1 \u0111\u1ec3 cache b\u1edfi CDN v\u00e0 c\u00e1c n\u1ec1n t\u1ea3ng trung gian kh\u00e1c.<\/li><li><strong>X\u00e1c \u0111\u1ecbnh th\u1eddi gian s\u1ed1ng t\u1ed1i \u01b0u c\u1ee7a cache cho t\u1eebng ngu\u1ed3n t\u00e0i nguy\u00ean<\/strong>: c\u00e1c ngu\u1ed3n kh\u00e1c nhau c\u00f3 th\u1ec3 y\u00eau c\u1ea7u m\u1ee9c \u0111\u1ed9 t\u01b0\u01a1i m\u1edbi kh\u00e1c nhau. Ki\u1ec3m tra v\u00e0 x\u00e1c \u0111\u1ecbnh <em>max-age<\/em> th\u00edch h\u1ee3p cho t\u1eebng c\u00e1i.<\/li><li><strong>X\u00e1c \u0111\u1ecbnh h\u1ec7 th\u1ed1ng c\u1ea5p b\u1eadc cache t\u1ed1t nh\u1ea5t cho trang c\u1ee7a b\u1ea1n<\/strong>: k\u1ebft h\u1ee3p URL t\u00e0i nguy\u00ean v\u1edbi fingerprint c\u1ee7a n\u1ed9i dung v\u00e0 th\u1eddi gian s\u1ed1ng c\u1ee7a cache ng\u1eafn ho\u1eb7c <em>no-cache<\/em> cho c\u00e1c t\u00e0i li\u1ec7u HTML cho ph\u00e9p b\u1ea1n l\u00e0m ch\u1ee7 m\u1ee9c \u0111\u1ed9 nhanh ch\u00f3ng kh\u00e1ch h\u00e0ng nh\u1eadn \u0111\u01b0\u1ee3c c\u00e1c c\u1eadp nh\u1eadt.<\/li><li><strong>T\u1ed1i thi\u1ec3u h\u00f3a t\u1ea3i v\u1ec1 b\u1eb1ng t\u00e1ch m\u00e3:<\/strong> m\u1ed9t s\u1ed1 ngu\u1ed3n t\u00e0i nguy\u00ean c\u1eadp nh\u1eadt v\u1edbi t\u1ea7n s\u1ed1 cao h\u01a1n c\u00e1c ngu\u1ed3n kh\u00e1c. N\u1ebfu c\u00f3 m\u1ed9t ngu\u1ed3n t\u00e0i nguy\u00ean c\u1ee5 th\u1ec3 n\u00e0o \u0111\u00f3 (ch\u1eb3ng h\u1ea1n h\u00e0m JavaScript ho\u1eb7c m\u1ed9t thi\u1ebft l\u1eadp c\u1ee7a CSS) th\u01b0\u1eddng c\u1eadp nh\u1eadt, h\u00e3y xem x\u00e9t ph\u00e2n ph\u1ed1i m\u00e3 b\u1eb1ng m\u1ed9t file ri\u00eang bi\u1ec7t. L\u00e0m th\u1ebf cho ph\u00e9p ph\u1ea7n c\u00f2n l\u1ea1i c\u1ee7a n\u1ed9i dung (v\u00ed d\u1ee5, c\u00e1c th\u01b0 vi\u1ec7n m\u00e3 \u00edt khi thay \u0111\u1ed5i) \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p t\u1eeb cache v\u00e0 t\u1ed1i thi\u1ec3u h\u00f3a s\u1ed1 l\u01b0\u1ee3ng n\u1ed9i dung t\u1ea3i v\u1ec1 b\u1ea5t c\u1ee9 khi n\u00e0o c\u1eadp nh\u1eadt \u0111\u00e3 \u0111\u01b0\u1ee3c t\u00ecm n\u1ea1p.<\/li><\/ul>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft HTTP Caching, t\u00e1c gi\u1ea3: Ilya Grigorik, trang Google Developers)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00ecm n\u1ea1p t\u00e0i nguy\u00ean qua m\u1ea1ng internet v\u1eeba ch\u1eadm, v\u1eeba t\u1ed1n k\u00e9m. C\u00e1c ph\u1ea3n h\u1ed3i n\u1eb7ng y\u00eau c\u1ea7u nhi\u1ec1u v\u00f2ng l\u1eb7p kh\u1ee9 h\u1ed3i (roundtrips) gi\u1eefa m\u00e1y kh\u00e1ch v\u00e0 m\u00e1y ch\u1ee7 (server). \u0110i\u1ec1u n\u00e0y l\u00e0m kh\u1ea3 n\u0103ng hi\u1ec7n di\u1ec7n c\u1ee7a ch\u00fang b\u1ecb tr\u00ec ho\u00e3n, v\u00e0 \u0111\u1ed3ng th\u1eddi l\u00e0m tr\u1ec5 th\u1eddi \u0111i\u1ec3m tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 x\u1eed &hellip;<\/p>\n","protected":false},"author":1,"featured_media":16203,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"description\" content=\"HTTP caching thi\u1ebft l\u1eadp sai l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 nghi\u00eam tr\u1ecdng nh\u1ea5t li\u00ean quan \u0111\u1ebfn t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t \u0111\u00fang n\u1ebfu b\u1ea1n tri\u1ec3n khai trang tr\u00ean c\u00e1c host ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u s\u1eb5n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"HTTP caching thi\u1ebft l\u1eadp sai l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 nghi\u00eam tr\u1ecdng nh\u1ea5t li\u00ean quan \u0111\u1ebfn t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t \u0111\u00fang n\u1ebfu b\u1ea1n tri\u1ec3n khai trang tr\u00ean c\u00e1c host ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u s\u1eb5n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/tim-hieu-http-caching\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-12T19:16:56+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching &#8226; Ki\u1ebfn c\u00e0ng","description":"HTTP caching thi\u1ebft l\u1eadp sai l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 nghi\u00eam tr\u1ecdng nh\u1ea5t li\u00ean quan \u0111\u1ebfn t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t \u0111\u00fang n\u1ebfu b\u1ea1n tri\u1ec3n khai trang tr\u00ean c\u00e1c host ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u s\u1eb5n.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/tim-hieu-http-caching\/","og_locale":"vi_VN","og_type":"article","og_title":"T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching &#8226; Ki\u1ebfn c\u00e0ng","og_description":"HTTP caching thi\u1ebft l\u1eadp sai l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 nghi\u00eam tr\u1ecdng nh\u1ea5t li\u00ean quan \u0111\u1ebfn t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t \u0111\u00fang n\u1ebfu b\u1ea1n tri\u1ec3n khai trang tr\u00ean c\u00e1c host ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u s\u1eb5n.","og_url":"https:\/\/kiencang.net\/tim-hieu-http-caching\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-04-12T19:16:56+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"20 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/tim-hieu-http-caching\/","url":"https:\/\/kiencang.net\/tim-hieu-http-caching\/","name":"T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-04-12T19:16:56+00:00","dateModified":"2020-04-12T19:16:56+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"description":"HTTP caching thi\u1ebft l\u1eadp sai l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 nghi\u00eam tr\u1ecdng nh\u1ea5t li\u00ean quan \u0111\u1ebfn t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 website. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t \u0111\u00fang n\u1ebfu b\u1ea1n tri\u1ec3n khai trang tr\u00ean c\u00e1c host ch\u01b0a \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u s\u1eb5n.","breadcrumb":{"@id":"https:\/\/kiencang.net\/tim-hieu-http-caching\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/tim-hieu-http-caching\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/tim-hieu-http-caching\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"T\u00ecm hi\u1ec3u s\u00e2u v\u1ec1 HTTP Caching"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16878"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=16878"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16878\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}