{"id":13604,"date":"2022-03-17T10:58:51","date_gmt":"2022-03-17T10:58:51","guid":{"rendered":"http:\/\/www.max-sperling.bplaced.net\/?p=13604"},"modified":"2024-02-16T10:46:57","modified_gmt":"2024-02-16T10:46:57","slug":"sync-vs-defer-vs-async-js","status":"publish","type":"post","link":"http:\/\/www.max-sperling.bplaced.net\/?p=13604","title":{"rendered":"Script tag attributes (JS)"},"content":{"rendered":"

Sync<\/strong> (without keyword)
\nIf during HTML parsing a JS element is found, the parsing gets stopped until the script is (downloaded and) executed.<\/p>\n

– If it relies on the HTML DOM, then put it at the end of the <body>.<\/p>\n

\r\n<script src="\/path\/to\/script.js"><\/script>\r\n<\/pre>\n
<\/p>\n
Async<\/strong>
\nIf during HTML parsing a JS element is found, (the script gets downloaded in parallel but) its execution blocks the parsing if not finished then.<\/p>\n
– They don’t block the DOMContentLoaded, but the window.onload event.<\/p>\n
\r\n<script src="\/path\/to\/script.js" async><\/script>\r\n<\/pre>\n
<\/p>\n
Defer<\/strong>
\nIf during HTML parsing a JS element is found, (the script gets downloaded in parallel but) its execution happens just after the parsing is finished.<\/p>\n
– They are getting executed before the DOMContentLoaded event gets fired.
\n– The scripts are executed in the order they occur in the HTML document.<\/p>\n
\r\n<script src="\/path\/to\/script.js" defer><\/script>\r\n<\/pre>\n
<\/p>\n
<\/p>\n
\n
Usage<\/strong>
\nPrefer async over defer over sync, if possible.<\/p>\n
– Use async if the script isn’t relying on other scripts1<\/sup> or the HTML DOM.
\n– Use defer if the script is relying on other scripts2<\/sup> or the HTML DOM.
\n– Use sync if async scripts rely on it or the browser isn’t supporting async\/defer.<\/p>\n
1<\/sup> Execpt sync scripts placed before it.
\n2<\/sup> Except async scripts of course. \ud83d\ude42<\/p>\n
\n
Source: Growing with the web<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Sync (without keyword) If during HTML parsing a JS element is found, the parsing gets stopped until the script is<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false},"categories":[55],"tags":[],"_links":{"self":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/13604"}],"collection":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13604"}],"version-history":[{"count":1,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/13604\/revisions"}],"predecessor-version":[{"id":16829,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=\/wp\/v2\/posts\/13604\/revisions\/16829"}],"wp:attachment":[{"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13604"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.max-sperling.bplaced.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}