How exactly does script defer defer work

Question

I have a few  lt script gt  elements  and the code in some of them depend on code in other  lt script gt  elements  I saw the defer attribute can come in handy here as it allows code blocks to be postponed in execution   To test it I executed this on Chrome  http   jsfiddle net xXZMN     lt script defer  defer  gt alert 2   lt  script gt   lt script gt alert 1  lt  script gt   lt script defer  defer  gt alert 3   lt  script gt    However  it alerts 2 - 1 - 3  Why doesn t it alert 1 - 2 - 3

User · Answer

The defer attribute is a boolean attribute.

When present, it specifies that the script is executed when the page has finished parsing.

Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

Note: There are several ways an external script can be executed:

If async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing) If async is not present and defer is present: The script is executed when the page has finished parsing If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

User · Answer

Should be also noted that there might be problems in IE lt  9 when using script defer in certain situations  More on this  https   github com h5bp lazyweb-requests issues 42

User · Answer

UPDATED  2 19 2016  Consider this answer outdated  Refer to other answers on this post for information relevant to newer browser version     Basically  defer tells the browser to wait  until it s ready  before executing the javascript in that script block   Usually this is after the DOM has finished loading and document readyState    4  The defer attribute is specific to internet explorer  In Internet Explorer 8  on Windows 7 the result I am seeing in your JS Fiddle test page is  1 - 2 - 3   The results may vary from browser to browser   http   msdn microsoft com en-us library ms533719 v vs 85  aspx  Contrary to popular belief IE follows standards more often than people let on  in actuality the  defer  attribute is defined in the DOM Level 1 spec http   www w3 org TR REC-DOM-Level-1 level-one-html html   The W3C s definition of defer  http   www w3 org TR REC-html40 interact scripts html adef-defer    When set  this boolean attribute provides a hint to the user agent that the script is not going to generate any document content  e g   no  document write  in javascript  and thus  the user agent can continue parsing and rendering

User · Answer

Have a look at this excellent article Deep dive into the murky waters of script loading by the Google developer Jake Archibald written in 2013  Quoting the relevant section from that article   Defer  lt script src  quot   other-domain com 1 js quot  defer gt  lt  script gt   lt script src  quot 2 js quot  defer gt  lt  script gt   Spec says  Download together  execute in order just before DOMContentLoaded  Ignore    defer    on scripts without    src     IE  lt  10 says  I might execute 2 js halfway through the execution of 1 js  Isn   t that fun   The browsers in red say  I have no idea what this    defer    thing is  I   m going to load the scripts as if it weren   t there  Other browsers say  Ok  but I might not ignore    defer    on scripts without    src       I ll add that early versions of Firefox trigger DOMContentLoaded before the defer scripts finish running  according to this comment   Modern browsers seem to support async properly  but you need to be OK with scripts running out of order and possibly before DOMContentLoaded

User · Answer

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed  Since this feature hasn t yet been implemented by all other major browsers  authors should not assume that the script   s execution will actually be deferred  Never call document write   from a defer script  since Gecko 1 9 2  this will blow away the document   The defer attribute shouldn t be used on scripts that don t have the src attribute  Since Gecko 1 9 2  the defer attribute is ignored on scripts that don t have the src attribute  However  in Gecko 1 9 1 even inline scripts are deferred if the defer attribute is set   defer works with chrome   firefox   ie   7 and Safari     ref  https   developer mozilla org en-US docs HTML Element script

User · Answer

defer can only be used in  lt script gt  tag for external script inclusion  Hence it is advised to be used in the  lt script gt -tags in the  lt head gt -section

User · Answer

As defer attribute works only with scripts tag with src  Found a way to mimic defer for inline scripts  Use DOMContentLoaded event    lt script defer src  external-script js  gt  lt  script gt   lt script gt  document addEventListener  DOMContentLoaded   function event           Your inline scripts which uses methods from external-scripts       lt  script gt    This is because  DOMContentLoaded event fires after defer attributed scripts are completely loaded

User · Answer

The defer attribute is only for external scripts  should only be used if the src attribute is present

User · Answer

A few snippets from the HTML5 spec  http   w3c github io html semantics-scripting html element-attrdef-script-async     The defer and async attributes must   not be specified if the src attribute   is not present         There are three possible modes that   can be selected using these   attributes  async and defer   If the async attribute is   present  then the script will be   executed asynchronously  as soon as it   is available  If the async attribute   is not present but the defer attribute   is present  then the script is   executed when the page has finished   parsing  If neither attribute is   present  then the script is fetched   and executed immediately  before the   user agent continues parsing the page         The exact processing details for these   attributes are  for mostly historical   reasons  somewhat non-trivial    involving a number of aspects of HTML    The implementation requirements are   therefore by necessity scattered   throughout the specification  The   algorithms below  in this section    describe the core of this processing    but these algorithms reference and are   referenced by the parsing rules for   script start and end tags in HTML  in   foreign content  and in XML  the rules   for the document write   method  the   handling of scripting  etc         If the element has a src attribute    and the element has a defer attribute    and the element has been flagged as    parser-inserted   and the element   does not have an async attribute       The element must be added to the end of the list of scripts that will   execute when the document has finished   parsing associated with the Document   of the parser that created the   element

User · Answer

The real answer is  Because you cannot trust defer   In concept  defer and async differ as follows   async allows the script to be downloaded in the background without blocking  Then  the moment it finishes downloading  rendering is blocked and that script executes  Render resumes when the script has executed   defer does the same thing  except claims to guarantee that scripts execute in the order they were specified on the page  and that they will be executed after the document has finished parsing  So  some scripts may finish downloading then sit and wait for scripts that downloaded later but appeared before them   Unfortunately  due to what is really a standards cat fight  defer s definition varies spec to spec  and even in the most recent specs doesn t offer a useful guarantee  As answers here and this issue demonstrate  browsers implement defer differently    In certain situations some browsers have a bug that causes defer scripts to run out of order  Some browsers delay the DOMContentLoaded event until after the defer scripts have loaded  and some don t  Some browsers obey defer on  lt script gt  elements with inline code and without a src attribute  and some ignore it    Fortunately the spec does at least specify that async overrides defer  So you can treat all scripts as async and get a wide swath of browser support like so    lt script defer async src       gt  lt  script gt    98  of browsers in use worldwide and 99  in the US will avoid blocking with this approach    If you need to wait until the document has finished parsing  listen to the event DOMContentLoaded event or use jQuery s handy  ready   function  You d want to do this anyway to fall back gracefully on browsers that don t implement defer at all

[javascript] How exactly does <script defer="defer"> work?

Examples related to javascript

Examples related to html

Examples related to deferred-execution