Discussion:
[chromium-discuss] What indeed will happen among first time loading?
ChunYu Wang
2018-08-23 14:22:39 UTC
Permalink
Suppose we have a very simple page:

<!DOCTYPE html>
<html lang="en">
<body>
<p>Hello There</p>
</body>

<script>
document.body.onload = function() {
console.log("onload")
}
document.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded");
});
console.log(document.body)
document.body.innerHTML = ''
</script>
</html>

According to the console output, the document.body has been set
before DOMContentLoaded, also the "Hello There" seems never been rendered
to the viewport.

Please give me some hints or implementation ideas, since it is really hard
for me to find some identified materials which could be applied for this
case.

Thanks,
ChunYu.
--
--
Chromium Discussion mailing list: chromium-***@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+***@chromium.org.
PhistucK
2018-08-26 08:04:41 UTC
Permalink
This script is synchronous and it indeed runs after document.body is
already created (since in the hierarchy, it exists as a following sibling
of <body>. Although it is possible that browser adds it into <body>, still,
<body> exists at that point).
You will not see "Hello There" because you empty document.body.innerHTML
immediately.
Logging document.body will not show you the state of the object (where it
has "Hello There") on log-time, only the current state. This is how the
console operates (there is a small (i) icon next to the object when you
expand it. Hovering over it states that this is the current state of the
object).
If you change this to console.log(document.body.innerHTML), you will see
that "Hello There", because simple primitives (strings, numbers,
booleans...) are evaluated at log-time.

Even if the browser did not run the script as soon as it rendered the
content, since this is an inline script, it would take it about a
millisecond to re-render, so you probably would have not seen "Hello There"
anyway.

[image: image.png]

☆*PhistucK*
Post by ChunYu Wang
<!DOCTYPE html>
<html lang="en">
<body>
<p>Hello There</p>
</body>
<script>
document.body.onload = function() {
console.log("onload")
}
document.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded");
});
console.log(document.body)
document.body.innerHTML = ''
</script>
</html>
According to the console output, the document.body has been set
before DOMContentLoaded, also the "Hello There" seems never been rendered
to the viewport.
Please give me some hints or implementation ideas, since it is really hard
for me to find some identified materials which could be applied for this
case.
Thanks,
ChunYu.
--
--
http://groups.google.com/a/chromium.org/group/chromium-discuss
---
You received this message because you are subscribed to the Google Groups
"Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
--
--
Chromium Discussion mailing list: chromium-***@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discuss+***@chromium.org.
Loading...