{"id":16850,"date":"2020-03-08T16:20:31","date_gmt":"2020-03-08T09:20:31","guid":{"rendered":"https:\/\/kiencang.net\/?p=14891"},"modified":"2020-03-08T16:20:31","modified_gmt":"2020-03-08T09:20:31","slug":"du-doan-prefetch","status":"publish","type":"post","link":"https:\/\/kiencang.net\/du-doan-prefetch\/","title":{"rendered":"D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n"},"content":{"rendered":"\n<p>Trong b\u00e0i vi\u1ebft n\u00e0y b\u1ea1n s\u1ebd h\u1ecdc c\u00e1ch d\u1ef1 \u0111o\u00e1n <a href=\"https:\/\/kiencang.net\/link-prefetch\/\"><em>t\u00ecm n\u1ea1p tr\u01b0\u1edbc \/ prefetch<\/em><\/a> hi\u1ec7u qu\u1ea3 h\u01a1n v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng <em>Guess.js<\/em> \u0111\u1ec3 tri\u1ec3n khai n\u00f3.<\/p>\n\n\n<p>Trong video m\u00e0 t\u00f4i n\u00f3i v\u1ec1 vi\u1ec7c <a href=\"https:\/\/www.youtube.com\/watch?v=0jB4YWgAxUo\">\u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp web nhanh h\u01a1n th\u00f4ng qua d\u1ef1 \u0111o\u00e1n ch\u00ednh x\u00e1c prefetch<\/a> t\u1ea1i Google I\/O 2019, t\u00f4i b\u1eaft \u0111\u1ea7u v\u1edbi vi\u1ec7c \u0111\u1ec1 c\u1eadp \u0111\u1ebfn t\u1ed1i \u01b0u h\u00f3a \u1ee9ng d\u1ee5ng web b\u1eb1ng bi\u1ec7n ph\u00e1p ph\u00e2n t\u00e1ch m\u00e3 (code splitting) v\u00e0 \u00fd ngh\u0129a c\u1ee7a vi\u1ec7c c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t\/t\u1ed1c \u0111\u1ed9 ti\u1ec1m n\u0103ng cho c\u00e1c truy c\u1eadp (\u0111i\u1ec1u h\u01b0\u1edbng) k\u1ebf ti\u1ebfp c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (subsequent page navigation), t\u00f4i th\u1ea3o lu\u1eadn v\u1ec1 c\u00e1ch c\u1ea3i thi\u1ec7n t\u1ed1c \u0111\u1ed9 truy c\u1eadp website b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n <em>Guess.js<\/em> \u0111\u1ec3 thi\u1ebft l\u1eadp vi\u1ec7c <strong>d\u1ef1 \u0111o\u00e1n<\/strong> prefetch <strong>ch\u00ednh x\u00e1c h\u01a1n<\/strong>:<\/p>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Faster Web Navigation with Predictive Prefetching\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/0jB4YWgAxUo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\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-6577d65cdc677\" ><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-6577d65cdc677\"  type=\"checkbox\" id=\"item-6577d65cdc677\"><\/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\/du-doan-prefetch\/#Phan_chia_ma_de_ung_dung_web_tai_nhanh_hon\" title=\"Ph\u00e2n chia m\u00e3 \u0111\u1ec3 \u1ee9ng d\u1ee5ng web t\u1ea3i nhanh h\u01a1n\">Ph\u00e2n chia m\u00e3 \u0111\u1ec3 \u1ee9ng d\u1ee5ng web t\u1ea3i nhanh h\u01a1n<\/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\/du-doan-prefetch\/#Prefetch_JavaScript\" title=\"Prefetch JavaScript\">Prefetch JavaScript<\/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\/du-doan-prefetch\/#Du_doan_cac_tai_nguyen_lien_ket_can_prefetch_bang_Guessjs\" title=\"D\u1ef1 \u0111o\u00e1n c\u00e1c t\u00e0i nguy\u00ean, li\u00ean k\u1ebft c\u1ea7n prefetch b\u1eb1ng Guess.js\">D\u1ef1 \u0111o\u00e1n c\u00e1c t\u00e0i nguy\u00ean, li\u00ean k\u1ebft c\u1ea7n prefetch b\u1eb1ng Guess.js<\/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\/du-doan-prefetch\/#Tich_hop_voi_cac_framework\" title=\"T\u00edch h\u1ee3p v\u1edbi c\u00e1c framework\">T\u00edch h\u1ee3p v\u1edbi c\u00e1c framework<\/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\/du-doan-prefetch\/#Cach_Guessjs_hoat_dong\" title=\"C\u00e1ch Guess.js ho\u1ea1t \u0111\u1ed9ng?\">C\u00e1ch Guess.js ho\u1ea1t \u0111\u1ed9ng?<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Phan_chia_ma_de_ung_dung_web_tai_nhanh_hon\"><\/span>Ph\u00e2n chia m\u00e3 \u0111\u1ec3 \u1ee9ng d\u1ee5ng web t\u1ea3i nhanh h\u01a1n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>\u1ee8ng d\u1ee5ng web th\u01b0\u1eddng ch\u1eadm, v\u00e0 JavaScript l\u00e0 m\u1ed9t trong c\u00e1c t\u00e0i nguy\u00ean g\u00e2y ch\u1eadm tr\u1ec5 nh\u1ea5t m\u00e0 website c\u1ee7a b\u1ea1n g\u1eedi cho ng\u01b0\u1eddi d\u00f9ng. Vi\u1ec7c ph\u1ea3i \u0111\u1ee3i ch\u1edd \u1ee9ng d\u1ee5ng web t\u1ea3i v\u1ec1 c\u00f3 th\u1ec3 l\u00e0m ng\u01b0\u1eddi d\u00f9ng c\u1ee7a b\u1ea1n c\u1ea3m th\u1ea5y ch\u00e1n n\u1ea3n, b\u1ef1c d\u1ecdc v\u00e0 \u00edt nhi\u1ec1u l\u00e0m gi\u1ea3m t\u1ef7 l\u1ec7 chuy\u1ec3n \u0111\u1ed5i (decrease conversions).<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/guess-0-1024x561.png\" alt=\"th\u1ed1ng k\u00ea v\u1ec1 th\u1eddi gian t\u1ea3i tr\u00ean m\u1ea1ng k\u1ebft n\u1ed1i di \u0111\u1ed9ng 3G\" class=\"wp-image-14899\"\/><figcaption>Th\u1ed1ng k\u00ea v\u1ec1 th\u1eddi gian t\u1ea3i tr\u00ean m\u1ea1ng k\u1ebft n\u1ed1i di \u0111\u1ed9ng 3G<\/figcaption><\/figure>\n\n\n<p><a href=\"https:\/\/kiencang.net\/ly-giai-don-gian-ve-lazy-load\/\">Lazy-loading<\/a> (t\u1ea3i l\u01b0\u1eddi) l\u00e0 k\u1ef9 thu\u1eadt hi\u1ec7u qu\u1ea3 \u0111\u1ec3 gi\u1ea3m dung l\u01b0\u1ee3ng JavaScritp m\u00e0 b\u1ea1n ph\u1ea3i truy\u1ec1n \u0111\u1ebfn tr\u00ecnh duy\u1ec7t c\u1ee7a ng\u01b0\u1eddi d\u00f9ng t\u1ea1i m\u1ed9t th\u1eddi \u0111i\u1ec3m. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng m\u1ed9t s\u1ed1 k\u1ef9 thu\u1eadt lazy-load JavaScript, bao g\u1ed3m:<\/p>\n\n\n<ul><li>T\u00e1ch m\u00e3 c\u1ea5p \u0111\u1ed9 th\u00e0nh ph\u1ea7n (component-level)<\/li><li>T\u00e1ch m\u00e3 c\u1ea5p \u0111\u1ed9 tuy\u1ebfn (route-level)<\/li><\/ul>\n\n\n<p>V\u1edbi t\u00e1ch m\u00e3 c\u1ea5p \u0111\u1ed9 th\u00e0nh ph\u1ea7n, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee5 th\u1ec3 v\u00e0o c\u00e1c \u0111o\u1ea1n m\u00e3 JavaScript ri\u00eang r\u1ebd. Tr\u00ean m\u1ed9t s\u1ef1 ki\u1ec7n c\u1ee5 th\u1ec3, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea3i c\u00e1c \u0111o\u1ea1n m\u00e3 li\u00ean quan v\u00e0 render c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u00f3.<\/p>\n\n\n<p>V\u1edbi t\u00e1ch m\u00e3 c\u1ea5p \u0111\u1ed9 tuy\u1ebfn, b\u1ea1n c\u00f3 th\u1ec3 chuy\u1ec3n to\u00e0n b\u1ed9 c\u00e1c <em>tuy\u1ebfn<\/em> v\u00e0o c\u00e1c \u0111o\u1ea1n m\u00e3 \u0111\u1ed9c l\u1eadp. Khi ng\u01b0\u1eddi d\u00f9ng di chuy\u1ec3n t\u1eeb tuy\u1ebfn n\u00e0y sang tuy\u1ebfn kh\u00e1c, h\u1ecd c\u00f3 th\u1ec3 ph\u1ea3i t\u1ea3i JavaScript li\u00ean quan v\u00e0 kh\u1edfi \u0111\u1ed9ng l\u1ea1i y\u00eau c\u1ea7u ph\u1ea3i th\u1ef1c hi\u1ec7n c\u1ee7a trang. C\u00e1c ho\u1ea1t \u0111\u1ed9ng n\u00e0y c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn \u0111\u1ed9 tr\u1ec5 \u0111\u00e1ng k\u1ec3, \u0111\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c m\u1ea1ng c\u00f3 k\u1ebft n\u1ed1i ch\u1eadm.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prefetch_JavaScript\"><\/span>Prefetch JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>Prefetch cho ph\u00e9p tr\u00ecnh duy\u1ec7t t\u1ea3i v\u00e0 cache c\u00e1c t\u00e0i nguy\u00ean m\u00e0 ng\u01b0\u1eddi duy\u1ec7t web c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng trong t\u01b0\u01a1ng lai g\u1ea7n. Ph\u01b0\u01a1ng th\u1ee9c ph\u1ed5 bi\u1ebfn l\u00e0 th\u00f4ng qua s\u1eed d\u1ee5ng th\u1ebb <em>&lt;link rel=&#8217;prefetch&#8217;&gt;<\/em>, nh\u01b0ng c\u00f3 hai c\u1ea1m b\u1eaby ph\u1ed5 bi\u1ebfn m\u00e0 b\u1ea1n c\u1ea7n l\u01b0u \u00fd:<\/p>\n\n\n<ul><li>Prefetch g\u00e2y ti\u00eau th\u1ee5 r\u1ea5t nhi\u1ec1u t\u00e0i nguy\u00ean, c\u00f3 th\u1ec3 g\u1ecdi l\u00e0 qu\u00e1 m\u1ee9c v\u1ec1 m\u1eb7t d\u1eef li\u1ec7u, b\u0103ng th\u00f4ng v\u00e0 gia t\u0103ng g\u00e1nh n\u1eb7ng cho m\u00e1y ch\u1ee7 g\u1ed1c.<\/li><li>M\u1ed9t s\u1ed1 t\u00e0i nguy\u00ean m\u00e0 ng\u01b0\u1eddi s\u1eed d\u1ee5ng c\u1ea7n, c\u00f3 th\u1ec3 kh\u00f4ng bao gi\u1edd \u0111\u01b0\u1ee3c prefetch.<\/li><\/ul>\n\n\n<p>Vi\u1ec7c d\u1ef1 \u0111o\u00e1n prefetch (predictive prefetching) gi\u00fap gi\u1ea3i quy\u1ebft c\u00e1c v\u1ea5n \u0111\u1ec1 n\u00e0y b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c b\u00e1o c\u00e1o d\u1ef1a tr\u00ean l\u1ecbch s\u1eed c\u1ee7a nh\u1eefng phi\u00ean truy c\u1eadp tr\u01b0\u1edbc \u0111\u1ec3 \u0111\u01b0a ra m\u1eabu h\u00e0nh vi c\u1ee7a ng\u01b0\u1eddi d\u00f9ng, nh\u1edd v\u1eady n\u00f3 s\u1ebd x\u00e1c \u0111\u1ecbnh ch\u00ednh x\u00e1c h\u01a1n t\u00e0i nguy\u00ean c\u1ea7n prefetch.<\/p>\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/guess-1-1024x662.png\" alt=\"m\u00f4 h\u00ecnh prefetch JS\" class=\"wp-image-14894\"\/><figcaption>M\u00f4 h\u00ecnh prefetch JS: B\u01b0\u1edbc 1 &#8211; m\u1edf trang web. B\u01b0\u1edbc 2 &#8211; X\u00e1c \u0111\u1ecbnh file JavaScript c\u00f3 kh\u1ea3 n\u0103ng cao \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u. B\u01b0\u1edbc 3 &#8211; T\u1ea3i file \u0111\u00f3 v\u1ec1. B\u01b0\u1edbc 4 &#8211; L\u01b0u tr\u1eef file \u0111\u00f3 trong cache tr\u00ecnh duy\u1ec7t.<\/figcaption><\/figure>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Du_doan_cac_tai_nguyen_lien_ket_can_prefetch_bang_Guessjs\"><\/span>D\u1ef1 \u0111o\u00e1n c\u00e1c t\u00e0i nguy\u00ean, li\u00ean k\u1ebft c\u1ea7n prefetch b\u1eb1ng Guess.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p><a href=\"https:\/\/github.com\/guess-js\">Guess.js<\/a> l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript cung c\u1ea5p kh\u1ea3 n\u0103ng d\u1ef1 \u0111o\u00e1n c\u00e1c li\u00ean k\u1ebft n\u00ean prefetch. Guess.js s\u1eed d\u1ee5ng b\u00e1o c\u00e1o t\u1eeb Google Analytics ho\u1eb7c c\u00e1c c\u00f4ng c\u1ee5 ph\u00e2n t\u00edch t\u01b0\u01a1ng t\u1ef1 kh\u00e1c \u0111\u1ec3 x\u00e2y d\u1ef1ng m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n (predictive model)- c\u00e1i s\u1ebd \u0111em l\u1ea1i k\u1ebft qu\u1ea3 prefetch th\u00f4ng minh h\u01a1n t\u1eadp trung v\u00e0o n\u1ed9i dung m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u1ea7n (thay v\u00ec t\u00ecm n\u1ea1p tr\u01b0\u1edbc t\u1ea5t c\u1ea3 n\u1ed9i dung, n\u00f3 ch\u1ec9 t\u00ecm n\u1ea1p c\u00e1c n\u1ed9i dung c\u00f3 x\u00e1c su\u1ea5t \u0111\u01b0\u1ee3c d\u00f9ng nhi\u1ec1u nh\u1ea5t trong t\u01b0\u01a1ng lai nh\u1edd bi\u1ebft \u0111\u01b0\u1ee3c th\u00f3i quen c\u1ee7a ng\u01b0\u1eddi d\u00f9ng tr\u00ean trang c\u1ee7a b\u1ea1n).<\/p>\n\n\n<p>Guess.js c\u00f3 kh\u1ea3 n\u0103ng t\u00edch h\u1ee3p v\u1edbi <a href=\"https:\/\/angular.io\/\">Angular<\/a>, <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a>, <a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> v\u00e0 <a href=\"https:\/\/www.gatsbyjs.org\/\">Gatsby<\/a>. \u0110\u1ec3 s\u1eed d\u1ee5ng n\u00f3 trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n, b\u1ea1n c\u1ea7n th\u00eam nh\u1eefng d\u00f2ng sau v\u00e0o t\u00f9y ch\u1ec9nh webpack \u0111\u1ec3 ch\u1ec9 \u0111\u1ecbnh c\u1ee5 th\u1ec3 Google Analytics view ID:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>const { GuessPlugin } = require('guess-webpack');\n\/\/ ...\nplugins: &#91;\n   \/\/ ...\n   new GuessPlugin({ GA: 'XXXXXX' })\n]\n\/\/ ...<\/code><\/pre>\n\n\n<p>N\u1ebfu b\u1ea1n kh\u00f4ng s\u1eed d\u1ee5ng Google Analytics, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 \u0111\u1ecbnh m\u1ed9t <em>reportProvider<\/em> (b\u00e1o c\u00e1o c\u1ee7a c\u00f4ng c\u1ee5 ph\u00e2n t\u00edch kh\u00e1c) v\u00e0 t\u1ea3i d\u1eef li\u1ec7u v\u1ec1 t\u1eeb d\u1ecbch v\u1ee5 \u01b0u th\u00edch c\u1ee7a b\u1ea1n.<\/p>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tich_hop_voi_cac_framework\"><\/span>T\u00edch h\u1ee3p v\u1edbi c\u00e1c framework<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>\u0110\u1ec3 bi\u1ebft c\u00e1ch t\u00edch h\u1ee3p Guess.js v\u1edbi c\u00e1c framework, b\u1ea1n h\u00e3y t\u00ecm hi\u1ec3u qua c\u00e1c li\u00ean k\u1ebft sau:<\/p>\n\n\n<ul><li><a href=\"https:\/\/guess-js.github.io\/docs\/angular\">S\u1eed d\u1ee5ng Guess.js v\u1edbi Angular<\/a><\/li><li><a href=\"https:\/\/guess-js.github.io\/docs\/next\">S\u1eed d\u1ee5ng Guess.js v\u1edbi Next.js<\/a><\/li><li><a href=\"https:\/\/guess-js.github.io\/docs\/nuxt\">S\u1eed d\u1ee5ng Guess.js v\u1edbi Nuxt.js<\/a><\/li><\/ul>\n\n\n<p>\u0110\u1ec3 c\u00f3 h\u01b0\u1edbng d\u1eabn nhanh v\u1ec1 c\u00e1ch t\u00edch h\u1ee3p v\u1edbi Angular, h\u00e3y xem video d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Predictive Prefetching with Guess.js in 90 Seconds\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/5FRxQiGqqmM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cach_Guessjs_hoat_dong\"><\/span>C\u00e1ch Guess.js ho\u1ea1t \u0111\u1ed9ng?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1ch Guess.js tri\u1ec3n khai th\u1ef1c hi\u1ec7n nhi\u1ec7m v\u1ee5 d\u1ef1 \u0111o\u00e1n prefetch:<\/p>\n\n\n<ol><li>\u0110\u1ea7u ti\u00ean n\u00f3 tr\u00edch xu\u1ea5t d\u1eef li\u1ec7u cho c\u00e1c m\u1eabu \u0111i\u1ec1u h\u01b0\u1edbng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng (user navigations patterns) t\u1eeb th\u00f4ng tin m\u00e0 nh\u00e0 cung c\u1ea5p d\u1ecbch v\u1ee5 ph\u00e2n t\u00edch website \u01b0a th\u00edch c\u1ee7a b\u1ea1n thu th\u1eadp \u0111\u01b0\u1ee3c.<\/li><li>N\u00f3 sau \u0111\u00f3 \u00e1nh x\u1ea1 (maps) c\u00e1c URL t\u1eeb b\u00e1o c\u00e1o \u0111\u1ebfn c\u00e1c \u0111o\u1ea1n m\u00e3 JavaScript \u0111\u01b0\u1ee3c t\u1ea1o ra b\u1edfi webpack.<\/li><li>D\u1ef1a tr\u00ean d\u1eef li\u1ec7u \u0111\u00e3 tr\u00edch xu\u1ea5t, n\u00f3 t\u1ea1o ra m\u1ed9t m\u00f4 h\u00ecnh d\u1ef1 \u0111o\u00e1n \u0111\u01a1n gi\u1ea3n c\u00e1c trang m\u00e0 ng\u01b0\u1eddi d\u00f9ng c\u00f3 kh\u1ea3 n\u0103ng \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn t\u1eeb b\u1ea5t k\u1ef3 trang cho tr\u01b0\u1edbc n\u00e0o (any given page).<\/li><li>N\u00f3 g\u1ecdi m\u00f4 h\u00ecnh cho t\u1eebng \u0111o\u1ea1n m\u00e3 JavaScript, d\u1ef1 \u0111o\u00e1n c\u00e1c \u0111o\u1ea1n m\u00e3 kh\u00e1c c\u00f3 kh\u1ea3 n\u0103ng cao \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong phi\u00ean k\u1ebf ti\u1ebfp.<\/li><li>N\u00f3 th\u00eam c\u00e1c h\u01b0\u1edbng d\u1eabn d\u1ef1 \u0111o\u00e1n prefetch cho t\u1eebng \u0111o\u1ea1n m\u00e3.<\/li><\/ol>\n\n\n<p>Khi Guess.js \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, t\u1eebng \u0111o\u1ea1n m\u00e3 s\u1ebd bao g\u1ed3m c\u00e1c h\u01b0\u1edbng d\u1eabn prefetch t\u01b0\u01a1ng t\u1ef1 nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n<pre class=\"wp-block-code\"><code>__GUESS__.p(\n  &#91;'a.js', 0.2],\n  &#91;'b.js', 0.8]\n)<\/code><\/pre>\n\n\n<p>Guess.js n\u00e0y t\u1ea1o ra m\u00e3 \u0111\u1ec3 n\u00f3i cho tr\u00ecnh duy\u1ec7t bi\u1ebft n\u00ean c\u00e2n nh\u1eafc prefetch c\u00e1c \u0111o\u1ea1n m\u00e3 <em>a.js<\/em> v\u1edbi x\u00e1c su\u1ea5t (c\u01a1 h\u1ed9i) 0,2 v\u00e0 \u0111o\u1ea1n m\u00e3 <em>b.js<\/em> v\u1edbi x\u00e1c su\u1ea5t (probability) 0,8.<\/p>\n\n\n<p>M\u1ed9t khi tr\u00ecnh duy\u1ec7t th\u1ef1c thi \u0111o\u1ea1n m\u00e3, Guess.js s\u1ebd ki\u1ec3m tra t\u1ed1c \u0111\u1ed9 k\u1ebft n\u1ed1i m\u1ea1ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. N\u1ebfu t\u1ed1c \u0111\u1ed9 \u0111\u1ee7 \u0111\u00e1p \u1ee9ng y\u00eau c\u1ea7u, Guess.js s\u1ebd ch\u00e8n hai th\u1ebb <em>&lt;link rel=&#8217;prefetch&#8217;&gt;<\/em> trong header c\u1ee7a trang, m\u1ed7i c\u00e1i cho t\u1eebng \u0111o\u1ea1n m\u00e3. N\u1ebfu ng\u01b0\u1eddi d\u00f9ng n\u1eb1m tr\u00ean m\u1ea1ng k\u1ebft n\u1ed1i t\u1ed1c \u0111\u1ed9 cao, Guess.js s\u1ebd prefetch c\u1ea3 hai \u0111o\u1ea1n m\u00e3. N\u1ebfu ng\u01b0\u1eddi d\u00f9ng tr\u00ean m\u1ea1ng k\u1ebft ch\u1eadm, Guess.js s\u1ebd ch\u1ec9 prefetch \u0111o\u1ea1n m\u00e3 b.js v\u00ec n\u00f3 c\u00f3 x\u00e1c su\u1ea5t c\u1ea7n d\u00f9ng cao h\u01a1n so v\u1edbi a.js.<\/p>\n\n\n<p><em>(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Faster web navigation with predictive prefetching, t\u00e1c gi\u1ea3: Minko Gechev, website: web[.]dev)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong b\u00e0i vi\u1ebft n\u00e0y b\u1ea1n s\u1ebd h\u1ecdc c\u00e1ch d\u1ef1 \u0111o\u00e1n t\u00ecm n\u1ea1p tr\u01b0\u1edbc \/ prefetch hi\u1ec7u qu\u1ea3 h\u01a1n v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Guess.js \u0111\u1ec3 tri\u1ec3n khai n\u00f3. Trong video m\u00e0 t\u00f4i n\u00f3i v\u1ec1 vi\u1ec7c \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp web nhanh h\u01a1n th\u00f4ng qua d\u1ef1 \u0111o\u00e1n ch\u00ednh x\u00e1c prefetch t\u1ea1i Google I\/O 2019, t\u00f4i b\u1eaft \u0111\u1ea7u &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[291],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng<\/title>\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\/du-doan-prefetch\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Trong b\u00e0i vi\u1ebft n\u00e0y b\u1ea1n s\u1ebd h\u1ecdc c\u00e1ch d\u1ef1 \u0111o\u00e1n t\u00ecm n\u1ea1p tr\u01b0\u1edbc \/ prefetch hi\u1ec7u qu\u1ea3 h\u01a1n v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Guess.js \u0111\u1ec3 tri\u1ec3n khai n\u00f3. Trong video m\u00e0 t\u00f4i n\u00f3i v\u1ec1 vi\u1ec7c \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp web nhanh h\u01a1n th\u00f4ng qua d\u1ef1 \u0111o\u00e1n ch\u00ednh x\u00e1c prefetch t\u1ea1i Google I\/O 2019, t\u00f4i b\u1eaft \u0111\u1ea7u &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/du-doan-prefetch\/\" \/>\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-03-08T09:20:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/guess-0-1024x561.png\" \/>\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=\"6 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","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\/du-doan-prefetch\/","og_locale":"vi_VN","og_type":"article","og_title":"D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Trong b\u00e0i vi\u1ebft n\u00e0y b\u1ea1n s\u1ebd h\u1ecdc c\u00e1ch d\u1ef1 \u0111o\u00e1n t\u00ecm n\u1ea1p tr\u01b0\u1edbc \/ prefetch hi\u1ec7u qu\u1ea3 h\u01a1n v\u00e0 c\u00e1ch s\u1eed d\u1ee5ng Guess.js \u0111\u1ec3 tri\u1ec3n khai n\u00f3. Trong video m\u00e0 t\u00f4i n\u00f3i v\u1ec1 vi\u1ec7c \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp web nhanh h\u01a1n th\u00f4ng qua d\u1ef1 \u0111o\u00e1n ch\u00ednh x\u00e1c prefetch t\u1ea1i Google I\/O 2019, t\u00f4i b\u1eaft \u0111\u1ea7u &hellip;","og_url":"https:\/\/kiencang.net\/du-doan-prefetch\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2020-03-08T09:20:31+00:00","og_image":[{"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2020\/03\/guess-0-1024x561.png"}],"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":"6 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/du-doan-prefetch\/","url":"https:\/\/kiencang.net\/du-doan-prefetch\/","name":"D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2020-03-08T09:20:31+00:00","dateModified":"2020-03-08T09:20:31+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/du-doan-prefetch\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/du-doan-prefetch\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/du-doan-prefetch\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"D\u1ef1 \u0111o\u00e1n prefetch gi\u00fap \u0111i\u1ec1u h\u01b0\u1edbng truy c\u1eadp nhanh h\u01a1n"}]},{"@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\/16850"}],"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=16850"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/16850\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=16850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=16850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=16850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}