javascript-tutorial / javascript-tutorial/en.javascript.info

some description not accurate in the article of 《onload-ondomcontentloaded》

Open
#1,842 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
25.5k
Forks
4k
PR merge metrics
No merged PRs in 30d

Description

## article
article Link [《onload-ondomcontentloaded》](https://javascript.info/onload-ondomcontentloaded)

## may not accurate
> document.readyState becomes interactive right before DOMContentLoaded. These two things actually mean the same.

> interactive – the document is parsed, happens at about the same time as DOMContentLoaded, but before it.

## reason
if a page containers some "defer" script, then it will cost some time to execute the "defer" script after interactive but before DCL.

## Reference
https://calendar.perfplanet.com/2012/deciphering-the-critical-rendering-path/
>If you add a script and tag it with “defer”, then you unblock the construction of the DOM: the document interactive state does not have to wait for execution of JavaScript. However, note that this same script will be executed before DCL is fired. Further, recall that JavaScript may query CSSOM, which means that the DCL event may be held until the CSSOM is ready, at which point the script will be executed. In short: we’ve unblocked the “document interactive” state, but we’re still potentially blocking DCL.

https://html.spec.whatwg.org/multipage/dom.html#current-document-readiness
> The DOMContentLoaded event fires after the transition to "interactive" but before the transition to "complete", at the point where all subresources apart from async script elements have loaded.

Contributor guide

No contributing guide indexed for this repository

Research direction

Open the linked onload-ondomcontentloaded article and compare the quoted readyState and DOMContentLoaded descriptions with the WHATWG readiness reference and the defer-script explanation. Update the article so it distinguishes the interactive transition from the later DOMContentLoaded event, then verify the revised wording against those references.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.