Chargement asynchrone (async)

Définition : Le chargement async permet à un script classique téléchargé en parallèle d’être exécuté dès qu’il est disponible, sans attendre nécessairement les autres scripts. Son ordre d’exécution n’est pas garanti.

Comprendre et utiliser

À quoi sert ce terme ?

Il convient aux ressources indépendantes du reste de l’interface, par exemple un composant autonome qui ne dépend pas d’un autre script. L’usage inadapté peut provoquer des erreurs intermittentes difficiles à reproduire.

Fonctionnement technique

WordPress accepte une intention strategy=async pour les scripts classiques et tient compte de leurs dépendances avant de produire la stratégie effective. Async n’est pas une méthode pour accélérer automatiquement tout JavaScript.

Dans quels contextes l’utiliser ?

À envisager pour une ressource sans dépendance temporelle, après examen de ses interactions avec le DOM et les autres bibliothèques.

Cas concret : ATOOLPHA

Un script autonome ATOOLPHA mesure le chargement d’une zone non critique sur un site de test, sans interaction avec l’éditeur ni d’autres scripts.

Exemple de code commenté

Extrait PHP destiné à un plugin ou à un template WordPress, dans le contexte indiqué ; pas au contenu HTML de l’article.

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'atoolpha-independent',
        plugin_dir_url( __FILE__ ) . 'assets/independent.js',
        array(), '1.0.0',
        array( 'strategy' => 'async', 'in_footer' => true )
    );
} );

Décryptage de l’exemple

Le handle n’annonce aucune dépendance et demande async. Le fichier JavaScript doit vérifier lui-même que les éléments DOM nécessaires sont disponibles au moment de son exécution.

Résultat attendu

Le navigateur peut exécuter independent.js dès son chargement, avec un ordre qui varie suivant le réseau et le cache.

Exercice pratique et vérification

Tester avec ralentissement réseau puis rechargements répétés. Comparer l’ordre d’exécution et confirmer l’absence de course.

Précautions et limites

Ne pas appliquer async à un script dépendant de jQuery ou d’une variable initialisée par une autre ressource sans repenser cette dépendance.

À ne pas confondre

Defer tend à préserver l’ordre relatif de scripts classiques différés ; async privilégie l’exécution dès disponibilité, indépendamment de cet ordre.

Diagnostic avancé

Un dysfonctionnement qui disparaît au rechargement peut révéler une course de chargement. Inspecter les logs, dépendances et événements DOM.

Choix d’architecture et déploiement

Async convient aux scripts indépendants, mais la notion d’indépendance doit être vérifiée : aucun autre code ne peut supposer l’exécution terminée, et le module doit gérer l’absence temporaire d’éléments DOM. Reproduire les scénarios sous réseau ralenti.