Hi there,

Problem/Motivation

When we add the attribute { async : true } in a js libraries, the script tag resulting in HTML source get the async attribute. That is very helpfull to optimize pageload speed when the library is not necessary for first render. When doing that, the custom behaviors are randomly executed due to the moment where domready is called, the browser, etc.
Firefox execute it some times, Chromium never, and so on.
I would like to write js behaviors capable to be ran on synchronous or asynchronous libs.

Proposed resolution

I propose to add an eventListener on async (and defer ?) script tags to execute Drupal.attachBehaviors() on asynchronous scripts too.
No sure what's the best place to do it, the patch proposes to insert it on drupal.init.js

CommentFileSizeAuthor
#24 core-3085197-24.patch854 bytesmloyat
#21 core-3085197-21.patch833 bytesnod_
#20 3085197-20.patch572 bytesshivam-kumar
#18 3085197-18.patch548 bytes_utsavsharma
#16 interdiff_15-16.txt940 bytespradhumanjain2311
#16 3085197-16.patch799 bytespradhumanjain2311
#15 reroll_diff_14-15.txt1.29 KBakram khan
#15 3085197-15.patch765 bytesakram khan
#14 3085197-14.patch785 bytesakram khan
#7 async-script-attachbehaviors-3085197-7.patch1.63 KBjamesashok
#4 drupal-attachbehaviors-async-script-3085197-4.patch839 bytesmloyat
#2 drupal-attachbehaviors-async-script-3085197-2.patch847 bytesmloyat

Comments

Marc Loyat created an issue. See original summary.

mloyat’s picture

mloyat commented
StatusFileSize
new drupal-attachbehaviors-async-script-3085197-2.patch847 bytes

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

mloyat’s picture

mloyat commented
StatusFileSize
new drupal-attachbehaviors-async-script-3085197-4.patch839 bytes

Adapting to domready deprecation.

mloyat’s picture

mloyat commented
Status: Active » Needs review

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

jamesashok’s picture

jamesashok commented
StatusFileSize
new async-script-attachbehaviors-3085197-7.patch1.63 KB

Modifying existing patch -
Changes made -

  • domready to domReady
  • Updating changes of drupal.init.es6.js to drupal.init.js

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Needs review » Needs work

we don't have .es6.js files anymore.

akram khan’s picture

akram khan
Primary language English
Location Cuttack, Odisha
commented
StatusFileSize
new 3085197-14.patch785 bytes

Created patch for 10.1.x

akram khan’s picture

akram khan
Primary language English
Location Cuttack, Odisha
commented
StatusFileSize
new 3085197-15.patch765 bytes
new reroll_diff_14-15.txt1.29 KB

Trying to Fix CCF and drupal.init.es6.js is remove from 10.1.x
Oops! added wrong file

pradhumanjain2311’s picture

pradhumanjain2311 commented
Status: Needs work » Needs review
StatusFileSize
new 3085197-16.patch799 bytes
new interdiff_15-16.txt940 bytes

Try to fix CCF.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Needs review » Needs work 
  1. +++ b/core/misc/drupal.init.js
@@ -29,6 +29,17 @@ document.documentElement.className += ' js';
-    Drupal.attachBehaviors(document, drupalSettings);

    Here if there is no async script on the page, attachBehaviors is never run :o

    Need to keep this call to not break everything. 

  2. +++ b/core/misc/drupal.init.js
@@ -29,6 +29,17 @@ document.documentElement.className += ' js';
+    const asyncScriptElements = document.querySelectorAll('script[async]');

    Instead of going old school we can do something like 

    
once('async-load', 'script[async]').forEach((el) => el.addEventListener('load', listener));

    or something close to that.

I think just binding to window load would be enough as well if there are async script on the page?

_utsavsharma’s picture

_utsavsharma commented
Status: Needs work » Needs review
StatusFileSize
new 3085197-18.patch548 bytes

Made changes as per the comment #17.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Needs review » Needs work

Thanks but the changes are missing an important part of the patch (the listener function) and it's not keeping the original attachbehavior call.

shivam-kumar’s picture

shivam-kumar commented
StatusFileSize
new 3085197-20.patch572 bytes

Have tried to fix custom command fails and code fixes.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Needs work » Needs review
StatusFileSize
new core-3085197-21.patch833 bytes

Thanks, it seems the code was rerolled without fully getting the different pieces of the patch.

Clean reroll, it's a pretty impacting change so it really needs some tests to make sure we don't have a regressions since core doesn't use that feature itself (which could be a reason why not implementing that in core).

smustgrave’s picture

smustgrave commented
Status: Needs review » Reviewed & tested by the community

Change looks good to me. See the clean tests. Also see your comments about not needing tests here, unless i read that wrong.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Status: Reviewed & tested by the community » Needs work

Wasn't clear it needs test otherwise it'll be really easy to break

mloyat’s picture

mloyat commented
StatusFileSize
new core-3085197-24.patch854 bytes

By the way, the behavior attached to async scripts is called without context nor settings passed as argument.
Is that on purpose ? I think it should to be consistent with first call, but not sure of which context to pass as first argument....

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.