{"id":11619,"date":"2021-02-09T15:38:00","date_gmt":"2021-02-09T08:38:00","guid":{"rendered":"https:\/\/www.ducanhplus.com\/?p=11619"},"modified":"2021-02-09T15:38:00","modified_gmt":"2021-02-09T08:38:00","slug":"cach-trang-web-tai-va-hien-thi","status":"publish","type":"post","link":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","title":{"rendered":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"},"content":{"rendered":"\n
M\u1ee5c l\u1ee5c<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/label><\/a><\/span><\/div>\nC\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec?<\/a><\/li>V\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt<\/a><\/li>Y\u00eau c\u1ea7u\/Request<\/a><\/li>T\u00e0i li\u1ec7u<\/a><\/li>\u0110\u00e1p \u1ee9ng\/Response<\/a><\/li>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p<\/a><\/li>X\u00e2y d\u1ef1ng trang\/Build<\/a><\/li>X\u00e2y d\u1ef1ng DOM<\/a><\/li>X\u00e2y d\u1ef1ng CSSOM<\/a><\/li>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/a><\/li>Render\/Hi\u1ec3n th\u1ecb<\/a><\/li>B\u1ed1 c\u1ee5c<\/a><\/li>\u0110\u1ecbnh d\u1ea1ng<\/a><\/li>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/a><\/li><\/ul><\/nav><\/div>\n<\/span>C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec?<\/span><\/h2>\n\n\nY\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft.<\/li>Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1.<\/li>Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang.<\/li>Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb (render) cho ng\u01b0\u1eddi d\u00f9ng.<\/li><\/ol>\n\n\nM\u1ed7i c\u00e1i trong t\u1eebng b\u01b0\u1edbc tr\u00ean c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n v\u00e0 chi ti\u1ebft, nh\u01b0ng b\u1ed1n b\u01b0\u1edbc \u0111\u00f3 l\u00e0 nh\u1eefng y\u1ebfu t\u1ed1 ch\u00ednh di\u1ec5n ra \u0111\u1ec3 hi\u1ec3n th\u1ecb trang web cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\nB\u00e0i vi\u1ebft n\u00e0y s\u1ebd th\u1ea3o lu\u1eadn t\u1eebng c\u00e1i trong m\u1ed7i b\u01b0\u1edbc tr\u00ean \u0111\u1ec3 \u0111\u01b0a ra \u0111\u01b0\u1ee3c c\u00e1i nh\u00ecn t\u1ed5ng quan v\u1ec1 \u0111i\u1ec1u g\u00ec \u0111\u00e3 th\u1ef1c s\u1ef1 x\u1ea3y ra khi m\u1ed9t trang web hi\u1ec3n th\u1ecb tr\u00ean tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n\n\n\n<\/span>V\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt<\/span><\/h2>\n\n\nB\u1ed1n b\u01b0\u1edbc li\u1ec7t k\u00ea \u1edf tr\u00ean th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp v\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt d\u01b0\u1edbi nh\u1eefng thu\u1eadt ng\u1eef nh\u01b0:<\/p>\n\n\nY\u00eau c\u1ea7u (Request).<\/li>\u0110\u00e1p \u1ee9ng (Response).<\/li>X\u00e2y d\u1ef1ng (Build).<\/li>Xu\u1ea5t trang\/Hi\u1ec3n th\u1ecb (Render).<\/li><\/ol>\n\n\n<\/figure><\/div>\n\n\nM\u1ed7i b\u01b0\u1edbc n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n l\u1eb7p l\u1ea1i nhi\u1ec1u l\u1ea7n trong khi t\u1ea3i trang.<\/p>\n\n\n\n\n\n<\/span>Y\u00eau c\u1ea7u\/Request<\/span><\/h2>\n\n\nTr\u01b0\u1edbc khi ch\u00fang ta \u0111i v\u00e0o vi\u1ec7c chuy\u1ec7n g\u00ec x\u1ea3y ra khi m\u1ed9t trang web nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u, h\u00e3y xem \u0111i\u1ec1u g\u00ec ngay l\u00fac ban \u0111\u1ea7u \u0111\u00e3 t\u1ea1o ra y\u00eau c\u1ea7u \u0111\u1ebfn m\u1ed9t trang.<\/p>\n\n\nC\u00e1ch th\u1ee9c ph\u1ed5 bi\u1ebfn nh\u1ea5t \u0111\u1ec3 m\u1ed9t trang web nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u l\u00e0 khi m\u1ed9t li\u00ean k\u1ebft \u0111\u01b0\u1ee3c ai \u0111\u00f3 click (link is clicked), nh\u01b0ng y\u00eau c\u1ea7u c\u0169ng xu\u1ea5t hi\u1ec7n khi m\u1ed9t trang \u0111\u01b0\u1ee3c l\u00e0m m\u1edbi l\u1ea1i (F5\/refreshed), ho\u1eb7c khi m\u1ed9t URL \u0111\u01b0\u1ee3c nh\u1eadp v\u00e0o trong tr\u00ecnh duy\u1ec7t (navigation bar is used).<\/p>\n\n\n<\/figure><\/div>\n\n\nTh\u1eddi \u0111i\u1ec3m khi m\u1ed9t trang web \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “b\u1eaft \u0111\u1ea7u \u0111i\u1ec1u h\u01b0\u1edbng\/navigation start”.<\/p>\n\n\nV\u1ec1 c\u01a1 b\u1ea3n \u0111\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m khi m\u00e0 to\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb trang b\u1eaft \u0111\u1ea7u.<\/p>\n\n\n\n\n\n<\/span>T\u00e0i li\u1ec7u<\/span><\/h2>\n\n\nKhi m\u1ed9t li\u00ean k\u1ebft \u0111\u01b0\u1ee3c click, m\u1ed9t y\u00eau c\u1ea7u t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n.<\/p>\n\n\n<\/figure><\/div>\n\n\nT\u00e0i li\u1ec7u l\u00e0 file trang web, c\u00e1i ch\u1ec9 \u0111\u01a1n gi\u1ea3n l\u00e0 file d\u1ea1ng text. N\u00f3 \u0111\u01b0\u1ee3c \u0111\u1eb7t tr\u00ean m\u1ed9t m\u00e1y ch\u1ee7 web (web hosting)<\/a>.<\/p>\n\n\nFile n\u00e0y th\u01b0\u1eddng c\u00f3 d\u1ea1ng “.html”, nh\u01b0ng \u0111\u1ecbnh d\u1ea1ng c\u1ee7a file th\u1ef1c s\u1ef1 kh\u00f4ng ph\u1ea3i l\u00e0 v\u1ea5n \u0111\u1ec1. \u0110i\u1ec1u quan tr\u1ecdng l\u00e0 m\u1ed9t file d\u1ea1ng text \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u b\u1edfi tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\nFile nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng g\u1ecdi l\u00e0 HTTP.<\/p>\n\n\n\u1ede th\u1eddi \u0111i\u1ec3m n\u00e0y ch\u00fang ta kh\u00f4ng c\u1ea7n ph\u1ea3i hi\u1ec3u HTTP l\u00e0 g\u00ec<\/a> v\u1ed9i, ch\u00fang ta ch\u1ec9 c\u1ea7n bi\u1ebft r\u1eb1ng m\u1ed9t tr\u00ecnh duy\u1ec7t web \u0111\u00e3 y\u00eau c\u1ea7u m\u1ed9t t\u1ec7p (file) t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u00e1p \u1ee9ng\/Response<\/span><\/h2>\n\n\nM\u00e1y ch\u1ee7 web sau \u0111\u00f3 g\u1eedi file cho tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\n\u0110\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c hi\u1ec3u \u0111\u01a1n gi\u1ea3n l\u00e0 tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec m\u00e0 n\u00f3 \u0111\u00e3 y\u00eau c\u1ea7u.<\/p>\n\n\n<\/figure><\/div>\n\n\nN\u1ebfu \u0111\u00e2y l\u00e0 m\u1ed9t trang web \u0111\u01a1n gi\u1ea3n (ch\u1ec9 c\u00f3 HTML) th\u00ec giai \u0111o\u1ea1n y\u00eau c\u1ea7u v\u00e0 \u0111\u00e1p \u1ee9ng c\u1ee7a vi\u1ec7c t\u1ea3i trang s\u1ebd ho\u00e0n th\u00e0nh.<\/p>\n\n\nD\u00f9 v\u1eady, h\u1ea7u h\u1ebft c\u00e1c trang web c\u00f3 nh\u1eefng th\u00e0nh ph\u1ea7n nh\u01b0 l\u00e0 h\u00ecnh \u1ea3nh, CSS v\u00e0 JS.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c t\u00e0i nguy\u00ean (resources) v\u00e0 \u0111\u1ec3 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c trang web, tr\u00ecnh duy\u1ec7t web c\u0169ng ph\u1ea3i nh\u1eadn \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang.<\/p>\n\n\n\n\n\n<\/span>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p<\/span><\/h2>\n\n\nV\u1eady l\u00e0m th\u1ebf n\u00e0o m\u1ed9t tr\u00ecnh duy\u1ec7t web bi\u1ebft \u0111\u01b0\u1ee3c r\u1eb1ng m\u1ed9t trang c\u00f3 c\u1ea7n b\u1ed5 sung c\u00e1c t\u00e0i nguy\u00ean hay kh\u00f4ng?<\/p>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c t\u00e0i li\u1ec7u (t\u1ec7p HTML), n\u00f3 \u0111\u1ecdc t\u00e0i li\u1ec7u \u0111\u00f3.<\/p>\n\n\nKhi m\u1ed9t m\u00e1y t\u00ednh \u0111\u1ecdc m\u1ed9t file \u0111ang t\u00ecm ki\u1ebfm \u0111i\u1ec1u g\u00ec \u0111\u00f3, \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “parsing\/ph\u00e2n t\u00edch c\u00fa ph\u00e1p”<\/p>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t web nh\u00ecn v\u00e0o to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u HTML v\u00e0 t\u00ecm ki\u1ebfm b\u1ea5t k\u1ef3 t\u00e0i nguy\u00ean CSS, JS v\u00e0 h\u00ecnh \u1ea3nh n\u00e0o \u0111\u01b0\u1ee3c tham chi\u1ebfu (referenced) trong trang.<\/p>\n\n\nN\u1ebfu c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n th\u1ea5y trong HTML th\u00ec sau \u0111\u00f3 tr\u00ecnh duy\u1ec7t web s\u1ebd y\u00eau c\u1ea7u t\u1eebng t\u00e0i nguy\u00ean n\u00e0y t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\nC\u00e1c \u1ea3nh, CSS, v\u00e0 JS m\u00e0 t\u00e0i li\u1ec7u HTML li\u00ean k\u1ebft s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\nC\u00e1ch n\u00f3 l\u1ef1a ch\u1ecdn t\u1ea3i xu\u1ed1ng c\u00e1c t\u00e0i nguy\u00ean n\u00e0y v\u00e0 th\u1ee9 t\u1ef1 t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng h\u01a1i ph\u1ee9c t\u1ea1p m\u1ed9t ch\u00fat v\u00e0 s\u1ebd \u0111\u01b0\u1ee3c ch\u00fang t\u00f4i gi\u1ea3i th\u00edch trong b\u00e0i vi\u1ebft kh\u00e1c. N\u1ebfu b\u1ea1n t\u00f2 m\u00f2, h\u00e3y tham kh\u1ea3o b\u00e0i vi\u1ebft v\u1ec1 tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> (critical rendering path).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng trang\/Build<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t web c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ea7n thi\u1ebft, n\u00f3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nC\u00e1ch m\u1ed9t tr\u00ecnh duy\u1ec7t web x\u00e2y d\u1ef1ng trang l\u00e0 th\u00f4ng qua k\u1ebft h\u1ee3p th\u00f4ng tin t\u00ecm th\u1ea5y trong t\u00e0i li\u1ec7u (file HTML g\u1ed1c) v\u00e0 th\u00f4ng tin \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong c\u00e1c t\u00e0i nguy\u00ean.<\/p>\n\n\nC\u00f3 ba b\u01b0\u1edbc c\u01a1 b\u1ea3n m\u00e0 tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nX\u00e2y d\u1ef1ng DOM.<\/li>X\u00e2y d\u1ef1ng CSSOM.<\/li>X\u00e2y d\u1ef1ng C\u00e2y Hi\u1ec3n Th\u1ecb (Render Tree).<\/li><\/ul>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng DOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nDOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a “D<\/strong>ocument O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng T\u00e0i li\u1ec7u”. N\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 n\u01a1i m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang theo d\u1ea1ng th\u1ee9c HTML. <\/p>\n\n\nDOM \u0111\u1ea1i di\u1ec7n cho \u0111i\u1ec1u HTML \u0111ang n\u00f3i b\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 trang theo c\u00e1ch quan h\u1ec7 (relational manner).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng CSSOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nCSSOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a c\u1ee5m t\u1eeb “CSS<\/strong> O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng CSS”. <\/p>\n\n\nN\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\nB\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n\n\n\n<\/span>Render\/Hi\u1ec3n th\u1ecb<\/span><\/h2>\n\n\nSau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\nC\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\nB\u1ed1 c\u1ee5c\/Layout.<\/li>\u0110\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh\/Paint.<\/li><\/ul>\n\n\n\n\n\n<\/span>B\u1ed1 c\u1ee5c<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\nC\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\nM\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\nH\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\nPh\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1ecbnh d\u1ea1ng<\/span><\/h2>\n\n\nGi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\nTrong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/span><\/h2>\n\n\nCh\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\nY\u00eau c\u1ea7u.<\/li>Ph\u1ea3n h\u1ed3i.<\/li>X\u00e2y d\u1ef1ng.<\/li>Hi\u1ec3n th\u1ecb.<\/li><\/ul>\n\n\nTrong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u1ed7i c\u00e1i trong t\u1eebng b\u01b0\u1edbc tr\u00ean c\u00f3 nhi\u1ec1u th\u00e0nh ph\u1ea7n v\u00e0 chi ti\u1ebft, nh\u01b0ng b\u1ed1n b\u01b0\u1edbc \u0111\u00f3 l\u00e0 nh\u1eefng y\u1ebfu t\u1ed1 ch\u00ednh di\u1ec5n ra \u0111\u1ec3 hi\u1ec3n th\u1ecb trang web cho ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n
B\u00e0i vi\u1ebft n\u00e0y s\u1ebd th\u1ea3o lu\u1eadn t\u1eebng c\u00e1i trong m\u1ed7i b\u01b0\u1edbc tr\u00ean \u0111\u1ec3 \u0111\u01b0a ra \u0111\u01b0\u1ee3c c\u00e1i nh\u00ecn t\u1ed5ng quan v\u1ec1 \u0111i\u1ec1u g\u00ec \u0111\u00e3 th\u1ef1c s\u1ef1 x\u1ea3y ra khi m\u1ed9t trang web hi\u1ec3n th\u1ecb tr\u00ean tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n
B\u1ed1n b\u01b0\u1edbc li\u1ec7t k\u00ea \u1edf tr\u00ean th\u01b0\u1eddng \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp v\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt d\u01b0\u1edbi nh\u1eefng thu\u1eadt ng\u1eef nh\u01b0:<\/p>\n\n\n
M\u1ed7i b\u01b0\u1edbc n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n l\u1eb7p l\u1ea1i nhi\u1ec1u l\u1ea7n trong khi t\u1ea3i trang.<\/p>\n\n\n
Tr\u01b0\u1edbc khi ch\u00fang ta \u0111i v\u00e0o vi\u1ec7c chuy\u1ec7n g\u00ec x\u1ea3y ra khi m\u1ed9t trang web nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u, h\u00e3y xem \u0111i\u1ec1u g\u00ec ngay l\u00fac ban \u0111\u1ea7u \u0111\u00e3 t\u1ea1o ra y\u00eau c\u1ea7u \u0111\u1ebfn m\u1ed9t trang.<\/p>\n\n\n
C\u00e1ch th\u1ee9c ph\u1ed5 bi\u1ebfn nh\u1ea5t \u0111\u1ec3 m\u1ed9t trang web nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u l\u00e0 khi m\u1ed9t li\u00ean k\u1ebft \u0111\u01b0\u1ee3c ai \u0111\u00f3 click (link is clicked), nh\u01b0ng y\u00eau c\u1ea7u c\u0169ng xu\u1ea5t hi\u1ec7n khi m\u1ed9t trang \u0111\u01b0\u1ee3c l\u00e0m m\u1edbi l\u1ea1i (F5\/refreshed), ho\u1eb7c khi m\u1ed9t URL \u0111\u01b0\u1ee3c nh\u1eadp v\u00e0o trong tr\u00ecnh duy\u1ec7t (navigation bar is used).<\/p>\n\n\n
Th\u1eddi \u0111i\u1ec3m khi m\u1ed9t trang web \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u c\u00f2n \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “b\u1eaft \u0111\u1ea7u \u0111i\u1ec1u h\u01b0\u1edbng\/navigation start”.<\/p>\n\n\n
V\u1ec1 c\u01a1 b\u1ea3n \u0111\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m khi m\u00e0 to\u00e0n b\u1ed9 qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb trang b\u1eaft \u0111\u1ea7u.<\/p>\n\n\n
Khi m\u1ed9t li\u00ean k\u1ebft \u0111\u01b0\u1ee3c click, m\u1ed9t y\u00eau c\u1ea7u t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n.<\/p>\n\n\n
T\u00e0i li\u1ec7u l\u00e0 file trang web, c\u00e1i ch\u1ec9 \u0111\u01a1n gi\u1ea3n l\u00e0 file d\u1ea1ng text. N\u00f3 \u0111\u01b0\u1ee3c \u0111\u1eb7t tr\u00ean m\u1ed9t m\u00e1y ch\u1ee7 web (web hosting)<\/a>.<\/p>\n\n\nFile n\u00e0y th\u01b0\u1eddng c\u00f3 d\u1ea1ng “.html”, nh\u01b0ng \u0111\u1ecbnh d\u1ea1ng c\u1ee7a file th\u1ef1c s\u1ef1 kh\u00f4ng ph\u1ea3i l\u00e0 v\u1ea5n \u0111\u1ec1. \u0110i\u1ec1u quan tr\u1ecdng l\u00e0 m\u1ed9t file d\u1ea1ng text \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u b\u1edfi tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\nFile nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng g\u1ecdi l\u00e0 HTTP.<\/p>\n\n\n\u1ede th\u1eddi \u0111i\u1ec3m n\u00e0y ch\u00fang ta kh\u00f4ng c\u1ea7n ph\u1ea3i hi\u1ec3u HTTP l\u00e0 g\u00ec<\/a> v\u1ed9i, ch\u00fang ta ch\u1ec9 c\u1ea7n bi\u1ebft r\u1eb1ng m\u1ed9t tr\u00ecnh duy\u1ec7t web \u0111\u00e3 y\u00eau c\u1ea7u m\u1ed9t t\u1ec7p (file) t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u00e1p \u1ee9ng\/Response<\/span><\/h2>\n\n\nM\u00e1y ch\u1ee7 web sau \u0111\u00f3 g\u1eedi file cho tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\n\u0110\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c hi\u1ec3u \u0111\u01a1n gi\u1ea3n l\u00e0 tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec m\u00e0 n\u00f3 \u0111\u00e3 y\u00eau c\u1ea7u.<\/p>\n\n\n<\/figure><\/div>\n\n\nN\u1ebfu \u0111\u00e2y l\u00e0 m\u1ed9t trang web \u0111\u01a1n gi\u1ea3n (ch\u1ec9 c\u00f3 HTML) th\u00ec giai \u0111o\u1ea1n y\u00eau c\u1ea7u v\u00e0 \u0111\u00e1p \u1ee9ng c\u1ee7a vi\u1ec7c t\u1ea3i trang s\u1ebd ho\u00e0n th\u00e0nh.<\/p>\n\n\nD\u00f9 v\u1eady, h\u1ea7u h\u1ebft c\u00e1c trang web c\u00f3 nh\u1eefng th\u00e0nh ph\u1ea7n nh\u01b0 l\u00e0 h\u00ecnh \u1ea3nh, CSS v\u00e0 JS.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c t\u00e0i nguy\u00ean (resources) v\u00e0 \u0111\u1ec3 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c trang web, tr\u00ecnh duy\u1ec7t web c\u0169ng ph\u1ea3i nh\u1eadn \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang.<\/p>\n\n\n\n\n\n<\/span>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p<\/span><\/h2>\n\n\nV\u1eady l\u00e0m th\u1ebf n\u00e0o m\u1ed9t tr\u00ecnh duy\u1ec7t web bi\u1ebft \u0111\u01b0\u1ee3c r\u1eb1ng m\u1ed9t trang c\u00f3 c\u1ea7n b\u1ed5 sung c\u00e1c t\u00e0i nguy\u00ean hay kh\u00f4ng?<\/p>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c t\u00e0i li\u1ec7u (t\u1ec7p HTML), n\u00f3 \u0111\u1ecdc t\u00e0i li\u1ec7u \u0111\u00f3.<\/p>\n\n\nKhi m\u1ed9t m\u00e1y t\u00ednh \u0111\u1ecdc m\u1ed9t file \u0111ang t\u00ecm ki\u1ebfm \u0111i\u1ec1u g\u00ec \u0111\u00f3, \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “parsing\/ph\u00e2n t\u00edch c\u00fa ph\u00e1p”<\/p>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t web nh\u00ecn v\u00e0o to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u HTML v\u00e0 t\u00ecm ki\u1ebfm b\u1ea5t k\u1ef3 t\u00e0i nguy\u00ean CSS, JS v\u00e0 h\u00ecnh \u1ea3nh n\u00e0o \u0111\u01b0\u1ee3c tham chi\u1ebfu (referenced) trong trang.<\/p>\n\n\nN\u1ebfu c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n th\u1ea5y trong HTML th\u00ec sau \u0111\u00f3 tr\u00ecnh duy\u1ec7t web s\u1ebd y\u00eau c\u1ea7u t\u1eebng t\u00e0i nguy\u00ean n\u00e0y t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\nC\u00e1c \u1ea3nh, CSS, v\u00e0 JS m\u00e0 t\u00e0i li\u1ec7u HTML li\u00ean k\u1ebft s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\nC\u00e1ch n\u00f3 l\u1ef1a ch\u1ecdn t\u1ea3i xu\u1ed1ng c\u00e1c t\u00e0i nguy\u00ean n\u00e0y v\u00e0 th\u1ee9 t\u1ef1 t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng h\u01a1i ph\u1ee9c t\u1ea1p m\u1ed9t ch\u00fat v\u00e0 s\u1ebd \u0111\u01b0\u1ee3c ch\u00fang t\u00f4i gi\u1ea3i th\u00edch trong b\u00e0i vi\u1ebft kh\u00e1c. N\u1ebfu b\u1ea1n t\u00f2 m\u00f2, h\u00e3y tham kh\u1ea3o b\u00e0i vi\u1ebft v\u1ec1 tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> (critical rendering path).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng trang\/Build<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t web c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ea7n thi\u1ebft, n\u00f3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nC\u00e1ch m\u1ed9t tr\u00ecnh duy\u1ec7t web x\u00e2y d\u1ef1ng trang l\u00e0 th\u00f4ng qua k\u1ebft h\u1ee3p th\u00f4ng tin t\u00ecm th\u1ea5y trong t\u00e0i li\u1ec7u (file HTML g\u1ed1c) v\u00e0 th\u00f4ng tin \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong c\u00e1c t\u00e0i nguy\u00ean.<\/p>\n\n\nC\u00f3 ba b\u01b0\u1edbc c\u01a1 b\u1ea3n m\u00e0 tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nX\u00e2y d\u1ef1ng DOM.<\/li>X\u00e2y d\u1ef1ng CSSOM.<\/li>X\u00e2y d\u1ef1ng C\u00e2y Hi\u1ec3n Th\u1ecb (Render Tree).<\/li><\/ul>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng DOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nDOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a “D<\/strong>ocument O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng T\u00e0i li\u1ec7u”. N\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 n\u01a1i m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang theo d\u1ea1ng th\u1ee9c HTML. <\/p>\n\n\nDOM \u0111\u1ea1i di\u1ec7n cho \u0111i\u1ec1u HTML \u0111ang n\u00f3i b\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 trang theo c\u00e1ch quan h\u1ec7 (relational manner).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng CSSOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nCSSOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a c\u1ee5m t\u1eeb “CSS<\/strong> O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng CSS”. <\/p>\n\n\nN\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\nB\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n\n\n\n<\/span>Render\/Hi\u1ec3n th\u1ecb<\/span><\/h2>\n\n\nSau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\nC\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\nB\u1ed1 c\u1ee5c\/Layout.<\/li>\u0110\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh\/Paint.<\/li><\/ul>\n\n\n\n\n\n<\/span>B\u1ed1 c\u1ee5c<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\nC\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\nM\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\nH\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\nPh\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1ecbnh d\u1ea1ng<\/span><\/h2>\n\n\nGi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\nTrong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/span><\/h2>\n\n\nCh\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\nY\u00eau c\u1ea7u.<\/li>Ph\u1ea3n h\u1ed3i.<\/li>X\u00e2y d\u1ef1ng.<\/li>Hi\u1ec3n th\u1ecb.<\/li><\/ul>\n\n\nTrong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
File n\u00e0y th\u01b0\u1eddng c\u00f3 d\u1ea1ng “.html”, nh\u01b0ng \u0111\u1ecbnh d\u1ea1ng c\u1ee7a file th\u1ef1c s\u1ef1 kh\u00f4ng ph\u1ea3i l\u00e0 v\u1ea5n \u0111\u1ec1. \u0110i\u1ec1u quan tr\u1ecdng l\u00e0 m\u1ed9t file d\u1ea1ng text \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u b\u1edfi tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\n
File nh\u1eadn \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng g\u1ecdi l\u00e0 HTTP.<\/p>\n\n\n
\u1ede th\u1eddi \u0111i\u1ec3m n\u00e0y ch\u00fang ta kh\u00f4ng c\u1ea7n ph\u1ea3i hi\u1ec3u HTTP l\u00e0 g\u00ec<\/a> v\u1ed9i, ch\u00fang ta ch\u1ec9 c\u1ea7n bi\u1ebft r\u1eb1ng m\u1ed9t tr\u00ecnh duy\u1ec7t web \u0111\u00e3 y\u00eau c\u1ea7u m\u1ed9t t\u1ec7p (file) t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u00e1p \u1ee9ng\/Response<\/span><\/h2>\n\n\nM\u00e1y ch\u1ee7 web sau \u0111\u00f3 g\u1eedi file cho tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\n\u0110\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c hi\u1ec3u \u0111\u01a1n gi\u1ea3n l\u00e0 tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec m\u00e0 n\u00f3 \u0111\u00e3 y\u00eau c\u1ea7u.<\/p>\n\n\n<\/figure><\/div>\n\n\nN\u1ebfu \u0111\u00e2y l\u00e0 m\u1ed9t trang web \u0111\u01a1n gi\u1ea3n (ch\u1ec9 c\u00f3 HTML) th\u00ec giai \u0111o\u1ea1n y\u00eau c\u1ea7u v\u00e0 \u0111\u00e1p \u1ee9ng c\u1ee7a vi\u1ec7c t\u1ea3i trang s\u1ebd ho\u00e0n th\u00e0nh.<\/p>\n\n\nD\u00f9 v\u1eady, h\u1ea7u h\u1ebft c\u00e1c trang web c\u00f3 nh\u1eefng th\u00e0nh ph\u1ea7n nh\u01b0 l\u00e0 h\u00ecnh \u1ea3nh, CSS v\u00e0 JS.<\/p>\n\n\nCh\u00fang \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c t\u00e0i nguy\u00ean (resources) v\u00e0 \u0111\u1ec3 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c trang web, tr\u00ecnh duy\u1ec7t web c\u0169ng ph\u1ea3i nh\u1eadn \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang.<\/p>\n\n\n\n\n\n<\/span>Ph\u00e2n t\u00edch c\u00fa ph\u00e1p<\/span><\/h2>\n\n\nV\u1eady l\u00e0m th\u1ebf n\u00e0o m\u1ed9t tr\u00ecnh duy\u1ec7t web bi\u1ebft \u0111\u01b0\u1ee3c r\u1eb1ng m\u1ed9t trang c\u00f3 c\u1ea7n b\u1ed5 sung c\u00e1c t\u00e0i nguy\u00ean hay kh\u00f4ng?<\/p>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c t\u00e0i li\u1ec7u (t\u1ec7p HTML), n\u00f3 \u0111\u1ecdc t\u00e0i li\u1ec7u \u0111\u00f3.<\/p>\n\n\nKhi m\u1ed9t m\u00e1y t\u00ednh \u0111\u1ecdc m\u1ed9t file \u0111ang t\u00ecm ki\u1ebfm \u0111i\u1ec1u g\u00ec \u0111\u00f3, \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “parsing\/ph\u00e2n t\u00edch c\u00fa ph\u00e1p”<\/p>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t web nh\u00ecn v\u00e0o to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u HTML v\u00e0 t\u00ecm ki\u1ebfm b\u1ea5t k\u1ef3 t\u00e0i nguy\u00ean CSS, JS v\u00e0 h\u00ecnh \u1ea3nh n\u00e0o \u0111\u01b0\u1ee3c tham chi\u1ebfu (referenced) trong trang.<\/p>\n\n\nN\u1ebfu c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n th\u1ea5y trong HTML th\u00ec sau \u0111\u00f3 tr\u00ecnh duy\u1ec7t web s\u1ebd y\u00eau c\u1ea7u t\u1eebng t\u00e0i nguy\u00ean n\u00e0y t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\nC\u00e1c \u1ea3nh, CSS, v\u00e0 JS m\u00e0 t\u00e0i li\u1ec7u HTML li\u00ean k\u1ebft s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\nC\u00e1ch n\u00f3 l\u1ef1a ch\u1ecdn t\u1ea3i xu\u1ed1ng c\u00e1c t\u00e0i nguy\u00ean n\u00e0y v\u00e0 th\u1ee9 t\u1ef1 t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng h\u01a1i ph\u1ee9c t\u1ea1p m\u1ed9t ch\u00fat v\u00e0 s\u1ebd \u0111\u01b0\u1ee3c ch\u00fang t\u00f4i gi\u1ea3i th\u00edch trong b\u00e0i vi\u1ebft kh\u00e1c. N\u1ebfu b\u1ea1n t\u00f2 m\u00f2, h\u00e3y tham kh\u1ea3o b\u00e0i vi\u1ebft v\u1ec1 tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> (critical rendering path).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng trang\/Build<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t web c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ea7n thi\u1ebft, n\u00f3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nC\u00e1ch m\u1ed9t tr\u00ecnh duy\u1ec7t web x\u00e2y d\u1ef1ng trang l\u00e0 th\u00f4ng qua k\u1ebft h\u1ee3p th\u00f4ng tin t\u00ecm th\u1ea5y trong t\u00e0i li\u1ec7u (file HTML g\u1ed1c) v\u00e0 th\u00f4ng tin \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong c\u00e1c t\u00e0i nguy\u00ean.<\/p>\n\n\nC\u00f3 ba b\u01b0\u1edbc c\u01a1 b\u1ea3n m\u00e0 tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nX\u00e2y d\u1ef1ng DOM.<\/li>X\u00e2y d\u1ef1ng CSSOM.<\/li>X\u00e2y d\u1ef1ng C\u00e2y Hi\u1ec3n Th\u1ecb (Render Tree).<\/li><\/ul>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng DOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nDOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a “D<\/strong>ocument O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng T\u00e0i li\u1ec7u”. N\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 n\u01a1i m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang theo d\u1ea1ng th\u1ee9c HTML. <\/p>\n\n\nDOM \u0111\u1ea1i di\u1ec7n cho \u0111i\u1ec1u HTML \u0111ang n\u00f3i b\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 trang theo c\u00e1ch quan h\u1ec7 (relational manner).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng CSSOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nCSSOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a c\u1ee5m t\u1eeb “CSS<\/strong> O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng CSS”. <\/p>\n\n\nN\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\nB\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n\n\n\n<\/span>Render\/Hi\u1ec3n th\u1ecb<\/span><\/h2>\n\n\nSau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\nC\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\nB\u1ed1 c\u1ee5c\/Layout.<\/li>\u0110\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh\/Paint.<\/li><\/ul>\n\n\n\n\n\n<\/span>B\u1ed1 c\u1ee5c<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\nC\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\nM\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\nH\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\nPh\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1ecbnh d\u1ea1ng<\/span><\/h2>\n\n\nGi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\nTrong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/span><\/h2>\n\n\nCh\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\nY\u00eau c\u1ea7u.<\/li>Ph\u1ea3n h\u1ed3i.<\/li>X\u00e2y d\u1ef1ng.<\/li>Hi\u1ec3n th\u1ecb.<\/li><\/ul>\n\n\nTrong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u00e1y ch\u1ee7 web sau \u0111\u00f3 g\u1eedi file cho tr\u00ecnh duy\u1ec7t web.<\/p>\n\n\n
\u0110\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c hi\u1ec3u \u0111\u01a1n gi\u1ea3n l\u00e0 tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c nh\u1eefng g\u00ec m\u00e0 n\u00f3 \u0111\u00e3 y\u00eau c\u1ea7u.<\/p>\n\n\n
N\u1ebfu \u0111\u00e2y l\u00e0 m\u1ed9t trang web \u0111\u01a1n gi\u1ea3n (ch\u1ec9 c\u00f3 HTML) th\u00ec giai \u0111o\u1ea1n y\u00eau c\u1ea7u v\u00e0 \u0111\u00e1p \u1ee9ng c\u1ee7a vi\u1ec7c t\u1ea3i trang s\u1ebd ho\u00e0n th\u00e0nh.<\/p>\n\n\n
D\u00f9 v\u1eady, h\u1ea7u h\u1ebft c\u00e1c trang web c\u00f3 nh\u1eefng th\u00e0nh ph\u1ea7n nh\u01b0 l\u00e0 h\u00ecnh \u1ea3nh, CSS v\u00e0 JS.<\/p>\n\n\n
Ch\u00fang \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 c\u00e1c t\u00e0i nguy\u00ean (resources) v\u00e0 \u0111\u1ec3 hi\u1ec3n th\u1ecb \u0111\u01b0\u1ee3c trang web, tr\u00ecnh duy\u1ec7t web c\u0169ng ph\u1ea3i nh\u1eadn \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang.<\/p>\n\n\n
V\u1eady l\u00e0m th\u1ebf n\u00e0o m\u1ed9t tr\u00ecnh duy\u1ec7t web bi\u1ebft \u0111\u01b0\u1ee3c r\u1eb1ng m\u1ed9t trang c\u00f3 c\u1ea7n b\u1ed5 sung c\u00e1c t\u00e0i nguy\u00ean hay kh\u00f4ng?<\/p>\n\n\n
M\u1ed9t khi tr\u00ecnh duy\u1ec7t nh\u1eadn \u0111\u01b0\u1ee3c t\u00e0i li\u1ec7u (t\u1ec7p HTML), n\u00f3 \u0111\u1ecdc t\u00e0i li\u1ec7u \u0111\u00f3.<\/p>\n\n\n
Khi m\u1ed9t m\u00e1y t\u00ednh \u0111\u1ecdc m\u1ed9t file \u0111ang t\u00ecm ki\u1ebfm \u0111i\u1ec1u g\u00ec \u0111\u00f3, \u0111i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “parsing\/ph\u00e2n t\u00edch c\u00fa ph\u00e1p”<\/p>\n\n\n
Tr\u00ecnh duy\u1ec7t web nh\u00ecn v\u00e0o to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u HTML v\u00e0 t\u00ecm ki\u1ebfm b\u1ea5t k\u1ef3 t\u00e0i nguy\u00ean CSS, JS v\u00e0 h\u00ecnh \u1ea3nh n\u00e0o \u0111\u01b0\u1ee3c tham chi\u1ebfu (referenced) trong trang.<\/p>\n\n\n
N\u1ebfu c\u00e1c t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c ph\u00e1t hi\u1ec7n th\u1ea5y trong HTML th\u00ec sau \u0111\u00f3 tr\u00ecnh duy\u1ec7t web s\u1ebd y\u00eau c\u1ea7u t\u1eebng t\u00e0i nguy\u00ean n\u00e0y t\u1eeb m\u00e1y ch\u1ee7 web.<\/p>\n\n\n
C\u00e1c \u1ea3nh, CSS, v\u00e0 JS m\u00e0 t\u00e0i li\u1ec7u HTML li\u00ean k\u1ebft s\u1ebd \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng b\u1edfi tr\u00ecnh duy\u1ec7t.<\/p>\n\n\n
C\u00e1ch n\u00f3 l\u1ef1a ch\u1ecdn t\u1ea3i xu\u1ed1ng c\u00e1c t\u00e0i nguy\u00ean n\u00e0y v\u00e0 th\u1ee9 t\u1ef1 t\u00e0i nguy\u00ean \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng h\u01a1i ph\u1ee9c t\u1ea1p m\u1ed9t ch\u00fat v\u00e0 s\u1ebd \u0111\u01b0\u1ee3c ch\u00fang t\u00f4i gi\u1ea3i th\u00edch trong b\u00e0i vi\u1ebft kh\u00e1c. N\u1ebfu b\u1ea1n t\u00f2 m\u00f2, h\u00e3y tham kh\u1ea3o b\u00e0i vi\u1ebft v\u1ec1 tuy\u1ebfn hi\u1ec3n th\u1ecb quan tr\u1ecdng<\/a> (critical rendering path).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng trang\/Build<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nM\u1ed9t khi tr\u00ecnh duy\u1ec7t web c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ea7n thi\u1ebft, n\u00f3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nC\u00e1ch m\u1ed9t tr\u00ecnh duy\u1ec7t web x\u00e2y d\u1ef1ng trang l\u00e0 th\u00f4ng qua k\u1ebft h\u1ee3p th\u00f4ng tin t\u00ecm th\u1ea5y trong t\u00e0i li\u1ec7u (file HTML g\u1ed1c) v\u00e0 th\u00f4ng tin \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong c\u00e1c t\u00e0i nguy\u00ean.<\/p>\n\n\nC\u00f3 ba b\u01b0\u1edbc c\u01a1 b\u1ea3n m\u00e0 tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng trang.<\/p>\n\n\nX\u00e2y d\u1ef1ng DOM.<\/li>X\u00e2y d\u1ef1ng CSSOM.<\/li>X\u00e2y d\u1ef1ng C\u00e2y Hi\u1ec3n Th\u1ecb (Render Tree).<\/li><\/ul>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng DOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nDOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a “D<\/strong>ocument O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng T\u00e0i li\u1ec7u”. N\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 n\u01a1i m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang theo d\u1ea1ng th\u1ee9c HTML. <\/p>\n\n\nDOM \u0111\u1ea1i di\u1ec7n cho \u0111i\u1ec1u HTML \u0111ang n\u00f3i b\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 trang theo c\u00e1ch quan h\u1ec7 (relational manner).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng CSSOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nCSSOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a c\u1ee5m t\u1eeb “CSS<\/strong> O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng CSS”. <\/p>\n\n\nN\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\nB\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n\n\n\n<\/span>Render\/Hi\u1ec3n th\u1ecb<\/span><\/h2>\n\n\nSau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\nC\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\nB\u1ed1 c\u1ee5c\/Layout.<\/li>\u0110\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh\/Paint.<\/li><\/ul>\n\n\n\n\n\n<\/span>B\u1ed1 c\u1ee5c<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\nC\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\nM\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\nH\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\nPh\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1ecbnh d\u1ea1ng<\/span><\/h2>\n\n\nGi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\nTrong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/span><\/h2>\n\n\nCh\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\nY\u00eau c\u1ea7u.<\/li>Ph\u1ea3n h\u1ed3i.<\/li>X\u00e2y d\u1ef1ng.<\/li>Hi\u1ec3n th\u1ecb.<\/li><\/ul>\n\n\nTrong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
M\u1ed9t khi tr\u00ecnh duy\u1ec7t web c\u00f3 \u0111\u01b0\u1ee3c c\u00e1c t\u00e0i nguy\u00ean c\u1ea7n thi\u1ebft, n\u00f3 c\u00f3 th\u1ec3 b\u1eaft \u0111\u1ea7u ti\u1ebfn h\u00e0nh x\u00e2y d\u1ef1ng trang.<\/p>\n\n\n
C\u00e1ch m\u1ed9t tr\u00ecnh duy\u1ec7t web x\u00e2y d\u1ef1ng trang l\u00e0 th\u00f4ng qua k\u1ebft h\u1ee3p th\u00f4ng tin t\u00ecm th\u1ea5y trong t\u00e0i li\u1ec7u (file HTML g\u1ed1c) v\u00e0 th\u00f4ng tin \u0111\u01b0\u1ee3c t\u00ecm th\u1ea5y trong c\u00e1c t\u00e0i nguy\u00ean.<\/p>\n\n\n
C\u00f3 ba b\u01b0\u1edbc c\u01a1 b\u1ea3n m\u00e0 tr\u00ecnh duy\u1ec7t th\u1ef1c hi\u1ec7n \u0111\u1ec3 x\u00e2y d\u1ef1ng trang.<\/p>\n\n\n
DOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a “D<\/strong>ocument O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng T\u00e0i li\u1ec7u”. N\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 n\u01a1i m\u1ecdi th\u1ee9 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb tr\u00ean trang theo d\u1ea1ng th\u1ee9c HTML. <\/p>\n\n\nDOM \u0111\u1ea1i di\u1ec7n cho \u0111i\u1ec1u HTML \u0111ang n\u00f3i b\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 trang theo c\u00e1ch quan h\u1ec7 (relational manner).<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng CSSOM<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nCSSOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a c\u1ee5m t\u1eeb “CSS<\/strong> O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng CSS”. <\/p>\n\n\nN\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\nB\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n\n\n\n<\/span>Render\/Hi\u1ec3n th\u1ecb<\/span><\/h2>\n\n\nSau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\nC\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\nB\u1ed1 c\u1ee5c\/Layout.<\/li>\u0110\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh\/Paint.<\/li><\/ul>\n\n\n\n\n\n<\/span>B\u1ed1 c\u1ee5c<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\nC\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\nM\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\nH\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\nPh\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1ecbnh d\u1ea1ng<\/span><\/h2>\n\n\nGi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\nTrong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/span><\/h2>\n\n\nCh\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\nY\u00eau c\u1ea7u.<\/li>Ph\u1ea3n h\u1ed3i.<\/li>X\u00e2y d\u1ef1ng.<\/li>Hi\u1ec3n th\u1ecb.<\/li><\/ul>\n\n\nTrong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
DOM \u0111\u1ea1i di\u1ec7n cho \u0111i\u1ec1u HTML \u0111ang n\u00f3i b\u1eb1ng c\u00e1ch \u00e1nh x\u1ea1 trang theo c\u00e1ch quan h\u1ec7 (relational manner).<\/p>\n\n\n
CSSOM l\u00e0 vi\u1ebft t\u1eaft c\u1ee7a c\u1ee5m t\u1eeb “CSS<\/strong> O<\/strong>bject M<\/strong>ap\/B\u1ea3n \u0111\u1ed3 \u0110\u1ed1i t\u01b0\u1ee3ng CSS”. <\/p>\n\n\nN\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\nB\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n\n\n\n<\/span>X\u00e2y d\u1ef1ng c\u00e2y hi\u1ec3n th\u1ecb (render tree)<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nC\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n\n\n\n<\/span>Render\/Hi\u1ec3n th\u1ecb<\/span><\/h2>\n\n\nSau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\nC\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\nB\u1ed1 c\u1ee5c\/Layout.<\/li>\u0110\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh\/Paint.<\/li><\/ul>\n\n\n\n\n\n<\/span>B\u1ed1 c\u1ee5c<\/span><\/h2>\n\n\n<\/figure><\/div>\n\n\nTr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\nC\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\nM\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\nH\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\nPh\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1ecbnh d\u1ea1ng<\/span><\/h2>\n\n\nGi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\nTrong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n\n\n\n<\/span>\u0110\u1eb7t m\u1ecdi th\u1ee9 l\u1ea1i v\u1edbi nhau<\/span><\/h2>\n\n\nCh\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\nY\u00eau c\u1ea7u.<\/li>Ph\u1ea3n h\u1ed3i.<\/li>X\u00e2y d\u1ef1ng.<\/li>Hi\u1ec3n th\u1ecb.<\/li><\/ul>\n\n\nTrong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
N\u00f3 v\u1ec1 c\u01a1 b\u1ea3n l\u00e0 m\u1ed9t b\u1ea3n \u0111\u1ed3 c\u1ee7a c\u00e1c style\/\u0111\u1ecbnh d\u1ea1ng c\u1ee5 th\u1ec3 n\u00e0o ph\u1ea3i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng v\u00e0o c\u00e1c ph\u1ea7n kh\u00e1c nhau c\u1ee7a trang web theo d\u1ea1ng th\u1ee9c CSS. <\/p>\n\n\n
B\u1ea3n \u0111\u1ed3 CSSOM v\u1ea1ch ra c\u00e1ch th\u1ee9c m\u1ecdi th\u1ee9 n\u00ean \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng style.<\/p>\n\n\n
C\u00e2y hi\u1ec3n th\u1ecb v\u1ec1 c\u01a1 b\u1ea3n \u0111\u01b0a DOM v\u00e0 CSSOM k\u1ebft h\u1ee3p l\u1ea1i v\u1edbi nhau \u0111\u1ec3 t\u1ea1o ra b\u1ea3n \u0111\u1ed3 \u0111\u1ea7y \u0111\u1ee7 v\u1ec1 c\u00e1ch trang s\u1ebd th\u1ef1c s\u1ef1 \u0111\u01b0\u1ee3c b\u1ed1 c\u1ee5c v\u00e0 \u0111\u1ecbnh d\u1ea1ng.<\/p>\n\n\n
Sau khi t\u1ea5t c\u1ea3 c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n, cu\u1ed1i c\u00f9ng c\u0169ng \u0111\u1ebfn l\u00fac tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 \u0111\u01b0a ra \u0111i\u1ec1u g\u00ec \u0111\u00f3 l\u00ean m\u00e0n h\u00ecnh r\u1ed3i.<\/p>\n\n\n
C\u00f3 hai \u0111i\u1ec1u ch\u00ednh x\u1ea3y ra \u1edf \u0111\u00e2y…<\/p>\n\n\n
Tr\u00ecnh duy\u1ec7t \u1edf th\u1eddi \u0111i\u1ec3m n\u00e0y \u0111\u00e3 bi\u1ebft c\u00e1i g\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3n th\u1ecb (DOM) v\u00e0 c\u00e1ch th\u1ee9c \u0111\u1ec3 hi\u1ec3n th\u1ecb n\u00f3 th\u1ebf n\u00e0o (CSSOM) v\u00e0 m\u1ed1i quan h\u1ec7 gi\u1eefa hai th\u1ee9 n\u00e0y (c\u00e2y hi\u1ec3n th\u1ecb).<\/p>\n\n\n
C\u00e1i m\u00e0 n\u00f3 kh\u00f4ng bi\u1ebft l\u00e0 k\u00edch c\u1ee1 \u0111\u1ec3 hi\u1ec3n th\u1ecb m\u1ecdi th\u1ee9 v\u00e0 v\u1ecb tr\u00ed c\u1ee7a nh\u1eefng th\u1ee9 n\u00e0y s\u1ebd k\u1ebft th\u00fac t\u1ea1i \u0111\u00e2u tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n
M\u1ed9t v\u00ed d\u1ee5 c\u1ee7a c\u00e2u chuy\u1ec7n n\u00e0y c\u00f3 th\u1ec3 l\u00e0 v\u1ecb tr\u00ed c\u1ee7a th\u1ebb div \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 “sidebar\/c\u1ed9t” v\u1edbi gi\u1ea3 \u0111\u1ecbnh 25% chi\u1ec1u r\u1ed9ng m\u00e0n h\u00ecnh n\u1eb1m \u1edf ph\u00eda tay ph\u1ea3i.<\/p>\n\n\n
H\u1eebm, 25% c\u1ee7a c\u00e1i g\u00ec \u0111\u00e2y?<\/p>\n\n\n
Ph\u1ea7n n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 b\u1ed1 c\u1ee5c (layout), v\u00e0 n\u00f3 l\u00e0 v\u1ea5n \u0111\u1ec1 c\u01a1 b\u1ea3n n\u01a1i m\u00e0 tr\u00ecnh duy\u1ec7t x\u00e1c \u0111\u1ecbnh m\u1ee9c \u0111\u1ed9 l\u1edbn c\u1ee7a m\u00e0n h\u00ecnh l\u00e0 bao nhi\u00eau v\u00e0 l\u00e0m th\u1ebf n\u00e0o \u0111i\u1ec1u \u0111\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u00e1ch hi\u1ec3n th\u1ecb trang.<\/p>\n\n\n
Gi\u1edd t\u1ea5t c\u1ea3 t\u00ednh to\u00e1n \u0111\u00e3 th\u1ef1c hi\u1ec7n xong, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb \u0111i\u1ec1u g\u00ec \u0111\u00f3 tr\u00ean m\u00e0n h\u00ecnh.<\/p>\n\n\n
\u0110i\u1ec1u n\u00e0y \u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 \u0111\u1ecbnh d\u1ea1ng ho\u00e0n ch\u1ec9nh (paint).<\/p>\n\n\n
Trong b\u01b0\u1edbc cu\u1ed1i c\u00f9ng n\u00e0y tr\u00ecnh duy\u1ec7t s\u1ebd chuy\u1ec3n \u0111\u1ed5i m\u1ed7i \u0111i\u1ec3m n\u00fat trong c\u00e2y render th\u00e0nh c\u00e1c pixel th\u1ef1c s\u1ef1 tr\u00ean m\u00e0n h\u00ecnh c\u1ee7a ng\u01b0\u1eddi duy\u1ec7t web.<\/p>\n\n\n
Ch\u00fang ta \u0111\u00e3 chia t\u00e1ch qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb m\u1ed9t trang web th\u00e0nh b\u1ed1n ph\u1ea7n…<\/p>\n\n\n
Trong b\u00e0i vi\u1ebft k\u1ebf ti\u1ebfp, ch\u00fang ta s\u1ebd xem x\u00e9t t\u1eebng b\u01b0\u1edbc n\u00e0y chi ti\u1ebft h\u01a1n.<\/p>\n\n\n
(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft How a webpage is loaded and displayed – T\u00e1c gi\u1ea3: Patrick Sexton – Website: Varvy)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\nC\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\n\t\n\t\n\t\n","yoast_head_json":{"title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • 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\/cach-trang-web-tai-va-hien-thi\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","og_description":"C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …","og_url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-02-09T08:38:00+00:00","og_image":[{"width":737,"height":387,"url":"https:\/\/kiencang.net\/wp-content\/uploads\/2019\/02\/cach-hien-thi-website.png","type":"image\/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":"8 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","url":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/","name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-02-09T08:38:00+00:00","dateModified":"2021-02-09T08:38:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/cach-trang-web-tai-va-hien-thi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u00e1ch tr\u00ecnh duy\u1ec7t t\u1ea3i trang web v\u1ec1 v\u00e0 hi\u1ec3n th\u1ecb cho ng\u01b0\u1eddi d\u00f9ng"}]},{"@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\/11619"}],"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=11619"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/11619\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media\/13071"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=11619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=11619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=11619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
C\u00e1c b\u01b0\u1edbc di\u1ec5n ra trong qu\u00e1 tr\u00ecnh trang web hi\u1ec3n th\u1ecb l\u00e0 g\u00ec? Y\u00eau c\u1ea7u \u0111\u01b0\u1ee3c th\u1ef1c hi\u1ec7n khi ai \u0111\u00f3 click v\u00e0o m\u1ed9t li\u00ean k\u1ebft. Trang v\u00e0 c\u00e1c t\u00e0i nguy\u00ean (file) c\u1ee7a n\u00f3 \u0111\u01b0\u1ee3c t\u1ea3i v\u1ec1. Tr\u00ecnh duy\u1ec7t s\u1eed d\u1ee5ng c\u00e1c t\u00e0i nguy\u00ean c\u1ee7a trang \u0111\u1ec3 x\u00e2y d\u1ef1ng trang. Trang sau \u0111\u00f3 \u0111\u01b0\u1ee3c hi\u1ec3n …<\/p>\n","protected":false},"author":1,"featured_media":13071,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[294],"tags":[],"yoast_head":"\n