{"id":13927,"date":"2019-12-12T15:46:01","date_gmt":"2019-12-12T15:46:01","guid":{"rendered":"https:\/\/kiencang.net\/?p=13927"},"modified":"2019-12-12T15:46:01","modified_gmt":"2019-12-12T15:46:01","slug":"javascript-async-defer","status":"publish","type":"post","link":"https:\/\/kiencang.net\/javascript-async-defer\/","title":{"rendered":"Lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer"},"content":{"rendered":"\n

V\u1edbi HTML5, ch\u00fang ta c\u00f3 hai thu\u1ed9c t\u00ednh boolean m\u1edbi cho th\u1ebb <script> l\u00e0: async<\/em> v\u00e0 defer<\/em>.<\/p>\n\n\n

Async<\/em> cho ph\u00e9p th\u1ef1c thi c\u00e1c \u0111o\u1ea1n m\u00e3 kh\u00f4ng \u0111\u1ed3ng b\u1ed9 v\u00e0 defer<\/em> cho ph\u00e9p th\u1ef1c thi ch\u1ec9 khi to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) xong.<\/p>\n\n\n

\u0110\u00e2y l\u00e0 hai thu\u1ed9c t\u00ednh b\u1eaft bu\u1ed9c n\u1ebfu b\u1ea1n mu\u1ed1n t\u0103ng t\u1ed1c website<\/a>. Ch\u00fang cho ph\u00e9p lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb<\/a> (nh\u1eefng \u0111o\u1ea1n m\u00e3 \u0111\u01b0\u1ee3c th\u1ef1c thi tr\u01b0\u1edbc khi qu\u00e1 tr\u00ecnh render trang ho\u00e0n th\u00e0nh, do v\u1eady n\u00f3 l\u00e0m ch\u1eadm qu\u00e1 tr\u00ecnh hi\u1ec3n th\u1ecb).<\/p>\n\n\n

D\u01b0\u1edbi \u0111\u00e2y l\u00e0 v\u00ed d\u1ee5 v\u1ec1 c\u00e1ch s\u1eed d\u1ee5ng:<\/p>\n\n\n

<script<\/span> <\/span>defer<\/span><\/span><\/span> src<\/span>=“\/js\/jquery.min.js”<\/span>><\/span> <\/script<\/span>><\/span> <\/em><\/p>\n\n\n

<script<\/span> <\/span>async<\/span><\/span><\/span> src<\/span>=“\/js\/extras.min.js”<\/span>><\/span> <\/script<\/span>><\/span><\/em><\/p>\n\n\n

Async vs Defer<\/h2>\n\n\n

V\u1edbi async<\/em>, file JS \u0111\u01b0\u1ee3c t\u1ea3i kh\u00f4ng \u0111\u1ed3ng b\u1ed9 v\u00e0 sau \u0111\u00f3 \u0111\u01b0\u1ee3c th\u1ef1c thi ngay khi t\u1ea3i xu\u1ed1ng.<\/p>\n\n\n

V\u1edbi defer<\/em>, file JS c\u0169ng \u0111\u01b0\u1ee3c t\u1ea3i xu\u1ed1ng kh\u00f4ng \u0111\u1ed3ng b\u1ed9, nh\u01b0ng \u0111\u01b0\u1ee3c th\u1ef1c thi ch\u1ec9 khi qu\u00e1 tr\u00ecnh ph\u00e2n t\u00edch t\u00e0i li\u1ec7u \u0111\u00e3 ho\u00e0n th\u00e0nh.<\/p>\n\n\n

V\u1edbi defer<\/em>, c\u00e1c m\u00e3 s\u1ebd \u0111\u01b0\u1ee3c th\u1ef1c thi gi\u1ed1ng nh\u01b0 th\u1ee9 t\u1ef1 m\u00e0 ch\u00fang \u0111\u01b0\u1ee3c g\u1ecdi. \u0110i\u1ec1u n\u00e0y l\u00e0m cho defer<\/em> l\u00e0 l\u00e0 thu\u1ed9c t\u00ednh b\u1ea1n n\u00ean ch\u1ecdn khi script n\u00e0y ph\u1ee5 thu\u1ed9c v\u00e0o script kh\u00e1c. V\u00ed d\u1ee5, n\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng jQuery c\u0169ng nh\u01b0 c\u00e1c script kh\u00e1c ph\u1ee5 thu\u1ed9c v\u00e0o n\u00f3, r\u1ed3i b\u1ea1n s\u1eed d\u1ee5ng defer<\/em> v\u1edbi c\u00e1c script n\u00e0y (bao g\u1ed3m c\u1ea3 jQuery), \u0111i\u1ec1u n\u00e0y gi\u00fap \u0111\u1ea3m b\u1ea3o r\u1eb1ng jQuery s\u1ebd \u0111\u01b0\u1ee3c g\u1ecdi tr\u01b0\u1edbc c\u00e1c script ph\u1ee5 thu\u1ed9c v\u00e0o n\u00f3.<\/p>\n\n\n

Chi\u1ebfn l\u01b0\u1ee3c t\u1ed1t l\u00e0 \u01b0u ti\u00ean s\u1eed d\u1ee5ng async<\/em> khi c\u00f3 th\u1ec3, v\u00e0 s\u1eed d\u1ee5ng defer<\/em> n\u1ebfu async<\/em> kh\u00f4ng ph\u00f9 h\u1ee3p.<\/p>\n\n\n

L\u01b0u \u00fd: c\u1ea3 hai thu\u1ed9c t\u00ednh kh\u00f4ng c\u00f3 b\u1ea5t k\u1ef3 \u1ea3nh h\u01b0\u1edfng n\u00e0o \u0111\u1ed1i v\u1edbi c\u00e1c script n\u1ed9i tuy\u1ebfn (inline).<\/p>\n\n\n

(D\u1ecbch t\u1eeb b\u00e0i vi\u1ebft: Eliminate Render-Blocking JavaScript with Async and Defer tr\u00ean trang Alligator)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

V\u1edbi HTML5, ch\u00fang ta c\u00f3 hai thu\u1ed9c t\u00ednh boolean m\u1edbi cho th\u1ebb <script> l\u00e0: async v\u00e0 defer. Async cho ph\u00e9p th\u1ef1c thi c\u00e1c \u0111o\u1ea1n m\u00e3 kh\u00f4ng \u0111\u1ed3ng b\u1ed9 v\u00e0 defer cho ph\u00e9p th\u1ef1c thi ch\u1ec9 khi to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) xong. \u0110\u00e2y l\u00e0 hai thu\u1ed9c t\u00ednh b\u1eaft bu\u1ed9c n\u1ebfu …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[272],"tags":[],"yoast_head":"\nLo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer • Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/javascript-async-defer\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"V\u1edbi HTML5, ch\u00fang ta c\u00f3 hai thu\u1ed9c t\u00ednh boolean m\u1edbi cho th\u1ebb <script> l\u00e0: async v\u00e0 defer. Async cho ph\u00e9p th\u1ef1c thi c\u00e1c \u0111o\u1ea1n m\u00e3 kh\u00f4ng \u0111\u1ed3ng b\u1ed9 v\u00e0 defer cho ph\u00e9p th\u1ef1c thi ch\u1ec9 khi to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) xong. \u0110\u00e2y l\u00e0 hai thu\u1ed9c t\u00ednh b\u1eaft bu\u1ed9c n\u1ebfu …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/javascript-async-defer\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-12T15:46:01+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer • 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\/javascript-async-defer\/","og_locale":"vi_VN","og_type":"article","og_title":"Lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer • Ki\u1ebfn c\u00e0ng","og_description":"V\u1edbi HTML5, ch\u00fang ta c\u00f3 hai thu\u1ed9c t\u00ednh boolean m\u1edbi cho th\u1ebb <script> l\u00e0: async v\u00e0 defer. Async cho ph\u00e9p th\u1ef1c thi c\u00e1c \u0111o\u1ea1n m\u00e3 kh\u00f4ng \u0111\u1ed3ng b\u1ed9 v\u00e0 defer cho ph\u00e9p th\u1ef1c thi ch\u1ec9 khi to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u \u0111\u01b0\u1ee3c ph\u00e2n t\u00edch c\u00fa ph\u00e1p (parse) xong. \u0110\u00e2y l\u00e0 hai thu\u1ed9c t\u00ednh b\u1eaft bu\u1ed9c n\u1ebfu …","og_url":"https:\/\/kiencang.net\/javascript-async-defer\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2019-12-12T15:46:01+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"2 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/javascript-async-defer\/","url":"https:\/\/kiencang.net\/javascript-async-defer\/","name":"Lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2019-12-12T15:46:01+00:00","dateModified":"2019-12-12T15:46:01+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/javascript-async-defer\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/javascript-async-defer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/javascript-async-defer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"Lo\u1ea1i b\u1ecf JavaScript ch\u1eb7n hi\u1ec3n th\u1ecb v\u1edbi Async v\u00e0 Defer"}]},{"@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\/13927"}],"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=13927"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/13927\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=13927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=13927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=13927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}