Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Question]Inconsistent defer script description between doc and brower #2573

Closed
NE-SmallTown opened this issue Apr 22, 2017 · 5 comments
Closed

[Question]Inconsistent defer script description between doc and brower #2573

NE-SmallTown opened this issue Apr 22, 2017 · 5 comments

Comments

@NE-SmallTown
Copy link

NE-SmallTown commented Apr 22, 2017 •
edited
Loading

the doc says:

Add the element to the end of the list of scripts that will execute when the document has finished parsing associated with the Document of the parser that created the element.

When the script is ready, set the element's "ready to be parser-executed" flag. The parser will handle executing the script.

My html is:

<head>
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="sleep.css">
  <script defer src="js.js"></script>
</head>
// body below is normal,no css,js,just some texts
......

js.js is:

function sleep(ms){
    var ts =+ new Date;
    
    while(true){
        if(+new Date -ts >= ms) break;
    }
    
    return +new Date - ts;
}

document.title =sleep(2000);
document.title =sleep(3000);

But I check the timeline in chrome,I find that the js fired before the DOMContentLoaded event.

But the spec says "Add the element to the end of the list",so I think it means we should execute the defer js after the DOMContentLoaded event.

If I am wrong,please let me know,thanks!
@domenic
Copy link
Member

domenic commented Apr 22, 2017

What part of the spec leads you to believe DOMContentLoaded fires before defer scripts? The spec section you quote has nothing to do with DOMContentLoaded.

If you look at the portion of the spec that fires DOMContentLoaded, I think you will find the opposite.

@NE-SmallTown
Copy link
Author

NE-SmallTown commented Apr 23, 2017 •
edited
Loading

What part of the spec leads you to believe DOMContentLoaded fires before defer scripts? The spec section you quote has nothing to do with DOMContentLoaded.

Because I think "when the document has finished parsing" means DOMContentLoaded

But follow your reminder,I check the the-end section and it says:

1.Set the current document readiness to "interactive"

3.If the list of scripts that will execute when the document has finished parsing is not empty, run these substeps(and then it execute the scripts which includes those defer scripts(in my case,it is the js.js file))

4.1 Fire an event named DOMContentLoaded

So,you are right,my previous thought is wrong,the defer scripts are executed before(not after) the DOMContentLoaded event.

More accurate description: after the current document readiness to "interactive" and before the DOMContentLoaded event.(I look up the pending pr and it also shows that before DOMContentLoaded,we have executed all defer scripts.)

But this section is the-end section which means we have parsed the html compeletely,but from the screenshot which I post,when the defer js(i.e. the js.js file) finish loading,it was executed immediately and then of course block the html parse,so I am a little confused,I think at least it should be executed when we parse the html compeletely,right?

And from the spec's pic:

And from your previous comment:

EDIT: also, the above won't work because module scripts execute at "defer time"; we also would need to defer the evaluation of the above script, perhaps by listening to DOMContentLoaded

I think both the pic and "we also would need to defer the evaluation of the above script, perhaps by listening to DOMContentLoaded" are the same meaning with I say above.

@NE-SmallTown
Copy link
Author

NE-SmallTown commented Apr 23, 2017 •
edited
Loading

Sorry,I think probally I make a mistake,the test demo is from a friend,so I don't check it very carefully.But now I realize that at the end of the body tag has nothing.

It misleads me,and let me consider that after the defer script finishing loading,it is executed immediately though certainly the event log of the timeline in chrome shows that.But that's just because there is no extra parse work need to do when the defer script finish loading.

So,I add <script>console.log('foo')</script> to the end of the body tag and then observe the timeline,I find that when the the defer script finish loading,it doesn't be executed immediately,after that,first execute the <script>console.log('foo')</script> ,and then execute the defer script.

So,I think the spec describes right.

If I am wrong or you have any thought,please let me know,thanks a lot!

@domenic
Copy link
Member

domenic commented Apr 24, 2017

So it looks like you've worked this out by reading the spec, which IMO is pretty clear. Your main misconception is that DOMContentLoaded happens immediately after parsing, but that's not accurate; it happens after executing defer scripts.

The picture for <script defer> doesn't contain anything about DOMContentLoaded, so I am not sure why it is related to this issue.

Glad we could help! I'll close this now since there doesn't seem to be a spec bug, but I'm happy to continue discussing in the closed thread if there are still things you find unclear.

@domenic domenic closed this as completed Apr 24, 2017
@NE-SmallTown
Copy link
Author

Thanks for your feedback :)

The picture for <script defer> doesn't contain anything about DOMContentLoaded, so I am not sure why it is related to this issue.

Yea,sorry it confuses you,because I previous think the end of the green line represent DOMContentLoaded

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@domenic @NE-SmallTown