[wp-trac] [WordPress Trac] #12009: Add support for HTML 5 "async" and "defer" attributes

[WordPress Trac]

#12009: Add support for HTML 5 "async" and "defer" attributes
---------------------------+-----------------------------
 Reporter:  Otto42         |       Owner:  azaozz
     Type:  enhancement    |      Status:  reopened
 Priority:  normal         |   Milestone:  Future Release
Component:  Script Loader  |     Version:  4.6
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:
---------------------------+-----------------------------

Comment (by azaozz):

 Quick tl;dr to get everybody on the same page (I know this repeats a lot
 of stuff, but may make it easier to understand this ticket):

 Main functionality of Script Loader:

 - Manage loading order. When a script tag is outputted, make sure all of
 its dependencies are outputted before it. When scripts are concatenated,
 reorder them so dependencies are before dependents.
 - Concatenate outputting of the default scripts in production. This is a
 really nice speed increase for HTTP/1.1, but doesn't make difference for
 HTTP/2.

 Additional functionality:
 - List all default scripts and their dependencies.
 - Allow plugins to add scripts to that list and use the default scripts as
 dependencies.
 - Support outputting of inline scripts before and after each script.
 (That's mostly used to add translation strings or settings before a script
 is outputted, or for things like `jQuery.noConflict()` after a script.)

 In these terms:
 - Adding `async` to a script tag makes the script incompatible with Script
 Loader:
  - Cannot have dependencies.
  - Cannot be used as a dependency for other scripts.
  - Can be concatenated with other scripts only if all scripts have
 `async`. Then the script tag for the combined scripts will also have
 `async`.
 - Adding `defer` makes a script partially incompatible with Script Loader:
  - Can have dependencies.
  - Can be used as a dependency for other scripts but only if the other
 scripts also have `defer`.
  - Can be concatenated with other scripts only if all of the scripts have
 `defer`. Then the tag for the concatenated scripts will also have `defer`.

 In order to support the `async` and `defer` attributes in Script Loader
 the following logic has to be added:

 1. Generally it doesn't make sense to have scripts with `async`. They
 cannot be used as dependencies when managing the load order, and won't
 gain anything by being part of Script Loader. Following the best practices
 (mentioned in previous comments), scripts with `async` should be outputted
 individually in the HTML head.

 2. Scripts with `defer` can be added to Script Loader but will need some
 additional logic when processing the dependencies.
  - It doesn't make sense to add `defer` to the default scripts that may be
 used as dependencies (that's most of them). The reason is that in
 production where scripts are concatenated `defer` can only be used when
 all concatenated scripts have it.
  - Default scripts that are not used as dependencies can have `defer`.
 However they cannot be concatenated, will have to be outputted separately.
  - Scripts added by plugins can have `defer` if they are not used as
 dependencies, or when all of their dependencies also have `defer`.
  - The inline scripts that are outputted "after" will also need the
 `defer` attribute. It would be nice to also add `defer` to the "before"
 scripts but that's not critical.

 A possible way to support `defer` would be to split the footer queue in
 two then concatenate and output the scripts without `defer`, and then
 either output the scripts with `defer` individually or concatenate them
 and output them in another script tag.

 However Script Loader won't be able to output the deferred scripts in the
 HTML head. In some cases scripts may e added to the footer queue mid-page.
 When that happens, and the script doesn't have `defer`, and one of its
 dependencies is already outputted in the head with `defer`, the script
 will most likely fail to initialize correctly.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/12009#comment:75>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform