Résumé des méthodes de chargement asynchrone des fichiers js (avec code)

Ce que cet article vous apporte est un résumé de la méthode de chargement asynchrone des fichiers js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pourquoi le chargement asynchrone : Le chargement synchrone bloquera le traitement ultérieur du navigateur, c'est-à-dire que ce n'est que lorsque le fichier actuel est chargé que le prochain chargement de fichier (comme les images), le rendu, et le code sera exécuté et mis en œuvre. S'il existe des comportements tels que la sortie du contenu du document, la modification du DOM, la redirection, etc. dans js, cela entraînera un blocage de page.

Qu'est-ce que le chargement asynchrone : Le chargement asynchrone ne bloque pas les opérations ultérieures du navigateur, c'est-à-dire que lors du chargement et de l'exécution de js, d'autres fichiers sont chargés en parallèle pour restituer la page.

Méthode 1 : attribut async L'attribut
async spécifie que le fichier js sera exécuté dès qu'il sera disponible, et le script sera exécuté de manière asynchrone par rapport au reste de la page (lorsque la page continue à être analysée, le script sera exécuté)

L'attribut async ne s'applique qu'aux scripts externes (uniquement lors de l'utilisation de l'attribut src).

L'attribut async ne garantit pas l'ordre d'exécution.

<script type="text/javascript" src="demo_async.js" async="async"></script>

Méthode 2 : attribut defer L'attribut
defer spécifie s'il faut retarder l'exécution du script jusqu'à ce que la page soit chargée. L'attribut

defer signifie que le script ne modifiera pas le contenu du document. Le navigateur sait qu'il pourra lire en toute sécurité le reste du document sans exécuter le script. jusqu'à ce que le document ait été affiché à l'utilisateur. pour accélérer le traitement des documents.

Seul Internet Explorer prend en charge l'attribut defer.

<script type="text/javascript" defer="defer"></script>

Méthode 3 : Créer dynamiquement un DOM
La même source de js n'est pas requise

Ces codes doivent être placés avant la balise (près du bas du fichier HTML)

Cette méthode de chargement empêchera l'événement onload d'être déclenché avant le le chargement est terminé, et beaucoup d'entre eux le sont maintenant. Le code de la page doit effectuer un travail de rendu supplémentaire lors du chargement, il bloquera donc toujours le traitement d'initialisation de certaines pages.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

Méthode 4 : Créer dynamiquement un DOM pendant le chargement
Ne nécessite pas de code source js

Ces codes doivent être placés avant la balise (près du bas du fichier HTML)

Cette méthode de chargement ne démarre pas immédiatement le chargement asynchrone de js, mais démarre le chargement asynchrone uniquement au chargement. Cela résout le problème du blocage du déclenchement de l’événement onload.

<script type="text/javascript">    
function downloadJSAtOnload() {        
var element = document.createElement("script");
        element.src = "defer.js";        
        document.body.appendChild(element);
    }    
    if (window.addEventListener)        
    window.addEventListener("load", downloadJSAtOnload, false);    
    else if (window.attachEvent)        
    window.attachEvent("onload", downloadJSAtOnload);    
    else window.onload = downloadJSAtOnload;
</script>

Recommandations associées :

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!