Possible race condition with zxcvbn loader

[dominicp]

The zxcvbn-async.js file is used to load the main zxcvbn.min.js library (presumably because the library is huge and takes a while to load). However, under certain circumstances, the zxcvbn-async.js file may not finish loading before the window.onLoad event fires. If this happens, the main library is never loaded and scripts that depend on it break.

I ran into this when using a script loader that isn't triggered until just before the </body> tag. By that time, there isn't much gap between the time when the loader is requested and the onLoad event fires.

I'm not sure what a good solution would be. The simplest would involve checking the document.readyState, but I know that doesn't have the widest browser support.

[peterwilsoncc]

@dominicp Have you been able to reliably reproduce this issue? I can see how it would happen but having problem triggering it.

Thanks,
Pete

Related #34905

[dominicp]

@peterwilsoncc, thanks for following up. I can reliably reproduce this by using network throttling to simulate a slow connection.

Steps to Reproduce:

• Navigate to a page that loads zxcvbn (I'm using WooCommerce's front-end edit password page, but I have been able to reproduce it in wp-admin/profile.php)
• Using Chrome's dev tools, set the Network Throttling to "Regular 3G, 750kb/s"
• Do a hard refresh (on Windows, Ctrl+F5)
• Try to type in the password field
• In the js console you should see "Uncaught ReferenceError: zxcvbn is not defined"

Granted, network throttling is kind of cheating, but I have seen it come up intermittently without throttling, and we would probably like the script to load reliably on slow connections anyway.

[peterwilsoncc]

Duplicate of #34905.

Thanks,

It looks like this is a duplicate of 34905 and I'll close it as such. I'll look at how Woo and other plugins make use of it to see if a post is needed on the make.wordpress.org blog.