document.readystate of "interactive" vs. ondomcontentloaded?

Question

Could anyone tell me the difference between the "interactive" state of document.readyState and "DOMContentLoaded"?

I couldn't find a lot of info on the "interactive" state and what specifically is available to be used in the page.

This page says:

interactive - Has loaded enough and the user can interact with it

Which seems a helluva lot like the DOMContentLoaded event.

I wrote a quick test page here which seems to suggest that the interactive readystate seems to be available before the DOMContentLoaded event.

So could someone clarify or give me some info on whats available to be manipulated on the page in the interactive state and whether it is the same as DOMContentLoaded and if so, why is it available before DOMContentLoaded?

:)

Cheers, Yansky.

Edit: forgot to add, you need to be running FF4b to be able to use/see the new readystate feature.

Solution 1

Once the user agent stops parsing the document, the user agent must run the following steps:

1. Set the current document readiness to "interactive" and the insertion point to undefined.

2. Pop all the nodes off the stack of open elements.

3. If the list of scripts that will execute when the document has finished parsing is not empty, run these substeps:

   a. Spin the event loop until the first script in the list of scripts that will execute when the document has finished parsing has its "ready to be parser-executed" flag set and the parser's Document has no style sheet that is blocking scripts.

   b. Execute the first script in the list of scripts that will execute when the document has finished parsing.

   c. Remove the first script element from the list of scripts that will execute when the document has finished parsing (i.e. shift out the first entry in the list).

   d. If the list of scripts that will execute when the document has finished parsing is still not empty, repeat these substeps again from substep a.

4. Queue a task to fire a simple event that bubbles named DOMContentLoaded at the Document. . . . https://www.w3.org/TR/html5/syntax.html#the-end

Solution 2

Just to answer my own question here, it seems that the DOMContentLoaded event equates to the document.interactive readystate.

Comments

[Yansky]

@Adam Heath - not exactly. I was asking the same question on the mozilla #extdev irc channel and one of the mods there said it happens at the same time. Here's the mozilla irc channel details: wiki.mozilla.org/IRC#Commonly_Used_Mozilla_IRC_Channels

[Yaniv Shemesh]

To summaries what it means: 1. JavaScripts that must run right after parsing are executed "list-of-scripts-that-will-execute-when-the-document-has-fin‌​ished-parsing" are executed 2. DomContentLoaded event fires 3. JavaScripts "list-of-scripts-that-will-execute-in-order-as-soon-as-possi‌​ble" are executed 4. readyState changes to "complete" (instead of "interactive") and triggering the "onload" start event.

[Yaniv Shemesh]

I guess the "list-of-scripts-that-will-execute-when-the-document-has-fin‌​ished-parsing" refers to JavaScript which uses "document.write" that must be run during the "interactive" readyState. So the time interval after parsing DOM and finish running those blocking JavaScripts is before "DomContentLoaded"

[hexalys]

That is not quite correct. As per the HTML5 specs, Defer scripts are to be executed in between interactive and DOMContentLoaded. That said if you don't use 'defer' at all, they are close to being equivalent: in that DOMContentLoaded will follow the 'interactive' state, without anything to do in between that would affect other scripts or the document.

[hexalys]

Yaniv, just to be technically correct, you shouldn't run document.write scripts on the 'interactive' state. The document being already parsed or parsing... The sequence goes like this: 'interactive' state > run 'defer' scripts and remaining blocking scripts > DOMContentLoaded > run remaining 'async' script > 'complete'. What you can do though, is override the document.write function on 'interactive' so that if any async scripts uses document.write, you can deal with it using other methods. Also keeping in mind that the 'interactive' state is not working properly (e.g. firing too early) in IE.

[jfriend00]

The interactive state has turned out to be relatively useless because some versions of IE will change the state to interactive mistakenly before the document has finished loading/parsing (it's a bug triggered by web servers that send certain size chunks of the document down to the browser with a small delay between chunks). So, it can't be relied upon for the one thing it was there for and thus pretty much everyone ends up using the "complete" state instead which is reliable in all browsers.

[aruno]

@jfriend00 except 'complete' means all images are loaded which isn't good if you're just looking to trigger javascript initialization

[Armen Michaeli]

The owls are not what they seem.