Stack Overflow
Stack Overflow

Browsers react differently to – RaphaMex Jun 09 '18 at 03:51

3 Answers3

4

The elements from before the script have been created and added to the DOM, but the browser hasn't had a chance to render them (update the page display to show them) before the alert brings the whole UI thread to a screeching halt. The browser is required to have created the elements and added them to the DOM; it is not required to have rendered them yet. Some will, some won't. Neither is "wrong."

We can readily prove that the first paragraph exists by looking for it and even reading its text:

<p>The Beginning...</p>
<script>
  alert("Hello, World! First paragraph's text: " + document.querySelector("p").textContent);
</script>
<p>...The End Of Doc</p>
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
-1

It has to behave as the tutorials say; So I think it's browsers' weakness according to the following scenarios:

We have this CodePen (that you linked in a comment) with the following code:

<p id="one">
    The Beginning...</p>
<script>
    alert(document.getElementById('one').innerHTML);
</script>
<p id="two">...The End Of Doc</p>

Scenario 1 :

Follow the link and wait for the code to load. As you said, alert pops up but The Beginning and The End are not shown. After you close the alert, the text is visible.

Scenario 2 (Only happens in Chrome so far. Safari behaves like scenario 1) :

Open the link in a new tab without following it (You can use Ctrl + Right Click or Mouse Wheel Click). Wait for about 10 seconds (You'll see a small blue dot in CodePen's favIcon). Now open the CodePen tab and BOOM! you'll see both the alert and The Beginning/The End Text.

This makes me think that Chrome is not working as it is supposed to.

Ahmad Maleki
  • 1,415
  • 3
  • 21
  • 35
  • This is interesting... however, it doesn't answer OP's question: why both Chrome and Safari don't display the first `

    ` element? Also, it's worth mentioning that the "blue dot behaviour" in the CodePen happens only in Chrome, not Safari.

     – Gerardo Furtado Jun 09 '18 at 05:39
  • @GerardoFurtado I'm trying to say that according to the standards they should, but they don't cause it's a bug. This scenario shows that It's a weakness in implementation. – Ahmad Maleki Jun 09 '18 at 06:03
  • @GerardoFurtado Also about the "blue dot behavior", it looks like dynamically changing favicon in safari is not possible(or hardly possible in a different way than chrome). – Ahmad Maleki Jun 09 '18 at 06:10
  • Sorry, I'm not talking about the favicon, but about the page itself: no element was rendered and the alert was there, just like scenario 1. – Gerardo Furtado Jun 09 '18 at 06:14
  • 1
    @GerardoFurtado Oh I understand now, so scenario 2 only happens in chrome not safari, I'll update the answer. Thanks for mentioning. – Ahmad Maleki Jun 09 '18 at 06:18
  • The browser is required to have *created* the elements and added them to the DOM; it is *not* required to have *rendered* them yet. Some will, some won't. – T.J. Crowder Jun 10 '18 at 08:12
  • @T.J.Crowder You are right and I think your answer best describes the case. But it's still a question that why does chrome render elements in scenario 2 but not in scenario 1. – Ahmad Maleki Jun 12 '18 at 09:16
  • 1
    @AhmadMaleki - That's interesting behavior (the showing "The End" part), but `alert` is a funny and anachronistic thing. Note that the alert will still have the correct content even in Scenario 2: https://codepen.io/anon/pen/JZNbZq Also note the difference if you use something which can affect the rendering of the remainder of the page: https://codepen.io/anon/pen/LrybvY I think you're not giving the Chrome developers enough credit for really, really thinking through how to handle these 90's hold-overs in an intelligent way in 2018. :-) – T.J. Crowder Jun 12 '18 at 09:29
-2

Because the JavaScript execute immediately before the DOM completed parsing (that's the 'problem' that ready solves). You can include an event listener to check if your DOM is ready

<script>
var callback = function() {
    alert( 'Hello, Wolrd!' );
};

if(document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
    callback();
} else {
    document.addEventListener("DOMContentLoaded", callback);
}
</script>

But the simplest thing you can do is to move your <script> tag to the end before </body>.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <p>The Beginning...</p>


  <p>...The End Of Doc</p>

  <script>
    alert( 'Hello, Wolrd!' );
  </script>
</body>

</html>
marc4ndrew
  • 41
  • 1
  • 8
  • BTW ! it seems that inside of DOM this elements before the script already exist and here is the example https://codepen.io/tonkhao/pen/bKBLQm - so this is only question of visibility – Kharlamov Anton Jun 08 '18 at 11:07
  • 1
    your below example with placing script at the end of script really doesn't change the situation - anyway html tags inside of the body appear only after alert is completed - so it looks like doesn't matter where the script is placed inside the body - browser anyway will complete te script first and then the html inside the body – Kharlamov Anton Jun 08 '18 at 11:12