0
votes

Javascript se charge en premier même si le code à la fin de la balise <body>

J'ai ajouté du Javascript externe à la fin de la balise dans le fichier HTML cependant, l'alerte se charge en premier et seulement en appuyant sur le bouton "OK" en alerte, le contenu se charge. Voici mon code HTML et JS.

* J'ai déjà essayé de mettre le script dans la chose et async / defer aussi.

JS

alert("Hello");

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello</h1>

    <script src="index.js" charset="utf-8"></script>
  </body>
</html>

javascript html

2 commentaires

Nous ne pouvons pas voir le code JavaScript :) Veuillez l'ajouter à nouveau

vous pouvez vérifier dans l'onglet réseau que le html est chargé avec la première requête! néanmoins l'alerte est évidemment analysée plus rapidement que le rendu du html

4 Réponses :

2
votes

Vous pouvez essayer de mettre la logique que vous faites sur l'événement onload de la window comme ceci:

window.onload = () => {
  // logic goes here
  console.log('the document has been loaded');
};

0 commentaires

2
votes

alert est une fonction synchrone. Notez que placer le script à la fin du corps signifie uniquement qu'il sera exécuté lorsque la page est analysée et non lorsque le contenu est affiché. Le contenu n'est affiché qu'après coup. L' alert étant synchrone, elle s'exécutera d'abord avant d'afficher le contenu.

1 commentaires

Je pense que vous voulez dire "synchrone". alert n'est pas du tout asynchrone.

-2
votes

Javascript a un comportement asynchrone. Si vous voulez vous assurer que dom est chargé avant de faire quoi que ce soit, envisagez d'utiliser Jquery

https://jquery.com/

avant de placer votre bibliothèque Jquery dans votre code js:

$(document).ready(function(){

//... all your's stuffs here

});

UN CONSEIL DE PRO: Learn Jquery vous mènera à créer des choses incroyables !! Meilleures salutations

4 commentaires

Désolé, -1. jQuery peut être une corvée de ressources en particulier pour un problème simple comme celui-ci.

Hé mec, je ne pense pas qu'il construira une application la plus simple comme celle-ci. Balle dehors;)

oups ne peut pas révoquer

@ expressjs123 pas de problème: D Que cette réponse ait un sens pour les autres et présente Jquery incroyable

3
votes

l'analyse DOM se produit normalement sur le thread principal. Donc, si le thread d'exécution JavaScript principal est occupé, l'analyse DOM ne progressera pas tant que le thread ne sera pas libre.

Si l'élément de script est un fichier de script externe, le navigateur lancera le téléchargement du fichier de script externe à partir du thread principal, mais il arrêtera l'exécution du thread principal jusqu'à ce que ce fichier soit téléchargé. Cela signifie qu'il n'y a plus d'analyse DOM tant que le fichier de script n'est pas téléchargé.

Vous devriez en savoir plus sur les étapes qui se produisent lorsqu'un site Web est chargé / analysé / rendu

Tiré de: https://medium.com/jspoint/how-the-browser-renders-a-web-page-dom-cssom-and-rendering-df10531c9969#:~:text=When%20a%20web%20page% 20 est, le% 20Render% 2DTree% 20à partir de% 20it .

si vous n'auriez pas utilisé la fonction alert (), vous ne le remarqueriez même pas, mais l'alerte spéciale est qu'elle arrête toute exécution ultérieure jusqu'à ce que vous confirmiez l'alerte, en ce qui concerne ce qui est écrit ci-dessus, cela explique pourquoi la page s'affiche après avoir confirmé l'alerte

0 commentaires