Chargez un JavaScript non bloquant avec HTML5 Async et reportez-vous

Le navigateur commencera à télécharger File.js et autres scripts différés en parallèle sans arrêter le traitement de la page.defer a été implémenté dans Internet Explorer version 4.0 - il y a plus de 12 ans! Il est également disponible dans Firefox depuis la version 3.5. Bien que tous les scripts différés soient garantis pour s'exécuter en séquence, il est difficile de déterminer quand cela se produira. En théorie, cela devrait se produire après que le Dom s'est complètement chargé, peu de temps avant l'événement DomContent. Dans la pratique, cela dépend du système d'exploitation et du navigateur, que le script soit mis en cache, et ce que font les autres scripts à l'époque.

L'attribut asynchrone

Async a été introduit dans HTML5:

<script src="file.js" async></script>

Async est identique à déférer, sauf que le script s'exécute à la première occasion après téléchargement (un attribut facultatif on peut être ajouté pour exécuter une fonction spécifique). Vous ne pouvez pas garantir que les scripts s'exécuteront en séquence, mais ils se seront chargés au moment où l'événement Window Onload tire. IE9 n'a pas encore soutenu Async , mais l'équipe IE pourrait facilement l'ajouter comme un alias pour différer. Vous pouvez utiliser à la fois l'async et le report pour prendre en charge tous les navigateurs - même IE4. Peut-être qu'en quelques mois, nous aurons enfin une méthode de chargement JavaScript native et non bloquant qui fonctionne dans tous les navigateurs. Il se souvient où un script asynchronisé a été chargé sur la page, il est donc possible d'utiliser le document. Écrire ou modifier la DOM.La fonctionnalité profiterait immédiatement aux widgets et aux publicités qui chargent le chargement de la page. Espérons que Microsoft, Mozilla et WebKit suivraient l'exemple de l'opéra.

Les questions fréquemment posées (FAQ) sur le non-blocage, l'async et le report en javascript

Quelle est la différence entre asynchronisation et différer dans JavaScript?

Async et Defer sont des attributs qui peuvent être ajoutés à une balise de script dans HTML pour contrôler comment les fichiers JavaScript sont chargés et exécutés. L'attribut async charge et exécute le script de manière asynchrone avec le reste de la page Web. Cela signifie que le script est exécuté dès qu'il est chargé, sans attendre que le reste de la page Web se charge. D'un autre côté, l'attribut de différence charge également le script de manière asynchrone, mais il dérange l'exécution du script jusqu'à ce que le reste de la page Web soit chargé. Cela peut être utile pour les scripts qui reposent sur le DOM entièrement chargé avant de pouvoir fonctionner.

Où dois-je placer mon code JavaScript dans un document HTML?

Le placement du code JavaScript dans un document HTML peut avoir un impact significatif sur les performances de chargement de votre page Web. Traditionnellement, les scripts sont placés dans la section tête du document HTML. Cependant, cela peut bloquer le rendu de la page Web jusqu'à ce que le script soit chargé et exécuté. Pour éviter cela, il est souvent recommandé de placer des scripts juste avant la balise du corps de clôture. Cela permet au document HTML de se charger et de rendre avant l'exécution du script. Alternativement, vous pouvez utiliser les attributs asynchronisés ou différés pour contrôler le chargement et l'exécution des scripts sans bloquer le rendu de la page Web.

Est-il préférable de mettre du code JavaScript dans un fichier externe ou directement dans le fichier HTML? La mise en place du code JavaScript dans un fichier externe peut rendre votre nettoyant de fichier HTML et plus facile à lire. Il permet également au navigateur de mettre en cache le script, ce qui peut améliorer les performances de chargement pour les visites répétées. Cependant, il nécessite une demande HTTP supplémentaire pour charger le script, ce qui peut ralentir le temps de chargement initial. On the other hand, putting JavaScript code directly in the HTML file can eliminate the need for an additional HTTP request, but it can make the HTML file messy and harder to maintain, especially for larger scripts.

What does non-blocking mean in JavaScript?

Non-blocking in JavaScript refers to the ability to load and execute scripts without blocking the rendering of the page web. Ceci est réalisé en chargeant le script de manière asynchrone, soit en plaçant le script en bas du document HTML, soit en utilisant les attributs asynchronisés ou différés dans la balise de script. Les scripts non bloquants peuvent améliorer les performances de chargement de votre page Web, car le navigateur peut continuer à charger et à rendre le reste de la page Web pendant que le script est chargé et exécuté.

Comment le navigateur gère-t-il plusieurs scripts avec des attributs asynchronisés ou de déférer? Disponible, sans ordre particulier. Cela signifie que les scripts qui sont plus petits ou plus proches du haut du document HTML peuvent être exécutés avant les autres. Lorsque plusieurs scripts sont marqués de l'attribut de différence, le navigateur les charge dans l'ordre dans lequel ils apparaissent dans le document HTML, mais dérange leur exécution jusqu'à ce que le reste de la page Web soit chargé. Cela garantit que les scripts sont exécutés dans le bon ordre, même s'ils sont chargés de manière asynchrone.

Puis-je utiliser les attributs asynchronisés et différés dans la même balise de script?

Oui, vous pouvez utiliser à la fois les attributs asynchronisés et différés dans la même balise de script. Cependant, leur comportement dépend du navigateur. Dans les navigateurs modernes qui prennent en charge les deux attributs, l'attribut asynchronisé a priorité sur l'attribut de différence. Cela signifie que le script sera chargé et exécuté de manière asynchrone, dès qu'il sera disponible. L'attribut de report est ignoré. Dans les anciens navigateurs qui ne prennent pas en charge l'attribut asynchrone, l'attribut de différence est utilisé à la place, s'il est présent.

Que se passe-t-il si un script avec l'attribut async ou report échoue? Il s'agit de l'un des avantages de l'utilisation d'async ou de report, car il permet à la page Web de continuer à charger et à rendu, même si un script ne se charge pas. Cependant, il est important de gérer correctement les erreurs de chargement du script, pour vous assurer que votre page Web fonctionne correctement, même si un script ne se charge pas.

Comment puis-je vérifier si un navigateur prend en charge l'attribut async ou de retour?

Vous pouvez vérifier si un navigateur prend en charge l'attribut async ou de déformation en utilisant la détection de fonctionnalités dans Javascript. Cela implique de tester si la propriété asynchronisée ou de différence existe sur un élément de script. Si la propriété existe, le navigateur prend en charge l'attribut. Sinon, le navigateur ne prend pas en charge l'attribut.

Puis-je utiliser l'attribut async ou différer avec des scripts en ligne?

Non, les attributs asynchronisés et de report ne fonctionnent qu'avec des scripts externes. Ils n'ont aucun effet sur les scripts en ligne. Si vous souhaitez charger et exécuter un script en ligne de manière asynchrone, vous devrez utiliser d'autres techniques, telles que la création dynamique d'un élément de script avec javascrip chargé et exécuté. L'attribut asynchronisé charge et exécute des scripts dès qu'ils sont disponibles, sans attendre que le reste de la page Web se charge. L'attribut de repère charge également les scripts de manière asynchrone, mais dérange leur exécution jusqu'à ce que le reste de la page Web soit chargé. Les scripts non bloquants sont chargés et exécutés sans bloquer le rendu de la page Web. La meilleure technique à utiliser dépend des besoins spécifiques de votre page Web et de vos scripts.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!