Magento2: requirejs/domReady.js can severely delay rendering of content

[DrewML]

Preconditions (*)

1. Have a store running with an optimal Varnish setup (aka be fast to flush the HTML from the server)
2. Use a handler registered with requirejs/domReady.js to render some content on the page. As an example, the Private Content feature of Magento works this way, so a default Luma setup is ready to go.

I haven't tested, but I assume this problem does not exist if bundling has been used. When bundling, domReady.js will be in a bundle loaded synchronously, so DOMContentLoaded will always fire _after_.

Steps to reproduce (*)

1. In the initial HTML for any page, add a non-blocking resource (async script/img/etc), and make sure the file is served with a severe delay (10+ seconds). <img src="https://httpstat.us/404?sleep=10000" /> can be used for testing. This is done to simulate real-world delays that can happen with 3rd party content
2. Navigate to the page the 3rd party content (with the simulated delay) has been added to

Note that, after refreshing the page several times, sometimes (race condition) the private content does not render until 10+ seconds have passed.

Expected result (*)

I expect domReady.js to invoke its registered handlers at either of the following times (whichever is observed first):

• When the DOMContentLoaded event is fired on the document
• When document.readyState !== 'loading'

The problem right now is that, if domReady.js loads/executes _after_ the DOMContentLoaded event has been fired on the document, the code falls back to waiting for the load event. This is _bad_, and was a hack for older versions of IE to avoid doing browser sniffing.

We should basically borrow jQuery's implementation of this, as we know it's supported by all our target browsers. We should _not_ import jQuery into domReady.js, though. Just copy/paste the implementation (few LOC).

Actual result (*)

If domReady.js loads and executes _after_ DOMContentLoaded has already fired, registered handlers will not be invoked until every pending request for a resource has completed. This includes requests for non-critical, 3rd party resources.

Example

What scripts/content get delayed currently by this?

• Any x-magento-init or data-mage-init widgets (because mage/bootstrap.js depends on KnockoutJS, which waits with the domReady! plugin)
• Anything rendering with KnockoutJS
• Form Key handling
• Some responsive functionality on Product/Catalog/Checkout pages
• Private Content

Additional Info

This problem is still present in the latest version of requirejs/domReady, to support browsers that Magento does not support.

As requirejs/domReady.js is from an older library that really doesn't change much, and is a small amount of code, I'm comfortable with us basically forking the domReady loader here and changing the logic inline.

[m2-assistant[bot]]

Hi @DrewML. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• [x] Summary of the issue
• [x] Information on your environment
• [x] Steps to reproduce
• [x] Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento-engcom-team give me 2.3-develop instance - upcoming 2.3.x release

For more details, please, review the Magento Contributor Assistant documentation.

@DrewML do you confirm that you were able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• [x] yes
• [ ] no

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[kandy]

Looks like it enough to change
https://github.com/magento/magento2/blob/211dd25c73bb2539c3c064374d9d5649f253fd14/lib/web/requirejs/domReady.js#L92

if ( document.readyState !== "loading") {

I don't see any other different compare to https://github.com/jquery/jquery/blob/master/src/core/ready.js

[DrewML]

@kandy Pretty much!

[magento-engcom-team]

@dmanners Thank you for verifying the issue.

Unfortunately, not enough information was provided to acknowledge ticket. Please consider adding the following:

• [ ] Add "Component: " label(s) to this ticket based on verification result. If uncertain, you may follow the best guess
• [ ] Add "Reproduced on " label(s) to this ticket based on verification result

Once all required information is added, please add label "Issue: Confirmed" again.
Thanks!

[magento-engcom-team]

@dmanners Thank you for verifying the issue.

Unfortunately, not enough information was provided to acknowledge ticket. Please consider adding the following:

• [ ] Add "Component: " label(s) to this ticket based on verification result. If uncertain, you may follow the best guess

Once all required information is added, please add label "Issue: Confirmed" again.
Thanks!

[magento-engcom-team]

:white_check_mark: Confirmed by @dmanners
Thank you for verifying the issue. Based on the provided information internal tickets MC-17563 were created

Issue Available: @dmanners, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[m2-assistant[bot]]

Hi @johnhughes1984. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• [ ] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [ ] 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 3. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 4. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[ihor-sviziev]

This issue wasn't fixed yet, so re-opened

[magento-engcom-team]

@ihor-sviziev Thank you for verifying the issue.

Unfortunately, not enough information was provided to acknowledge ticket. Please consider adding the following:

• [x] Add "Reproduced on " label(s) to this ticket based on verification result

Once all required information is added, please add label "Issue: Confirmed" again.
Thanks!

[magento-engcom-team]

:white_check_mark: Confirmed by @ihor-sviziev
Thank you for verifying the issue. Based on the provided information internal tickets MC-17563 were created

Issue Available: @ihor-sviziev, _You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself._

[m2-assistant[bot]]

Hi @ihor-sviziev. Thank you for working on this issue.
Looks like this issue is already verified and confirmed. But if you want to validate it one more time, please, go though the following instruction:

• [x] 1. Add/Edit Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [x] 2. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!

• [ ] 3. If the issue is not relevant or is not reproducible any more, feel free to close it.

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[magento-engcom-team]

Hi @DrewML, @johnhughes1984.

Thank you for your report and collaboration!

The issue was fixed by Magento team. The fix was delivered into magento/magento2:2.3-develop branch(es).
Related commit(s):

• 228cb75df6f9804f66aa2377262050c67bfa4ba2

The fix will be available with the upcoming 2.3.5 release.

[krzksz]

Closing as fixed via https://github.com/magento/magento2/pull/23313