Introduction à l'utilisation des éléments de script HTML5 asynchrones et différés compétences du didacticiel de chargement_html5 asynchrone

(Note du traducteur : le chargement asynchrone peut être compris comme un traitement simultané non bloquant.)

L'une des raisons pour lesquelles je suis si enthousiasmé par HTML5 est qu'il implémente de nombreuses fonctionnalités tant attendues dans l'industrie. Nous avons toujours eu besoin que la zone de saisie affiche une invite vide, mais tout est implémenté à l'aide de JavaScript. Nous souhaitons également rendre l'ensemble du bloc cliquable, toujours en utilisant JavaScript.
WebKit implémente désormais l'attribut async de la balise SCRIPT pour HTML5. Dans le passé, nous utilisions diverses astuces JavaScript pour effectuer ce genre de choses, mais désormais, de nouvelles propriétés permettent d'empêcher relativement facilement le blocage.

async - Attribut HTML
Comme je l'ai mentionné plus tôt, l'ajout de l'attribut async est très simple :

Copiez le code

Le code est le suivant :

En fait, si vos structures JavaScript et HTML sont conçues de manière raisonnable, alors dans 90 % des cas, votre Script les éléments peuvent utiliser le chargement asynchrone.

defer - Attribut HTML
Le navigateur Safari ajoute un attribut defer supplémentaire

Copier le code

Le code est le suivant :

La différence entre async et defer
Le blog officiel de WebKit explique très bien la différence entre async et defer
- ---- ----------------------------------
Dans des circonstances normales, lorsque le navigateur analyse le fichier source HTML, s'il rencontre un script externe, le processus d'analyse sera suspendu et une demande sera envoyée pour télécharger le fichier de script. L'analyse DOM ne continuera qu'une fois le script complètement téléchargé et exécuté. Par exemple :

Pendant le processus de téléchargement, le navigateur ne peut pas effectuer d'autres tâches utiles, notamment l'analyse HTML, l'exécution d'autres scripts et l'affichage. Disposition CSS. Bien que l'analyseur de préchargement Webkit puisse effectuer des téléchargements multithread de manière détective pendant la phase de téléchargement, certaines pages subissent toujours une latence réseau importante.
Il existe actuellement de nombreuses techniques pour améliorer la vitesse d'affichage des pages, mais elles nécessitent toutes du code supplémentaire et des techniques spécifiques au navigateur. Désormais, les scripts peuvent ajouter des attributs asynchrones ou différés afin que le script ne doive pas être exécuté de manière synchrone. L'exemple est le suivant :

Copier le code.

Codez comme suit :

defer src="myDeferScript.js" onload="myInit()">

Les scripts marqués avec async et defer seront téléchargés immédiatement sans suspendre l'analyse HTML. rappels pour résoudre le besoin Ce script effectue l'initialisation.
La différence entre les deux réside dans le temps 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 seront probablement pas exécutés séquentiellement dans l'ordre dans lequel ils apparaissent sur la page.
En revanche, le navigateur garantit que plusieurs scripts defer sont exécutés séquentiellement dans l'ordre dans lequel ils apparaissent dans la page HTML, et le temps d'exécution est après la fin de l'analyse DOM et avant le déclenchement de l'événement DOMContentLoaded du document.

Ce qui suit montre un exemple qui prend 1 seconde pour télécharger et 1 seconde pour analyser et effectuer d'autres opérations. Nous pouvons voir que la page entière prend environ 2 secondes à charger.

Même exemple, mais cette fois nous spécifions l'attribut defer du script Car lorsque le script defer est téléchargé, d'autres opérations peuvent être exécutées en parallèle, c'est donc environ 1x plus rapide.

--------------------------------------------- ----
Quelles vues Le navigateur prend en charge async et defer
C'est également mentionné dans l'article cité ci-dessus :

En plus de la nouvelle version du navigateur basée sur Webkit, FireFox a pris en charge les attributs defer et onload depuis longtemps, et depuis FF3.6 L'attribut async a été ajouté. IE prend également en charge l'attribut defer, mais ne prend pas encore en charge l'attribut async. À partir d'IE9, l'attribut onload sera également pris en charge.

aynsc Génial !
J'étais tellement heureux de voir webkit implémenter l'async. Pour chaque site Web, le blocage constitue un énorme goulot d'étranglement en termes de performances, et le fait de pouvoir spécifier directement les fichiers de script à charger de manière asynchrone accélérera sans aucun doute la page Web.