Commentaire: Le chargement asynchrone peut être compris comme un traitement simultané non bloquant. Dans le passé, nous avons utilisé diverses techniques JavaScript pour ce faire. Maintenant, WebKit a implémenté l'attribut async asynchrone de la balise de script pour HTML5. Les amis intéressés peuvent en savoir plus.
(Note du traducteur: le chargement asynchrone peut être compris comme un traitement simultané non bloquant.)L'une des raisons pour lesquelles je suis enthousiasmé par HTML5 est qu'il met en œuvre de nombreuses fonctionnalités tant attendues de l'industrie. Nous devons toujours afficher des invites vierges dans la zone d'entrée, mais elles sont toutes implémentées dans JavaScript. Nous voulons également que l'ensemble du bloc soit cliquable, qui est également implémenté à l'aide de JavaScript.
WebKit implémente désormais la propriété asynchrone asynchrone de la balise de script pour HTML5. Dans le passé, nous utilisions diverses astuces JavaScript pour ce faire, mais maintenant de nouvelles propriétés facilitent le blocage.
Async - Attributs HTML
Comme je l'ai mentionné plus tôt, l'ajout de l'attribut async est très simple:
<! - Spécifiez l'async et le rappel Onload ->
<script async src = "sitescript.js"> </cript>
En fait, si votre conception de structure JavaScript et HTML est raisonnable, alors 90% des cas de vos éléments de script peuvent être chargés de manière asynchrone.
différer - Attributs HTML
Safari Browser ajoute un attribut de différence supplémentaire
<! - Spécifiez un repère, l'effet est similaire à Async ->
<script Defer src = "Sitescript.js"> </cript>
La différence entre async et différer
Le blog officiel de Webkit explique la différence entre async et différer
------------------------------------
Dans des circonstances normales, si le navigateur rencontre un script externe lors de l'analyse du fichier source HTML, le processus d'analyse sera interrompu et une demande sera envoyée pour télécharger le fichier de script. Dom Parsing continuera d'être effectué après le téléchargement et l'exécution du script. Par exemple:
<script src = myblockscript.js> </cript>
Pendant le processus de téléchargement, le navigateur est empêché de effectuer d'autres tâches utiles, y compris l'analyse de HTML, l'exécution d'autres scripts et l'affichage de la disposition CSS. Bien que les scanners de précharge WebKit puissent détecter le multithreading pendant la phase de téléchargement, il y a toujours un grand retard de réseau pour certaines pages.
Il existe de nombreuses techniques pour améliorer la vitesse d'affichage des pages, mais elles nécessitent toutes du code supplémentaire et des compétences spécifiques au navigateur. Maintenant, le script ne peut pas avoir à exécuter les scripts de manière synchrone en ajoutant des attributs asynchronisés ou différés. L'exemple est le suivant:
<script async src = "myasyncscript.js"> </ script>
<script defer src = "myDeferscript.js"> </ script>
Ni le script annotation asynchronisé ni report ne sera téléchargé immédiatement sans faire une pause HTML. Les deux prennent en charge les rappels d'événements Onload pour résoudre l'initialisation qui nécessite l'exécution du script.
La différence entre les deux est la différence d'exécution:
Le script asynchrone sera exécuté immédiatement après le téléchargement du fichier de script et son temps d'exécution doit être avant le déclenchement de l'événement de chargement de la fenêtre. Cela signifie que plusieurs scripts asynchrones ne sont probablement pas exécutés dans l'ordre dans lequel ils apparaissent dans la page.
En revanche, le navigateur garantit que plusieurs scripts de différence sont exécutés dans l'ordre de leur occurrence dans la page HTML, et que le temps d'exécution est avant la fin de la résolution DOM et que l'événement DomContent du document est licencié.
Ce qui suit est un exemple qui prend 1 seconde à télécharger et 1 seconde pour analyser d'autres opérations. Nous pouvons voir que le chargement entier de la page a pris environ 2 secondes.
Le même exemple, mais cette fois, nous avons spécifié l'attribut de différence du script. Parce que lorsque le script de différence est téléchargé, d'autres opérations peuvent être exécutées en parallèle, il est donc environ 1 fois plus rapide.
------------------------------------
Quels navigateurs prennent en charge l'async et reportent
Également mentionné dans l'article cité ci-dessus:
En plus de la nouvelle version du navigateur basé sur WebKit, Firefox a pris en charge les propriétés de report et de charge depuis longtemps et a ajouté l'attribut asynchronisé depuis FF3.6. IE prend également en charge l'attribut Defer, mais ne prend pas en charge l'attribut asynchrone. À partir de IE9, l'attribut Onload sera également pris en charge.
Aynsc est génial!
J'étais tellement heureux de voir le webkit implémenter Async. Le blocage est un énorme goulot d'étranglement des performances pour chaque site Web, et être en mesure de spécifier directement les fichiers de script Asynchronous Chargement accélérera sans aucun doute les pages Web.