Why Is Element Not Being Shown Before Alert

Why is element not being shown before alert?

It changes the style synchronously, and you will notice that if you read back the value on the next line and show it.

$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));

But the change of the style object triggers a repaint request message to the page renderer, and that is handled as soon as the browser becomes idle, which is after this script routine has ended.

It depends on the browser, though. In Edge it works fine, and the element is shown right away but in Chrome and Vivaldi it is not.

Another test to see how browsers handle this:
If you resize the browser window, JSFiddle will scale (each of the areas keeps the same relative size). If you resize the Vivaldi browser with the alert open, it doesn't do that. In fact if you make it small, then show the alert, then make it larger, you just get a grey area in the new space until you close the message box. In Edge, the fiddle will just resize in the background, even though the entire browser window is grayed out, so it's not just a matter of the time of processing, but more that Chrome completely freezes the page when an alert is open.

HTML before an alert is not shown

The browser has a single thread for rendering HTML + CSS and JavaScript execution. As long as alert is a synchronous call, it blocks this thread.

Looks like Firefox interprets the alert call to be happening after initial rendering (in fact it does not execute this script but pushes it to the event loop) while Chrome executes JavaScript within the rendering process. This could make sense if you use document.write in your script, this is kinda smoothly adding the new items to the DOM before rendering it as a whole.

As a result I would say it is an improvement because the rendering is skipped until you decide what to show; plus it is not anyhow critical - normally you should never use a blocking thread operator while loading the page.

Why alert show before html element

To achieve that, you need to run the alert message on the next event cycle. You could do that with setTimeout() with an empty delay. Like this

<!DOCTYPE html>
<html>
<body>

<h2>Sort</h2>

<p id="orig_arr"></p>
<p id="sort_arr"></p>
<button onClick="abcSort()"/>Sort Alphabet</button>
<button onClick="numSort()"/>Sort Numeric</button>

    <script>
        var arr = [1, 3, 11, 200, 8, 201, 1000, 50000];
        var new_arr = [2,1,1,5,7,100,3,2];
        document.getElementById("orig_arr").innerHTML = "Original array " + arr;
        
        function abcSort() {
            document.getElementById("sort_arr").innerHTML = "Abc sort : " + arr.sort();
        }
        
        function numSort() {    
            document.getElementById("sort_arr").innerHTML = "Abc sort : " + arr.sort(function(a,b) {return a-b});       
            setTimeout(() => alert(new_arr.sort(function(a,b) { return a - b} )));            
        }
    </script>
</body>
</html>

Can't hide div before alert

setTimeout is pushed at the end of the current stack execution, hence gives the browser the time to interrupt the JS and render the changes.
setTimeout is a possible solution to this.

One other possibility could be to fire an event after the .hide() that triggers the alert.

(you can find more about the setTimeout implementation here

Why does alert appear before background changes?

The rendering process has a lifecycle of it's own and does not block the javascript thread. They both work independently.

The solution is to "pause" the JavaScript execution to let the rendering threads catch up. This can be done via a simple setTimeout set to 0

document.body.style.backgroundColor = "red";

setTimeout(function() {
  alert("hey");
}, 0)

Note that bgColor has been deprecated since 2003 with the DOM Level 2 Spec. The current way to set the background color of an element is via element.style.backgroundColor.

Alert box displaying before HTML

Please go through the link below to understand the load and execution order of the script.

load and execute order of scripts

Javascript code is getting executed even before user presses ok on alert window

Apparently browsers do not have a standard behavior for alert. As a result, you might want to implement your own alert with the behavior you prefer. You can test it here: https://jsfiddle.net/rf0jd7te/1/

HTML

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>Alert Window</p>
    <p>
    <input type="button" value="OK">
    </p>
  </div>

</div>

CSS

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

console.log("before alert");
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = modal.getElementsByClassName("close")[0];
// Get the OK element that closes the modal
var OK = modal.querySelector("input[type=button]");
// When the user clicks on <span> (x), close the modal
function close() {
  modal.style.display = "none";
  console.log("after alert");
}
OK.onclick = span.onclick = function() {
  close();
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    close();
  }
}
modal.style.display = "block";

Why Is Element Not Being Shown Before Alert