{"id":4619,"date":"2026-05-06T15:25:32","date_gmt":"2026-05-06T08:25:32","guid":{"rendered":"https:\/\/wpdesign.vn\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/"},"modified":"2026-05-06T16:06:47","modified_gmt":"2026-05-06T09:06:47","slug":"rendering-toi-uu-hieu-nang-css-chuyen-sau","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/","title":{"rendered":"Rendering: T\u1ed1i \u01afu Hi\u1ec7u N\u0103ng CSS Chuy\u00ean S\u00e2u"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Trong ph\u00e1t tri\u1ec3n giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i, CSS kh\u00f4ng ch\u1ec9 d\u1eebng l\u1ea1i \u1edf t\u00ednh th\u1ea9m m\u1ef9. Khi \u0111\u1ed1i m\u1eb7t v\u1edbi c\u00e1c d\u1ef1 \u00e1n quy m\u00f4 l\u1edbn, CSS tr\u1edf th\u00e0nh m\u1ed9t b\u00e0i to\u00e1n v\u1ec1 <strong>Hi\u1ec7u n\u0103ng h\u1ec7 th\u1ed1ng<\/strong>. Hi\u1ec3u r\u00f5 c\u00e1ch tr\u00ecnh duy\u1ec7t chuy\u1ec3n \u0111\u1ed5i nh\u1eefng d\u00f2ng m\u00e3 khai b\u00e1o th\u00e0nh c\u00e1c \u0111i\u1ec3m \u1ea3nh tr\u00ean m\u00e0n h\u00ecnh l\u00e0 ch\u00eca kh\u00f3a \u0111\u1ec3 x\u00e2y d\u1ef1ng nh\u1eefng tr\u1ea3i nghi\u1ec7m m\u01b0\u1ee3t m\u00e0, kh\u00f4ng gi\u1eadt lag (jank-free).  <\/p>\n\n<p class=\"wp-block-paragraph\">B\u00e0i vi\u1ebft n\u00e0y \u0111i s\u00e2u v\u00e0o c\u01a1 ch\u1ebf n\u1ed9i t\u1ea1i c\u1ee7a Browser Engine v\u00e0 chi\u1ebfn l\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a CSS trong m\u00f4i tr\u01b0\u1eddng th\u1ef1c t\u1ebf.<\/p>\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#1_Pipeline_Rendering_Hanh_Trinh_Tu_Ma_Nguon_Den_Diem\" >1. Pipeline Rendering: H\u00e0nh Tr\u00ecnh T\u1eeb M\u00e3 Ngu\u1ed3n \u0110\u1ebfn \u0110i\u1ec3m<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#Cac_buoc_thuc_hien\" >C\u00e1c b\u01b0\u1edbc th\u1ef1c hi\u1ec7n:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#2_Reflow_Layout_%E2%80%93_%E2%80%9CKe_Thu%E2%80%9D_Cua_Hieu_Nang\" >2. Reflow Layout \u2013 &#8220;K\u1ebb Th\u00f9&#8221; C\u1ee7a Hi\u1ec7u N\u0103ng<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#21_Co_che_kich_hoat\" >2.1. C\u01a1 ch\u1ebf k\u00edch ho\u1ea1t<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#22_Chien_luoc_toi_uu_hoa\" >2.2. Chi\u1ebfn l\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#3_Repaint_%E2%80%93_Mau_Sac_La_Trong_Tam\" >3. Repaint \u2013 M\u00e0u S\u1eafc L\u00e0 Tr\u1ecdng T\u00e2m<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#31_Dac_diem\" >3.1. \u0110\u1eb7c \u0111i\u1ec3m<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#32_Meo_toi_uu\" >3.2. M\u1eb9o t\u1ed1i \u01b0u<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#4_Compositing_%E2%80%93_Suc_Manh_Cua_GPU\" >4. Compositing \u2013 S\u1ee9c M\u1ea1nh C\u1ee7a GPU<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#41_Tai_sao_nen_uu_tien_Compositing\" >4.1. T\u1ea1i sao n\u00ean \u01b0u ti\u00ean Compositing?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#42_Thuoc_tinh_will-change\" >4.2. Thu\u1ed9c t\u00ednh will-change<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#5_Toi_Uu_CSS_Selector\" >5. T\u1ed1i \u01afu CSS Selector<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#51_Giai_ma_thuat_toan_%E2%80%9CRight-to-Left%E2%80%9D_RTL\" >5.1. Gi\u1ea3i m\u00e3 thu\u1eadt to\u00e1n &#8220;Right-to-Left&#8221; (RTL)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#52_Su_ton_kem_cua_%E2%80%9CDescendant_Combinator%E2%80%9D_Dau_cach\" >5.2. S\u1ef1 t\u1ed1n k\u00e9m c\u1ee7a &#8220;Descendant Combinator&#8221; (D\u1ea5u c\u00e1ch)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#53_Phan_cap_hieu_nang_cua_cac_loai_Selector\" >5.3. Ph\u00e2n c\u1ea5p hi\u1ec7u n\u0103ng c\u1ee7a c\u00e1c lo\u1ea1i Selector<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#54_Giai_phap_thuc_thi_Phuong_phap_%E2%80%9CFlat_Hierarchy%E2%80%9D_Phang_hoa\" >5.4. Gi\u1ea3i ph\u00e1p th\u1ef1c thi: Ph\u01b0\u01a1ng ph\u00e1p &#8220;Flat Hierarchy&#8221; (Ph\u1eb3ng h\u00f3a)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#A_Ap_dung_BEM_Block_%E2%80%93_Element_%E2%80%93_Modifier\" >A. \u00c1p d\u1ee5ng BEM (Block &#8211; Element &#8211; Modifier)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#B_Tranh_%E2%80%9COver-qualification%E2%80%9D\" >B. Tr\u00e1nh &#8220;Over-qualification&#8221;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#C_Tan_dung_tinh_ke_thua_Inheritance\" >C. T\u1eadn d\u1ee5ng t\u00ednh k\u1ebf th\u1eeba (Inheritance)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#55_Ket_luan_ky_thuat\" >5.5. K\u1ebft lu\u1eadn k\u1ef9 thu\u1eadt<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#6_Chien_Luoc_Thuc_Thi_Du_An_Thuc_Te\" >6. Chi\u1ebfn L\u01b0\u1ee3c Th\u1ef1c Thi D\u1ef1 \u00c1n Th\u1ef1c T\u1ebf<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#61_Critical_CSS_CSS_thiet_yeu\" >6.1. Critical CSS (CSS thi\u1ebft y\u1ebfu)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#62_Doi_voi_WordPress_va_cac_Page_Builder\" >6.2. \u0110\u1ed1i v\u1edbi WordPress v\u00e0 c\u00e1c Page Builder<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#63_Tranh_su_dung_import\" >6.3. Tr\u00e1nh s\u1eed d\u1ee5ng @import<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/wpdesign.vn\/vi\/rendering-toi-uu-hieu-nang-css-chuyen-sau\/#7_Tong_Ket\" >7. T\u1ed5ng K\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Pipeline_Rendering_Hanh_Trinh_Tu_Ma_Nguon_Den_Diem\"><\/span>1. Pipeline Rendering: H\u00e0nh Tr\u00ecnh T\u1eeb M\u00e3 Ngu\u1ed3n \u0110\u1ebfn \u0110i\u1ec3m <span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<p class=\"wp-block-paragraph\">Tr\u00ecnh duy\u1ec7t kh\u00f4ng hi\u1ec3n th\u1ecb website ngay l\u1eadp t\u1ee9c. N\u00f3 \u0111i qua m\u1ed9t quy tr\u00ecnh tu\u1ea7n t\u1ef1 g\u1ecdi l\u00e0 <strong>Critical Rendering Path (CRP)<\/strong>. Hi\u1ec3u \u0111\u01b0\u1ee3c quy tr\u00ecnh n\u00e0y gi\u00fap b\u1ea1n bi\u1ebft ch\u00ednh x\u00e1c CSS c\u1ee7a m\u00ecnh \u0111ang &#8220;can thi\u1ec7p&#8221; v\u00e0o giai \u0111o\u1ea1n n\u00e0o.  <\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cac_buoc_thuc_hien\"><\/span>C\u00e1c b\u01b0\u1edbc th\u1ef1c hi\u1ec7n:<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>DOM (Document Object Model):<\/strong> Tr\u00ecnh duy\u1ec7t parse HTML th\u00e0nh c\u1ea5u tr\u00fac c\u00e2y d\u1eef li\u1ec7u.<\/li>\n\n\n\n<li><strong>CSSOM (CSS Object Model):<\/strong> Tr\u00ecnh duy\u1ec7t parse to\u00e0n b\u1ed9 CSS \u0111\u1ec3 hi\u1ec3u c\u00e1c quy t\u1eafc \u00e1p d\u1ee5ng cho t\u1eebng node.<\/li>\n\n\n\n<li><strong>Render Tree:<\/strong> K\u1ebft h\u1ee3p DOM v\u00e0 CSSOM \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh nh\u1eefng ph\u1ea7n t\u1eed n\u00e0o th\u1ef1c s\u1ef1 hi\u1ec3n th\u1ecb (lo\u1ea1i b\u1ecf <code>display: none<\/code>).<\/li>\n\n\n\n<li><strong>Layout (Reflow):<\/strong> T\u00ednh to\u00e1n t\u1ecda \u0111\u1ed9, k\u00edch th\u01b0\u1edbc h\u00ecnh h\u1ecdc c\u1ee7a t\u1eebng node tr\u00ean kh\u00f4ng gian m\u00e0n h\u00ecnh.<\/li>\n\n\n\n<li><strong>Paint:<\/strong> V\u1ebd c\u00e1c thu\u1ed9c t\u00ednh h\u00ecnh \u1ea3nh (m\u00e0u s\u1eafc, b\u00f3ng \u0111\u1ed5, h\u00ecnh n\u1ec1n) l\u00ean c\u00e1c &#8220;l\u1edbp&#8221; (layers).<\/li>\n\n\n\n<li><strong>Composite:<\/strong> G\u1ed9p c\u00e1c l\u1edbp l\u1ea1i v\u00e0 \u0111\u1ea9y l\u00ean GPU \u0111\u1ec3 hi\u1ec3n th\u1ecb k\u1ebft qu\u1ea3 cu\u1ed1i c\u00f9ng.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Reflow_Layout_%E2%80%93_%E2%80%9CKe_Thu%E2%80%9D_Cua_Hieu_Nang\"><\/span>2. Reflow Layout \u2013 &#8220;K\u1ebb Th\u00f9&#8221; C\u1ee7a Hi\u1ec7u N\u0103ng<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<p class=\"wp-block-paragraph\"><strong>Reflow<\/strong> x\u1ea3y ra khi c\u00f3 b\u1ea5t k\u1ef3 thay \u0111\u1ed5i n\u00e0o \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn c\u1ea5u tr\u00fac h\u00ecnh h\u1ecdc c\u1ee7a trang web. \u0110\u00e2y l\u00e0 b\u01b0\u1edbc t\u1ed1n k\u00e9m nh\u1ea5t v\u00ec n\u00f3 c\u00f3 t\u00ednh ch\u1ea5t &#8220;d\u00e2y chuy\u1ec1n&#8221;. <\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"21_Co_che_kich_hoat\"><\/span>2.1. C\u01a1 ch\u1ebf k\u00edch ho\u1ea1t<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Khi b\u1ea1n thay \u0111\u1ed5i <code>width<\/code> c\u1ee7a m\u1ed9t <code>div<\/code> cha, tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u00ednh to\u00e1n l\u1ea1i v\u1ecb tr\u00ed c\u1ee7a t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed con, ph\u1ea7n t\u1eed \u0111\u1ee9ng sau n\u00f3 v\u00e0 \u0111\u00f4i khi l\u00e0 to\u00e0n b\u1ed9 b\u1ed1 c\u1ee5c trang web.<\/p>\n\n<p class=\"wp-block-paragraph\"><strong>C\u00e1c thu\u1ed9c t\u00ednh g\u00e2y Reflow m\u1ea1nh:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Box Model:<\/strong> <code>width<\/code>, <code>height<\/code>, <code>padding<\/code>, <code>margin<\/code>, <code>border<\/code>.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> <code>font-size<\/code>, <code>line-height<\/code>, <code>font-weight<\/code>, <code>text-align<\/code>.<\/li>\n\n\n\n<li><strong>Positioning:<\/strong> <code>top<\/code>,  <code>left<\/code>,  <code>right<\/code>,  <code>bottom<\/code>,  <code>float<\/code>,  <code>display<\/code>.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"22_Chien_luoc_toi_uu_hoa\"><\/span>2.2. Chi\u1ebfn l\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<ul class=\"wp-block-list\">\n<li><strong>H\u1ea1n ch\u1ebf Layout Thrashing:<\/strong> Tr\u00e1nh vi\u1ec7c \u0111\u1ecdc v\u00e0 ghi c\u00e1c thu\u1ed9c t\u00ednh h\u00ecnh h\u1ecdc li\u00ean t\u1ee5c trong JavaScript (v\u00ed d\u1ee5: v\u1eeba \u0111\u1ecdc <code>offsetHeight<\/code> v\u1eeba thay \u0111\u1ed5i <code>style.height<\/code> trong m\u1ed9t v\u00f2ng l\u1eb7p).<\/li>\n\n\n\n<li><strong>S\u1eed d\u1ee5ng Flexbox\/Grid hi\u1ec7n \u0111\u1ea1i:<\/strong> C\u00e1c engine m\u1edbi \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a cho Flexbox v\u00e0 Grid t\u1ed1t h\u01a1n nhi\u1ec1u so v\u1edbi c\u00e1c k\u1ef9 thu\u1eadt <code>float<\/code> c\u0169.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Repaint_%E2%80%93_Mau_Sac_La_Trong_Tam\"><\/span>3. Repaint \u2013 M\u00e0u S\u1eafc L\u00e0 Tr\u1ecdng T\u00e2m<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<p class=\"wp-block-paragraph\"><strong>Repaint<\/strong> x\u1ea3y ra khi b\u1ea1n thay \u0111\u1ed5i c\u00e1c thu\u1ed9c t\u00ednh h\u00ecnh \u1ea3nh nh\u01b0ng kh\u00f4ng l\u00e0m thay \u0111\u1ed5i v\u1ecb tr\u00ed hay k\u00edch th\u01b0\u1edbc c\u1ee7a ph\u1ea7n t\u1eed.<\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"31_Dac_diem\"><\/span>3.1. \u0110\u1eb7c \u0111i\u1ec3m<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">M\u1eb7c d\u00f9 nh\u1eb9 h\u01a1n Reflow, nh\u01b0ng n\u1ebfu Repaint x\u1ea3y ra li\u00ean t\u1ee5c tr\u00ean m\u1ed9t v\u00f9ng di\u1ec7n t\u00edch l\u1edbn (v\u00ed d\u1ee5: hi\u1ec7u \u1ee9ng gradient ph\u1ee9c t\u1ea1p ch\u1ea1y to\u00e0n m\u00e0n h\u00ecnh), CPU v\u1eabn s\u1ebd b\u1ecb qu\u00e1 t\u1ea3i.<\/p>\n\n<p class=\"wp-block-paragraph\"><strong>C\u00e1c thu\u1ed9c t\u00ednh g\u00e2y Repaint:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>color<\/code>, <code>background-color<\/code>, <code>visibility<\/code>, <code>outline<\/code>, <code>box-shadow<\/code>.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"32_Meo_toi_uu\"><\/span>3.2. M\u1eb9o t\u1ed1i \u01b0u<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Thay v\u00ec thay \u0111\u1ed5i m\u00e0u s\u1eafc tr\u1ef1c ti\u1ebfp qua CSS Class li\u00ean t\u1ee5c, h\u00e3y c\u00e2n nh\u1eafc s\u1eed d\u1ee5ng c\u00e1c l\u1edbp layer ri\u00eang bi\u1ec7t n\u1ebfu ph\u1ea7n t\u1eed \u0111\u00f3 c\u00f3 t\u1ea7n su\u1ea5t thay \u0111\u1ed5i c\u1ef1c cao.<\/p>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Compositing_%E2%80%93_Suc_Manh_Cua_GPU\"><\/span>4. Compositing \u2013 S\u1ee9c M\u1ea1nh C\u1ee7a GPU<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<p class=\"wp-block-paragraph\">\u0110\u00e2y l\u00e0 giai \u0111o\u1ea1n t\u1ed1i \u01b0u nh\u1ea5t. Tr\u00ecnh duy\u1ec7t t\u00e1ch c\u00e1c ph\u1ea7n t\u1eed th\u00e0nh c\u00e1c &#8220;l\u1edbp&#8221; (layers) \u0111\u1ed9c l\u1eadp, v\u1ebd ch\u00fang ri\u00eang r\u1ebd v\u00e0 g\u1ed9p l\u1ea1i \u1edf GPU. <\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"41_Tai_sao_nen_uu_tien_Compositing\"><\/span>4.1. T\u1ea1i sao n\u00ean \u01b0u ti\u00ean Compositing?<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Khi b\u1ea1n s\u1eed d\u1ee5ng c\u00e1c thu\u1ed9c t\u00ednh nh\u01b0 <code>transform<\/code> ho\u1eb7c <code>opacity<\/code>, tr\u00ecnh duy\u1ec7t c\u00f3 th\u1ec3 b\u1ecf qua c\u1ea3 b\u01b0\u1edbc Reflow v\u00e0 Paint, ch\u1ec9 th\u1ef1c hi\u1ec7n b\u01b0\u1edbc Composite. \u0110i\u1ec1u n\u00e0y gi\u00fap animation \u0111\u1ea1t ng\u01b0\u1ee1ng <strong>60 FPS<\/strong> (Frames Per Second) d\u1ec5 d\u00e0ng. <\/p>\n\n<p class=\"wp-block-paragraph\"><strong>V\u00ed d\u1ee5 th\u1ef1c t\u1ebf:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>\u274c <strong>T\u1ec7:<\/strong> <code>left: 10px<\/code> (G\u00e2y Reflow).<\/li>\n\n\n\n<li>\u2705 <strong>T\u1ed1t:<\/strong> <code>transform: translateX(10px)<\/code> (Ch\u1ec9 g\u00e2y Composite).<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"42_Thuoc_tinh_will-change\"><\/span>4.2. Thu\u1ed9c t\u00ednh <code>will-change<\/code><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">S\u1eed d\u1ee5ng <code>will-change: transform;<\/code> \u0111\u1ec3 b\u00e1o tr\u01b0\u1edbc cho tr\u00ecnh duy\u1ec7t t\u1ea1o m\u1ed9t layer m\u1edbi tr\u00ean GPU cho ph\u1ea7n t\u1eed \u0111\u00f3.<\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>L\u01b0u \u00fd:<\/strong> Kh\u00f4ng l\u1ea1m d\u1ee5ng. Vi\u1ec7c t\u1ea1o qu\u00e1 nhi\u1ec1u layer s\u1ebd l\u00e0m c\u1ea1n ki\u1ec7t b\u1ed9 nh\u1edb VRAM c\u1ee7a GPU, d\u1eabn \u0111\u1ebfn ph\u1ea3n t\u00e1c d\u1ee5ng. <\/p>\n<\/blockquote>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Toi_Uu_CSS_Selector\"><\/span>5. T\u1ed1i \u01afu CSS Selector<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"51_Giai_ma_thuat_toan_%E2%80%9CRight-to-Left%E2%80%9D_RTL\"><\/span>5.1. Gi\u1ea3i m\u00e3 thu\u1eadt to\u00e1n &#8220;Right-to-Left&#8221; (RTL)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Khi tr\u00ecnh duy\u1ec7t ph\u00e2n t\u00edch m\u1ed9t Selector nh\u01b0 <code>div .container ul li a<\/code>, qu\u00e1 tr\u00ecnh di\u1ec5n ra nh\u01b0 sau:<\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>Giai \u0111o\u1ea1n 1:<\/strong> N\u00f3 qu\u00e9t to\u00e0n b\u1ed9 DOM \u0111\u1ec3 t\u00ecm t\u1ea5t c\u1ea3 c\u00e1c th\u1ebb <code>&lt;a&gt;<\/code> (\u0111\u01b0\u1ee3c g\u1ecdi l\u00e0 <em>Key Selector<\/em>).<\/li>\n\n\n\n<li><strong>Giai \u0111o\u1ea1n 2:<\/strong> V\u1edbi m\u1ed7i th\u1ebb <code>&lt;a&gt;<\/code> t\u00ecm th\u1ea5y, n\u00f3 duy\u1ec7t ng\u01b0\u1ee3c l\u00ean cha \u0111\u1ec3 ki\u1ec3m tra xem c\u00f3 n\u1eb1m trong th\u1ebb <code>&lt;li&gt;<\/code> kh\u00f4ng.<\/li>\n\n\n\n<li><strong>Giai \u0111o\u1ea1n 3:<\/strong> Ti\u1ebfp t\u1ee5c duy\u1ec7t ng\u01b0\u1ee3c l\u00ean c\u00e1c c\u1ea5p cao h\u01a1n \u0111\u1ec3 kh\u1edbp v\u1edbi <code>ul<\/code>, <code>.container<\/code>, v\u00e0 cu\u1ed1i c\u00f9ng l\u00e0 <code>div<\/code>.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\"><strong>T\u1ea1i sao l\u1ea1i l\u00e0 t\u1eeb ph\u1ea3i sang tr\u00e1i?<\/strong><\/p>\n\n<p class=\"wp-block-paragraph\">N\u1ebfu tr\u00ecnh duy\u1ec7t \u0111i t\u1eeb tr\u00e1i sang ph\u1ea3i, n\u00f3 s\u1ebd ph\u1ea3i \u0111i v\u00e0o r\u1ea5t nhi\u1ec1u &#8220;nh\u00e1nh c\u1ee5t&#8221; c\u1ee7a c\u00e2y DOM kh\u00f4ng ch\u1ee9a ph\u1ea7n t\u1eed m\u1ee5c ti\u00eau. Vi\u1ec7c \u0111i t\u1eeb ph\u1ea3i sang tr\u00e1i gi\u00fap tr\u00ecnh duy\u1ec7t lo\u1ea1i b\u1ecf c\u00e1c ph\u1ea7n t\u1eed kh\u00f4ng kh\u1edbp nhanh h\u01a1n ngay t\u1eeb b\u01b0\u1edbc \u0111\u1ea7u ti\u00ean. Tuy nhi\u00ean, n\u1ebfu <em>Key Selector<\/em> (ph\u1ea7n t\u1eed ngo\u00e0i c\u00f9ng b\u00ean ph\u1ea3i) l\u00e0 m\u1ed9t th\u1ebb ph\u1ed5 bi\u1ebfn nh\u01b0 <code>div<\/code> ho\u1eb7c <code>a<\/code>, kh\u1ed1i l\u01b0\u1ee3ng c\u00f4ng vi\u1ec7c t\u00ednh to\u00e1n v\u1eabn c\u1ef1c k\u1ef3 kh\u1ed5ng l\u1ed3.  <\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"52_Su_ton_kem_cua_%E2%80%9CDescendant_Combinator%E2%80%9D_Dau_cach\"><\/span>5.2. S\u1ef1 t\u1ed1n k\u00e9m c\u1ee7a &#8220;Descendant Combinator&#8221; (D\u1ea5u c\u00e1ch)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Selector d\u1ea1ng <code>div a<\/code> (con ch\u00e1u) t\u1ed1n k\u00e9m h\u01a1n nhi\u1ec1u so v\u1edbi <code>div &gt; a<\/code> (con tr\u1ef1c ti\u1ebfp).<\/p>\n\n<ul class=\"wp-block-list\">\n<li>V\u1edbi <code>div &gt; a<\/code>, tr\u00ecnh duy\u1ec7t ch\u1ec9 c\u1ea7n ki\u1ec3m tra \u0111\u00fang m\u1ed9t c\u1ea5p cha.<\/li>\n\n\n\n<li>V\u1edbi <code>div a<\/code>, tr\u00ecnh duy\u1ec7t bu\u1ed9c ph\u1ea3i duy\u1ec7t ng\u01b0\u1ee3c l\u00ean t\u1ea5t c\u1ea3 c\u00e1c c\u1ea5p cho \u0111\u1ebfn t\u1eadn th\u1ebb <code>&lt;html&gt;<\/code> \u0111\u1ec3 ch\u1eafc ch\u1eafn ph\u1ea7n t\u1eed \u0111\u00f3 c\u00f3 thu\u1ed9c <code>div<\/code> hay kh\u00f4ng. Trong m\u1ed9t c\u1ea5u tr\u00fac DOM s\u00e2u (Deep Nesting), \u0111i\u1ec1u n\u00e0y g\u00e2y \u00e1p l\u1ef1c c\u1ef1c l\u1edbn l\u00ean CPU. <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"53_Phan_cap_hieu_nang_cua_cac_loai_Selector\"><\/span>5.3. Ph\u00e2n c\u1ea5p hi\u1ec7u n\u0103ng c\u1ee7a c\u00e1c lo\u1ea1i Selector<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">D\u1ef1a tr\u00ean t\u1ed1c \u0111\u1ed9 x\u1eed l\u00fd c\u1ee7a engine, ch\u00fang ta c\u00f3 b\u1ea3ng x\u1ebfp h\u1ea1ng sau:<\/p>\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Th\u1ee9 h\u1ea1ng<\/strong><\/td><td><strong>Lo\u1ea1i Selector<\/strong><\/td><td><strong>V\u00ed d\u1ee5<\/strong><\/td><td><strong>\u0110\u00e1nh gi\u00e1<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>1 (Nhanh nh\u1ea5t)<\/strong><\/td><td><strong>ID<\/strong><\/td><td><code>#header<\/code><\/td><td>Truy xu\u1ea5t tr\u1ef1c ti\u1ebfp qua b\u1ea3ng b\u0103m (Hash table).<\/td><\/tr><tr><td><strong>2<\/strong><\/td><td><strong>Class<\/strong><\/td><td><code>.nav-link<\/code><\/td><td>C\u1ef1c k\u1ef3 nhanh, l\u00e0 ti\u00eau chu\u1ea9n cho d\u1ef1 \u00e1n l\u1edbn.<\/td><\/tr><tr><td><strong>3<\/strong><\/td><td><strong>Type (Tag)<\/strong><\/td><td><code>div<\/code>,  <code>a<\/code><\/td><td>Ch\u1eadm v\u00ec s\u1ed1 l\u01b0\u1ee3ng ph\u1ea7n t\u1eed tr\u00f9ng l\u1eb7p qu\u00e1 l\u1edbn.<\/td><\/tr><tr><td><strong>4<\/strong><\/td><td><strong>Universal<\/strong><\/td><td><code>*<\/code><\/td><td>T\u1ec7 nh\u1ea5t, tr\u00ecnh duy\u1ec7t ph\u1ea3i ki\u1ec3m tra m\u1ecdi node.<\/td><\/tr><tr><td><strong>5 (Ch\u1eadm nh\u1ea5t)<\/strong><\/td><td><strong>Pseudo-class\/Attribute<\/strong><\/td><td><code>[type=\"text\"]<\/code><\/td><td>\u0110\u00f2i h\u1ecfi t\u00ednh to\u00e1n tr\u1ea1ng th\u00e1i v\u00e0 l\u1ecdc thu\u1ed9c t\u00ednh.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"54_Giai_phap_thuc_thi_Phuong_phap_%E2%80%9CFlat_Hierarchy%E2%80%9D_Phang_hoa\"><\/span>5.4. Gi\u1ea3i ph\u00e1p th\u1ef1c thi: Ph\u01b0\u01a1ng ph\u00e1p &#8220;Flat Hierarchy&#8221; (Ph\u1eb3ng h\u00f3a)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">\u0110\u1ec3 \u0111\u1ea1t hi\u1ec7u n\u0103ng t\u1ed1i \u01b0u, ch\u00fang ta c\u1ea7n \u00e1p d\u1ee5ng t\u01b0 duy ki\u1ebfn tr\u00fac \u0111\u1ec3 \u0111\u01b0a \u0111\u1ed9 ph\u1ee9c t\u1ea1p c\u1ee7a Selector v\u1ec1 m\u1ee9c <strong>O(1)<\/strong>.<\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"A_Ap_dung_BEM_Block_%E2%80%93_Element_%E2%80%93_Modifier\"><\/span>A. \u00c1p d\u1ee5ng BEM (Block &#8211; Element &#8211; Modifier)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Thay v\u00ec vi\u1ebft:<\/p>\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n<pre class=\"wp-block-code\"><code>\/* Specificity cao, Performance th\u1ea5p *\/\n.card .header .title span { ... }\n<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">H\u00e3y vi\u1ebft:<\/p>\n\n<p class=\"wp-block-paragraph\">CSS<\/p>\n\n<pre class=\"wp-block-code\"><code>\/* Specificity th\u1ea5p (10 \u0111i\u1ec3m), Performance tuy\u1ec7t \u0111\u1ed1i *\/\n.card__title-text { ... }\n<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">B\u1eb1ng c\u00e1ch n\u00e0y, tr\u00ecnh duy\u1ec7t ch\u1ec9 c\u1ea7n t\u00ecm \u0111\u00fang Class \u0111\u00f3 v\u00e0 \u00e1p d\u1ee5ng style ngay l\u1eadp t\u1ee9c m\u00e0 kh\u00f4ng c\u1ea7n quan t\u00e2m \u0111\u1ebfn ng\u1eef c\u1ea3nh cha-con.<\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"B_Tranh_%E2%80%9COver-qualification%E2%80%9D\"><\/span>B. Tr\u00e1nh &#8220;Over-qualification&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">\u0110\u1eebng vi\u1ebft: <code>a.nav-link<\/code> hay <code>div.container<\/code>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li>Tr\u00ecnh duy\u1ec7t ph\u1ea3i l\u00e0m hai vi\u1ec7c: T\u00ecm Class v\u00e0 ki\u1ec3m tra xem th\u1ebb \u0111\u00f3 c\u00f3 ph\u1ea3i l\u00e0 <code>a<\/code> hay <code>div<\/code> kh\u00f4ng.<\/li>\n\n\n\n<li>Ch\u1ec9 c\u1ea7n <code>.nav-link<\/code> l\u00e0 \u0111\u1ee7. Th\u00eam th\u1ebb Tag ph\u00eda tr\u01b0\u1edbc ch\u1ec9 l\u00e0m t\u0103ng th\u1eddi gian kh\u1edbp l\u1ec7nh v\u00e0 t\u0103ng \u0111\u1ed9 \u01b0u ti\u00ean (Specificity) m\u1ed9t c\u00e1ch kh\u00f4ng c\u1ea7n thi\u1ebft. <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"C_Tan_dung_tinh_ke_thua_Inheritance\"><\/span>C. T\u1eadn d\u1ee5ng t\u00ednh k\u1ebf th\u1eeba (Inheritance)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Thay v\u00ec khai b\u00e1o font-size cho t\u1eebng Selector s\u00e2u:<\/p>\n\n<p class=\"wp-block-paragraph\"><code>div.container ul li a { font-size: 14px; }<\/code><\/p>\n\n<p class=\"wp-block-paragraph\">H\u00e3y khai b\u00e1o t\u1ea1i c\u1ea5p cha ho\u1eb7c d\u00f9ng CSS Variables \u0111\u1ec3 truy\u1ec1n d\u1eef li\u1ec7u xu\u1ed1ng. \u0110i\u1ec1u n\u00e0y gi\u1ea3m b\u1edbt s\u1ed1 l\u01b0\u1ee3ng quy t\u1eafc m\u00e0 Engine ph\u1ea3i t\u00ednh to\u00e1n. <\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"55_Ket_luan_ky_thuat\"><\/span>5.5. K\u1ebft lu\u1eadn k\u1ef9 thu\u1eadt<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">Trong c\u00e1c d\u1ef1 \u00e1n quy m\u00f4 l\u1edbn, vi\u1ec7c t\u1ed1i \u01b0u Selector kh\u00f4ng ch\u1ec9 gi\u00fap trang web load nhanh h\u01a1n v\u00e0i miligi\u00e2y, m\u00e0 c\u00f2n gi\u00fap gi\u1ea3m t\u1ea3i cho pin c\u1ee7a thi\u1ebft b\u1ecb di \u0111\u1ed9ng v\u00e0 tr\u00e1nh c\u00e1c l\u1ed7i &#8220;gi\u1eadt khung h\u00ecnh&#8221; khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n trang.<\/p>\n\n<p class=\"wp-block-paragraph\"><strong>Nguy\u00ean t\u1eafc v\u00e0ng:<\/strong> <em>H\u00e3y ch\u1ecdn Selector c\u1ee5 th\u1ec3 nh\u1ea5t (Key Selector) v\u00e0 gi\u1eef cho n\u00f3 c\u00e0ng n\u00f4ng c\u00e0ng t\u1ed1t.<\/em><\/p>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"6_Chien_Luoc_Thuc_Thi_Du_An_Thuc_Te\"><\/span>6. Chi\u1ebfn L\u01b0\u1ee3c Th\u1ef1c Thi D\u1ef1 \u00c1n Th\u1ef1c T\u1ebf<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"61_Critical_CSS_CSS_thiet_yeu\"><\/span>6.1. Critical CSS (CSS thi\u1ebft y\u1ebfu)<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">\u0110\u1eebng b\u1eaft ng\u01b0\u1eddi d\u00f9ng t\u1ea3i 500KB CSS ch\u1ec9 \u0111\u1ec3 xem ph\u1ea7n Header. H\u00e3y t\u00e1ch ph\u1ea7n CSS c\u1ea7n thi\u1ebft \u0111\u1ec3 hi\u1ec3n th\u1ecb khung h\u00ecnh \u0111\u1ea7u ti\u00ean (Above the fold) v\u00e0 nh\u00fang tr\u1ef1c ti\u1ebfp v\u00e0o th\u1ebb <code>&lt;style&gt;<\/code> \u1edf <code>&lt;head&gt;<\/code>. C\u00e1c ph\u1ea7n c\u00f2n l\u1ea1i h\u00e3y load async.  <\/p>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"62_Doi_voi_WordPress_va_cac_Page_Builder\"><\/span>6.2. \u0110\u1ed1i v\u1edbi WordPress v\u00e0 c\u00e1c Page Builder<span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\">C\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 Elementor hay WP Bakery th\u01b0\u1eddng t\u1ea1o ra c\u1ea5u tr\u00fac DOM c\u1ef1c k\u1ef3 s\u00e2u (deep nesting).<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Gi\u1ea3i ph\u00e1p:<\/strong> H\u1ea1n ch\u1ebf c\u00e1c l\u1edbp b\u1ecdc (wrapper) kh\u00f4ng c\u1ea7n thi\u1ebft. S\u1eed d\u1ee5ng CSS t\u00f9y ch\u1ec9nh \u0111\u1ec3 thay th\u1ebf cho c\u00e1c widget c\u00f3 hi\u1ec7u \u1ee9ng qu\u00e1 ph\u1ee9c t\u1ea1p. <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"63_Tranh_su_dung_import\"><\/span>6.3. Tr\u00e1nh s\u1eed d\u1ee5ng <code>@import<\/code><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n<p class=\"wp-block-paragraph\"><code>@import<\/code> trong file CSS ng\u0103n c\u1ea3n tr\u00ecnh duy\u1ec7t t\u1ea3i song song c\u00e1c t\u00e0i nguy\u00ean, l\u00e0m k\u00e9o d\u00e0i th\u1eddi gian Rendering Path. H\u00e3y lu\u00f4n s\u1eed d\u1ee5ng th\u1ebb <code>&lt;link&gt;<\/code>. <\/p>\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"7_Tong_Ket\"><\/span>7. T\u1ed5ng K\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n<p class=\"wp-block-paragraph\">T\u1ed1i \u01b0u hi\u1ec7u n\u0103ng CSS kh\u00f4ng ph\u1ea3i l\u00e0 th\u1ee7 thu\u1eadt, m\u00e0 l\u00e0 s\u1ef1 hi\u1ec3u bi\u1ebft v\u1ec1 <strong>v\u1eadt l\u00fd h\u1ecdc c\u1ee7a tr\u00ecnh duy\u1ec7t<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Priority 1:<\/strong> S\u1eed d\u1ee5ng <code>transform<\/code> v\u00e0 <code>opacity<\/code> cho m\u1ecdi chuy\u1ec3n \u0111\u1ed9ng.<\/li>\n\n\n\n<li><strong>Priority 2:<\/strong> Gi\u1ea3m thi\u1ec3u s\u1ed1 l\u01b0\u1ee3ng ph\u1ea7n t\u1eed b\u1ecb \u1ea3nh h\u01b0\u1edfng khi c\u00f3 Reflow.<\/li>\n\n\n\n<li><strong>Priority 3:<\/strong> L\u00e0m ph\u1eb3ng c\u1ea5u tr\u00fac Selector v\u00e0 DOM.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">M\u1ed9t website chuy\u00ean nghi\u1ec7p kh\u00f4ng ch\u1ec9 l\u00e0 m\u1ed9t website \u0111\u1eb9p, m\u00e0 ph\u1ea3i l\u00e0 m\u1ed9t website ph\u1ea3n h\u1ed3i ngay l\u1eadp t\u1ee9c d\u01b0\u1edbi m\u1ecdi t\u00e1c \u0111\u1ed9ng c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. H\u00e3y vi\u1ebft CSS v\u1edbi t\u01b0 duy c\u1ee7a m\u1ed9t k\u1ef9 s\u01b0 hi\u1ec7u n\u0103ng. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong ph\u00e1t tri\u1ec3n giao di\u1ec7n hi\u1ec7n \u0111\u1ea1i, CSS kh\u00f4ng ch\u1ec9 d\u1eebng l\u1ea1i \u1edf t\u00ednh th\u1ea9m m\u1ef9. Khi \u0111\u1ed1i m\u1eb7t v\u1edbi c\u00e1c d\u1ef1 \u00e1n quy m\u00f4 l\u1edbn, CSS tr\u1edf th\u00e0nh m\u1ed9t b\u00e0i to\u00e1n v\u1ec1 Hi\u1ec7u n\u0103ng h\u1ec7 th\u1ed1ng. Hi\u1ec3u r\u00f5 c\u00e1ch tr\u00ecnh duy\u1ec7t chuy\u1ec3n \u0111\u1ed5i nh\u1eefng d\u00f2ng m\u00e3 khai b\u00e1o th\u00e0nh c\u00e1c \u0111i\u1ec3m \u1ea3nh tr\u00ean m\u00e0n [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":4618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_focus_keyword":"","rank_math_title":"","rank_math_description":"","rank_math_canonical_url":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_twitter_title":"","rank_math_twitter_description":"","_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[25],"tags":[],"class_list":["post-4619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4619"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4619\/revisions"}],"predecessor-version":[{"id":4620,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4619\/revisions\/4620"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4618"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}