Script Tag - async defer

Question

I have a couple of questions about the attributes async  amp  defer for the  lt script gt  tag which to my understanding only work in HTML5 browsers  One of my sites has two external JavaScript files that currently sit just above the  lt  body gt  tag  the first is jquery sourced from google and the second is a local external script  With respects to site load speed  Is there any advantage in adding async to the two scripts I have at the bottom of the page   Would there be any advantage in adding the async option to the two scripts and putting them at the top of the page in the  lt head gt    Would this mean they download as the page loads   I assume this would cause delays for HTML4 browsers  but would it speed up page load for HTML5 browsers    Using  lt script defer src      Would loading the two scripts inside   lt head gt  with the attribute defer the same affect as having the scripts before  lt  body gt   Once again I assume this would slow up HTML4 browsers   Using  lt script async src     If I have two scripts with async enabled  Would they download at the same time  Or one at a time with the rest of the page  Does the order of scripts then become a problem  For example one script depends on the other so if one downloads faster  the second one might not execute correctly etc   Finally am I best to leave things as they are until HTML5 is more commonly used

User · Answer

This image explains normal script tag  async and defer      Async scripts are executed as soon as the script is loaded  so it doesn t guarantee the order of execution  a script you included at the end may execute before the first script file   Defer scripts guarantees the order of execution in which they appear in the page    Ref this link   http   www growingwiththeweb com 2014 02 async-vs-defer-attributes html

User · Answer

I think Jake Archibald presented us some insights back in 2013 that might add even more positiveness to the topic   https   www html5rocks com en tutorials speed script-loading      The holy grail is having a set of scripts download immediately without blocking rendering and execute as soon as possible in the order they were added  Unfortunately HTML hates you and won   t let you do that                  The answer is actually in the HTML5 spec  although it   s hidden away at the bottom of the script-loading section     The async IDL attribute controls whether the element will execute asynchronously or not  If the element s  force-async  flag is set  then  on getting  the async IDL attribute must return true  and on setting  the  force-async  flag must first be unset                      Scripts that are dynamically created and added to the document are async by default  they don   t block rendering and execute as soon as they download  meaning they could come out in the wrong order  However  we can explicitly mark them as not async             other-domain com 1 js        2 js    forEach function src        var script   document createElement  script        script src   src      script async   false      document head appendChild script            This gives our scripts a mix of behaviour that can   t be achieved with plain HTML  By being explicitly not async  scripts are added to an execution queue  the same queue they   re added to in our first plain-HTML example  However  by being dynamically created  they   re executed outside of document parsing  so rendering isn   t blocked while they   re downloaded  don   t confuse not-async script loading with sync XHR  which is never a good thing        The script above should be included inline in the head of pages  queueing script downloads as soon as possible without disrupting progressive rendering  and executes as soon as possible in the order you specified     2 js    is free to download before    1 js     but it won   t be executed until    1 js    has either successfully downloaded and executed  or fails to do either  Hurrah  async-download but ordered-execution    Still  this might not be the fastest way to load scripts            With the example above the browser has to parse and execute script to discover which scripts to download  This hides your scripts from preload scanners  Browsers use these scanners to discover resources on pages you   re likely to visit next  or discover page resources while the parser is blocked by another resource       We can add discoverability back in by putting this in the head of the document     lt link rel  subresource  href    other-domain com 1 js  gt   lt link rel  subresource  href  2 js  gt       This tells the browser the page needs 1 js and 2 js  link rel subresource  is similar to link rel prefetch   but with different semantics  Unfortunately it   s currently only supported in Chrome  and you have to declare which scripts to load twice  once via link elements  and again in your script       Correction  I originally stated these were picked up by the preload scanner  they re not  they re picked up by the regular parser  However  preload scanner could pick these up  it just doesn t yet  whereas scripts included by executable code can never be preloaded  Thanks to Yoav Weiss who corrected me in the comments

User · Answer

Async is suitable if your script doesn   t contains DOM manipulation and other scripts doesn   t depend upon on this  Eg  bootstrap cdn jquery Defer is suitable if your script contains DOM manipulation and other scripts depend upon on this  Eg     lt script src    createfirst js    gt    let this will create element    lt script src    showfirst js    gt    after createfirst create element it will show that  Thus make it  Eg     lt script defer src    createfirst js    gt    let this will create element  lt script defer src    showfirst js    gt    after createfirst create element it will  This will execute scripts in order  But if i made  Eg      lt script async src    createfirst js    gt    let this will create element  lt script defer src    showfirst js    gt    after createfirst create element it will Then  this code might result unexpected results  Coz  if html parser access createfirst script It won   t stop DOM creation and starts downloading code from src  Once src got resolved code got downloaded  it will execute immediately parallel with DOM  What if showfirst js execute first than createfirst js This might be possible if createfirst takes long time  Assume after DOM parsing finished  Then  showfirst will execute immediately

User · Answer

Rendering engine goes several steps till it paints anything on the screen  it looks like this   Converting HTML bytes to characters depending on encoding we set to the document  Tokens are created according to characters  Tokens mean analyze characters and specify opening tangs and nested tags  From tokens separated nodes are created  they are objects and according to information delivered from tokenization process  engine creates objects which includes all necessary information about each node  after that DOM is created  DOM is tree data structure and represents whole hierarchy and information about relationship and specification of tags   The same process goes to CSS  for CSS rendering engine creates different separated data structure for CSS but it s called CSSOM  CSS Object Model  Browser works only with Object models so it needs to know all information about DOM and CSSDOM  The next step is combining somehow DOM and CSSOM  because without CSSOM browser do not know how to style each element during rendering process  All information above means that  anything you provide in your html  javascript  css   browser will pause DOM construction process  If you are familiar with event loop  there is simple rule how event loop executes tasks   Execute macro tasks  execute micro tasks  Rendering   So when you provide Javascript file  browser do not know what JS code is going to do and stops all DOM construction process and Javascript interptreter starts parsing and executing Javascript code  Even you provide Javascript in the end of body tag  Browser will proceed all above steps to HTML and CSS but except rendering  it will find out Script tag and will stop until JS is done  But HTML provided two additional options for script tag  async and defer  Async - means execute code when it is downloaded and do not block DOM construction during downloading process  Defer - means execute code after it s downloaded and browser finished DOM construction and rendering process

User · Answer

HTML5  async  defer  In HTML5  you can tell browser when to run your JavaScript code  There are 3 possibilities    lt script       src  myscript js  gt  lt  script gt    lt script async src  myscript js  gt  lt  script gt    lt script defer src  myscript js  gt  lt  script gt     Without async or defer  browser will run your script immediately  before rendering the elements that s below your script tag  With async  asynchronous   browser will continue to load the HTML page and render it while the browser load and execute the script at the same time  With defer  browser will run your script when the page finished parsing   not necessary finishing downloading all image files  This is good

User · Answer

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script   The difference between async and defer centers around when the script is executed  Each async script executes at the first opportunity after it is finished downloading and before the window   s load event  This means it   s possible  and likely  that async scripts are not executed in the order in which they occur in the page  Whereas the defer scripts  on the other hand  are guaranteed to be executed in the order they occur in the page  That execution starts after parsing is completely finished  but before the document   s DOMContentLoaded event   Source  amp  further details  here

User · Answer

Faced same kind of problem and now clearly understood how both will works Hope this reference link will be helpful      Async  When you add the async attribute to your script tag  the fol  low  ing will happen    lt script src  myfile1 js  async gt  lt  script gt   lt script src  myfile2 js  async gt  lt  script gt     Make par  al  lel requests to fetch the files  Con  tinue pars  ing the doc  u  ment as if it was never interrupted  Exe  cute the indi  vid  ual scripts the moment the files are downloaded    Defer  Defer is very sim  i  lar to async with one major dif  fer  er  ence  Here   s what hap  pens when a browser encoun  ters a script with the defer attribute    lt script src  myfile1 js  defer gt  lt  script gt   lt script src  myfile2 js  defer gt  lt  script gt     Make par  al  lel requests to fetch the indi  vid  ual files  Con  tinue pars  ing the doc  u  ment as if it was never interrupted  Fin  ish pars  ing the doc  u  ment even if the script files have downloaded  Exe  cute each script in the order they were encoun  tered in the document    Reference  Difference between Async and Defer

User · Answer

Keep your scripts right before  lt  body gt    Async can be used with scripts located there in a few circumstances  see discussion below    Defer won t make much of a difference for scripts located there because the DOM parsing work has pretty much already been done anyway   Here s an article that explains the difference between async and defer  http   peter sh experiments asynchronous-and-deferred-javascript-execution-explained    Your HTML will display quicker in older browsers if you keep the scripts at the end of the body right before  lt  body gt    So  to preserve the load speed in older browsers  you don t want to put them anywhere else   If your second script depends upon the first script  e g  your second script uses the jQuery loaded in the first script   then you can t make them async without additional code to control execution order  but you can make them defer because defer scripts will still be executed in order  just not until after the document has been parsed   If you have that code and you don t need the scripts to run right away  you can make them async or defer    You could put the scripts in the  lt head gt  tag and set them to defer and the loading of the scripts will be deferred until the DOM has been parsed and that will get fast page display in new browsers that support defer  but it won t help you at all in older browsers and it isn t really any faster than just putting the scripts right before  lt  body gt  which works in all browsers   So  you can see why it s just best to put them right before  lt  body gt    Async is more useful when you really don t care when the script loads and nothing else that is user dependent depends upon that script loading   The most often cited example for using async is an analytics script like Google Analytics that you don t want anything to wait for and it s not urgent to run soon and it stands alone so nothing else depends upon it     Usually the jQuery library is not a good candidate for async because other scripts depend upon it and you want to install event handlers so your page can start responding to user events and you may need to run some jQuery-based initialization code to establish the initial state of the page   It can be used async  but other scripts will have to be coded to not execute until jQuery is loaded

User · Answer

async and defer will download the file during HTML parsing  Both will not interrupt the parser   The script with async attribute will be executed once it is downloaded  While the script with defer attribute will be executed after completing the DOM parsing   The scripts loaded with async doesn t guarantee any order  While the scripts loaded with defer attribute maintains the order in which they appear on the DOM    Use  lt script async gt  when the script does not rely on anything  when the script depends use  lt script defer gt   Best solution would be add the  lt script gt  at the bottom of the body  There will be no issue with blocking or rendering

User · Answer

It seems the behavior of defer and async is browser dependent  at least on the execution phase  NOTE  defer only applies to external scripts   I m assuming async follows same pattern    In IE 11 and below  the order seems to be like this    async  could partially execute while page loading  none  could execute while page loading  defer  executes after page loaded  all defer in order of placement in file    In Edge  Webkit  etc  the async attribute seems to be either ignored or placed at the end    data-pagespeed-no-defer  executes before any other scripts  while page is loading  none  could execute while page is loading  defer  waits until DOM loaded  all defer in order of placement in file  async  seems to wait until DOM loaded    In newer browsers  the data-pagespeed-no-defer attribute runs before any other external scripts   This is for scripts that don t depend on the DOM   NOTE  Use defer when you need an explicit order of execution of your external scripts   This tells the browser to execute all deferred scripts in order of placement in the file   ASIDE  The size of the external javascripts did matter when loading   but had no effect on the order of execution   If you re worried about the performance of your scripts  you may want to consider minification or simply loading them dynamically with an XMLHttpRequest

[javascript] Script Tag - async & defer

Examples related to javascript

Examples related to html