Home / Questions / 73816
Accepted
Trauma
Asked: 2020-05-29 02:58:49 +0800 CST 2020-05-29 02:58:49 +0800 CST

Theoretical doubt about race conditions in Javascript

  • 772

This is a snippet from a file I currently use:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link id="SKIN.CSS" rel="stylesheet" charset="UTF-8"/>
<script id="APP.JS" type="text/javascript" charset="UTF-8"></script>
<script id="GUI.JS" type="text/javascript" charset="UTF-8"></script>
<title></title>
</head>
<body>
<script>

window.Gui = { };

window.App = { }

( function( ) {
  var ajax = new XMLHttpRequest( ),
      remains = 3, // Archivos que faltan por cargar.
      response,
      tmp;

  // Solicitamos los archivos a cargar.
  ajax.onreadystatechange = onResponse;
  ajax.open( 'POST', 'config.php' );
  ajax.send( );

  function onResponse( ) {
    if( ( ajax.readyState == 4 ) && ( ajax.status == 200 ) ) {
      response = JSON.parse( ajax.responseText );

      // Cargamos el resto de archivos.
      tmp = document.getElementById( 'SKIN.CSS' );
      tmp.onload = onLoaded;
      tmp.href = response.skin;

      tmp = document.getElementById( 'APP.JS' );
      tmp.onload = onLoaded;
      tmp.src = response.app;

      tmp = document.getElementById( 'GUI.JS' );
      tmp.onload = onLoaded;
      tmp.src = response.gui;
    }
  }

  function onLoaded( ) {
    -- remains;
console.log( 'remains:', remains );

    if( !remains )
      setTimeout( Run, 0 );
  }

  function Run( ) {
  console.log( 'Se llamó a RUN( ).' );

    Gui.Init( );
    setTimeout( App.Run, 0 );
  }
} )( );
</script>
</body>
</html>

I make an AJAX call to get the names of 3 files to upload, and set the attributes by handsrc= and href=as appropriate, to load them dynamically.

The matter is in

function onLoaded( ) {
  -- remains;
  console.log( 'remains:', remains );

  if( !remains )
    setTimeout( Run, 0 );
}

This code, in other languages, would be more than enough reason for direct expulsion from the guild .

Suppose the following sequence of events occurs:

  1. The SKIN.CSS.
  2. The function is called loaded( ), which is executed completely. `remains === 2'.
  3. The APP.JS.
  4. The function is called loaded( ).
  5. Inside loaded( ), decrement remains , which passes to === 1.
  6. Before entering the if, theGUI.JS .
  7. It runs loaded( ). remains === 0.
  8. I enter the if( ). The condition is met. It runs App.Run( ).
  9. The browser continues at point 6, but now I can enter the if( ), becauseremains === 0 ( it was not when it was interrupted).
  10. is called a second timeApp.Run( ) .

Is this sequence of events possible in Javascript, or does the language guarantee that no function will be interrupted by any event?

javascript

1 Answers

  1. Best Answer

    Javascript runs in a single thread on each browser tab. All browsers implement it in the same way, although some run all javascript in the same thread and others dedicate a thread for each tab.

    Code execution is never interrupted by the arrival of a new event. Instead, all events (that have a "listener" or "callback") are added to a queue of pending events to be attended.

    JavaScript events are served in an event loop similar to this:

    while (colaDeEventos.esperarEvento()) {
  colaDeEventos.procesarEvento();
}

    If an event takes too long to process because it is poorly designed (for example doing a synchronous XHR query, falling into an infinite loop, or processing large amounts of data) the browser can display a warning message to the user to allow them to stop the script execution and recover (relatively) the stability of the browser or navigation tab.

    Your code will never run into a race condition because each event will be executed in that loop in "run-to-complete" mode .

    There may be easier ways to speed up the loading of a page than to slow down the loading of everything, including the style sheet.

    proof of concept

    First of all, to use the https://www.deelay.me/ load delay service over HTTPS you have to accept the security exception :(

    We will start from this example to improve it:

    <script>
console.log("Inicio");
</script>
<link rel="stylesheet" href="https://www.deelay.me/1000/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://www.deelay.me/2000/https://cdn.rawgit.com/ojgarciab/af3bb1dd3720fa1ab027459bf08df104/raw/8660b7c868ee40237e2578da71c857aba34733c1/ejemplo1.js"></script>
<div class="alert alert-success"><a href="https://www.deelay.me" target="_blank">Agregar excepción de seguridad HTTPS</a>
<img src="https://www.deelay.me/3000/https://upload.wikimedia.org/wikipedia/commons/3/33/Button_exclamation.png" alt="" width="23" height="22" /></div>
<script>
window.addEventListener("load", function() {
  console.log("Página cargada");
});
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM cargado");
});
console.log("Final del DOM");
</script>

    The result can be something like:

    1.- Inicio           +0
2.- Script ejecutado +3
3.- Final del DOM    +3
4.- DOM cargado      +3
5.- Página cargada   +4

    The "executed script" is delayed due to the preloading of the style sheet (1s) of the javascript itself that displays the message (2s).

    The end of document script ("End of DOM") and "DOM Loaded" follow each other in succession and only "Page Loaded" is delayed an additional second due to the additional three seconds since loading from the stylesheet (they could would have been more if the browser had stopped interpreting the DOM during the javascript load).

    Adding deferto<script>

    <script>
console.log("Inicio");
</script>
<link rel="stylesheet" href="https://www.deelay.me/1000/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://www.deelay.me/2000/https://cdn.rawgit.com/ojgarciab/af3bb1dd3720fa1ab027459bf08df104/raw/8660b7c868ee40237e2578da71c857aba34733c1/ejemplo1.js" defer></script>
<div class="alert alert-success"><a href="https://www.deelay.me" target="_blank">Agregar excepción de seguridad HTTPS</a>
<img src="https://www.deelay.me/3000/https://upload.wikimedia.org/wikipedia/commons/3/33/Button_exclamation.png" alt="" width="23" height="22" /></div>
<script>
window.addEventListener("load", function() {
  console.log("Página cargada");
});
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM cargado");
});
console.log("Final del DOM");
</script>

    1.- Inicio           +0
2.- Final del DOM    +1
3.- Script ejecutado +2
4.- DOM cargado      +2
5.- Página cargada   +3

    Now the script of the end of the document ("End of the DOM") is executed after the loading of the style sheet (1s) without waiting for the download of the javascript with the attribute defer.

    The external script is executed after the two seconds of delay and immediately the loading of the "DOM" is finished.

    It will still take another second for the page to load even though the image was queued for download from the start.

    We've gained two seconds to "End of DOM" and one second on the rest.

    Adding the style sheet at the end

    <script>
console.log("Inicio");
</script>
<script src="https://www.deelay.me/2000/https://cdn.rawgit.com/ojgarciab/af3bb1dd3720fa1ab027459bf08df104/raw/8660b7c868ee40237e2578da71c857aba34733c1/ejemplo1.js" defer></script>
<div class="alert alert-success"><a href="https://www.deelay.me" target="_blank">Agregar excepción de seguridad HTTPS</a>
<img src="https://www.deelay.me/3000/https://upload.wikimedia.org/wikipedia/commons/3/33/Button_exclamation.png" alt="" width="23" height="22" /></div>
<script>
window.addEventListener("load", function() {
  console.log("Página cargada");
});
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM cargado");
});
var link = document.createElement('link');
link.href = 'https://www.deelay.me/1000/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
console.log("Final del DOM");
</script>

    1.- Inicio           +0
2.- Final del DOM    +0
3.- Script ejecutado +2
4.- DOM cargado      +2
5.- Página cargada   +3

    The entire document is parsed and executed almost immediately (but using the default styles) saving three seconds from the proof of concept and one second from delaying the loading and execution of the javascript at the cost of seeing the incorrect style sheets during a few moments.

    The execution of the script will be after its load (2s) and the DOM is considered finished (although there is still an image and a style sheet to load, although it will have finished before the image).

    As soon as those two finish loading (3s from start for image and 1s from "End of DOM" for stylesheet) the "Page Loaded" is generated.

    conclusion

    Is it worth doing an XHR to get the stylesheet and javascript to load?

    • To speed up page display, just use defer.
    • The improvement in latency compared to display time without styles and subsequent "magic transformation" is not worth it.

    To speed up the loading of style sheets it is best to make use of the browser's cache or directly include the style sheets on each page on the server side.

    In your code it would be enough to wait for the DOM to be loaded ( document/DOMContentLoaded) to call your function App.Run(), but if you need a style sheet it would wait for the page to load ( window/load).

    • 5