Peut-on utiliser à la fois les attributs async et defer sur une balise HTML ?

Question

Je voudrais charger le code JavaScript suivant en utilisant les deux méthodes suivantes defer y async :

<script defer async src="/js/somescript.js"></script>

Depuis defer est pris en charge par Internet Explorer 5.5+, comme vous pouvez le voir à l'adresse suivante CanIUse.com J'aimerais pouvoir utiliser defer si l'asynchronisme n'est pas disponible. Je pense qu'il est préférable d'utiliser l'asynchronisme lorsqu'il est disponible, mais il ne sera pas pris en charge avant Internet Explorer 10.

Ma question est donc la suivante : le code ci-dessus est-il un code HTML valide ? Si ce n'est pas le cas, est-il possible de créer cette situation en utilisant JavaScript pour revenir à l'utilisation du code HTML ? defer sur un script lorsque async n'est pas disponible ?

Answer 1

Extrait du cahier des charges : https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

L'attribut defer peut être spécifié même si l'attribut async est spécifié, afin que les anciens navigateurs Web qui ne prennent en charge que defer (et non async) adoptent le comportement defer au lieu du comportement de blocage synchrone qui est le comportement par défaut.

(Consultez le lien de référence ci-dessous pour voir une représentation visuelle des différences entre les scripts normaux et les scripts avec defer et async).

---

Références :

• attributs asynchrones ou différés
• Chargement efficace de JavaScript avec defer et async

Answer 2

La question est de savoir ce que vous attendez d'elle. Si les deux asynchrone y différer sont présents, je m'attendrais à ce que le script soit différé et ne soit exécuté qu'après DOMContentLoaded lorsque le navigateur est inactif, mais si je lis correctement la spécification, on dirait que différer est ignoré si asynchrone est défini et le script est chargé de manière asynchrone, donc s'exécutera dès qu'il sera disponible, ce qui peut très bien être avant DOMContentLoaded et peut bloquer d'autres ressources.

Il existe trois modes possibles qui peuvent être sélectionnés à l'aide de ces attributs. Si l'attribut async est présent, alors le script sera exécuté de manière asynchrone, dès qu'il sera disponible. Si l'attribut async n'est pas présent mais que l'attribut defer est présent, alors le script est exécuté lorsque la page a terminé son analyse syntaxique. Si aucun des deux attributs n'est présent, alors le script est récupéré et exécuté immédiatement, avant que l'agent utilisateur ne continue à analyser la page.

https://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#attr-script-async

Answer 3

Malheureusement defer est ignorée lorsque async spécifié, et async ont toujours une priorité plus élevée.

Et personnellement je pense que c'est très mauvais que defer est ignorée. Imaginons une situation où nous voudrions que certains JS soient initialisés dès que possible, avant même le chargement du contenu de la page. Mais nous voulons que ce script soit initialisé AVANT le reste des script qui le nécessitent. Il doit être le premier dans defer queue. Mais, malheureusement, cela ne fonctionnera pas :

<!-- we want "jQuery" ASAP and still in "defer" queue. But defer is ignored. -->
<script src="jquery.min.js" async defer></script>

<!-- this doesn't blocks the content and can wait the full page load, but requires "jQuery" -->
<script src="some_jquery_plugin.min.js" defer></script>

Dans cet exemple, le fichier "some_jquery_plugin.min.js" peut être chargé et exécuté avant le chargement de jQuery, et échouera. :(

Il y a donc 2 façons de résoudre le problème : soit utiliser seulement defer ou fusionner tous les fichiers javascript dépendants en un seul JS.

Answer 4

Oui, c'est du HTML valide et cela fonctionnera comme prévu.

Tout navigateur conforme aux normes du W3C reconnaîtra l'adresse de l'utilisateur. asynchrone et traitent le script correctement, alors que les anciennes versions de IE reconnaîtront le différer attribut.

Puisque les deux attributs sont boolean tu ne le fais pas doivent attribuer une valeur quelconque.

Answer 5

Oui, vous pouvez utiliser les deux attributs mais vous devez utiliser defer ou async, pas les deux. Pour en savoir plus, consultez la comparaison et utilisez l'un des deux en fonction de vos besoins.

l'attribut "defer" : Tout d'abord, il téléchargera le fichier script et attendra ensuite l'analyse html. Après la fin du parsing html, le script sera exécuté. En d'autres termes, il garantira que tous les script s'exécuteront après le parsing html.

L'attribut Defer est utile lorsque script est utilisé pour des manipulations DOM. Cela signifie que script s'appliquera sur le document html.

attribut asynchrone : Il téléchargera le fichier script et l'exécutera sans attendre la fin du parsing html. En d'autres termes, il ne garantira pas que tous les script s'exécuteront après le parsing html.

L'attribut Async est utile lorsque script n'est pas utilisé pour la manipulation du DOM. Parfois, vous avez besoin de script uniquement pour les opérations côté serveur ou pour la gestion du cache ou des cookies mais pas pour les manipulations DOM. Cela signifie que script n'est pas lié au html utilisé.