Turnstile should clarify why the script needs defer or async. #23194
Description
Existing documentation URL(s)
What changes are you suggesting?
In the Add the Turnstile widget to your site section you are told that you are supposed to add turnstile with a script html tag like this one:
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>When both, async and defer are specified, async has precedence and defer is only used in browsers that don't support async.
Then, in the Explicitly render the Turnstile widget section, you have this:
<script
src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
defer
></script>Apparently we don't need async in this case? But if instead of ?onload=onloadTurnstileCallback we passed ?render=explicit, then we don't even need defer either?
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>My understanding is that defer should be necessary when using implicit rendering to make sure the script runs after the document has been parsed so the turnstile script can find the html element that has class="cf-turnstile". Problem is, the documentation tells you first to add the script with async and defer and then add the html element with class="cf-turnstile", which makes me think that this reason I gave to have defer is not correct.
My second theory is that async is added because it doesn't really matter if the document has been parsed when using implicit rendering. But then, why don't we also have it in the Explicitly render the Turnstile widget section? In that section you have this code snippet:
window.onloadTurnstileCallback = function () {
// ...
};If you are supposed to add a callback to the global window object then it really shouldn't matter if the script is executed after the document is parsed or in the middle of it.
Can we update the documentation to explain why async and/or defer are or are not necessary in each case? It's confusing.
Additional information
No response