Why does loading of an external "async defer" javascript code happen before page load?

by Tom   Last Updated June 01, 2016 08:01 AM

Recaptcha recommends loading of its script like this:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

I added this to the head section of the html document and checked with Chrome when it is loaded. Chrome says it is loaded before page load (the network tab of chrome devtools indicates the end of the page load with a vertical red line and the above script is loaded before that.

Why is that? Shouldn't adding async defer as recommended by google defer loading of the script after page load?

Answers 1

The page is only fully loaded when all linked resources (including <script async defer) have loaded. This is when the onload event fires.

However, the DOMContentLoaded event is likely to fire before this - which will probably be before the async defer scripts have loaded. (I say "probably" - if the browser is able to determine that it can load the script in another thread at the same time without slowing things down then I guess it probably will; but with no guarantee.)

May 31, 2016 15:54 PM

Related Questions

Page loading problem very slow response time

Updated June 12, 2015 11:01 AM

Improve load speed of web page on mobile devices

Updated April 25, 2019 18:04 PM