{"data":{"site":{"siteMetadata":{"title":"Lime Brains","description":"We are The Software House where business questions meet software answers.","url":"https://limebrains.com"}},"markdownRemark":{"html":"<h1>Problem 😱</h1>\n<p>You want to add script tag. But when to add specific attribute?</p>\n<hr>\n<h1>Solution 🤓</h1>\n<p><img src=\"http://www.growingwiththeweb.com/images/2014/02/26/legend.svg\" alt=\"legend\"></p>\n<p><code class=\"language-text\">&lt;script></code></p>\n<p>Let’s start by defining what <code class=\"language-text\">&lt;script></code> without any attributes does.\nThe HTML file will be parsed until the script file is hit,\nat that point parsing will stop and a request will be made to fetch the file (if it’s external).\nThe script will then be executed before parsing is resumed.</p>\n<p><img src=\"http://www.growingwiththeweb.com/images/2014/02/26/script.svg\" alt=\"legend\"></p>\n<p><code class=\"language-text\">&lt;script async></code></p>\n<p>async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.</p>\n<p><img src=\"http://www.growingwiththeweb.com/images/2014/02/26/script-async.svg\" alt=\"legend\"></p>\n<p><code class=\"language-text\">&lt;script defer></code></p>\n<p>defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.</p>\n<p><img src=\"http://www.growingwiththeweb.com/images/2014/02/26/script-defer.svg\" alt=\"legend\"></p>\n<h1>When should I use what?</h1>\n<p>Typically you want to use async where possible, then defer then no attribute. </p>\n<p>Here are some general rules to follow:</p>\n<ul>\n<li>\n<p>If the script is modular and does not rely on any scripts then use async.</p>\n</li>\n<li>\n<p>If the script relies upon or is relied upon by another script then use defer.</p>\n</li>\n<li>\n<p>If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.</p>\n</li>\n</ul>\n<h2>References:</h2>\n<ul>\n<li>[1] <a href=\"https://github.com/h5bp/lazyweb-requests/issues/42\">https://github.com/h5bp/lazyweb-requests/issues/42</a></li>\n<li>[2] <a href=\"http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html\">http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html</a></li>\n</ul>","excerpt":"Problem 😱 You want to add script tag. But when to add specific attribute? Solution 🤓 Let’s start by defining what   without any attributes…","frontmatter":{"title":"When to use async defer or no atribute on script tag?","subtitle":"When to use async defer or no atribute on script tag?","date":"2017-10-27 18:50","seo":{"title":"When to use async defer or no atribute on script tag?","description":"When to use async defer or no atribute on script tag?","noindex":false}},"fields":{"slug":"/blog/2017-10-27T18:50-script-async-defer-other/"}}},"pageContext":{"slug":"/blog/2017-10-27T18:50-script-async-defer-other/","indexable":false}}