702 votes

Balise de script - asynchrone et différée

J'ai quelques questions à propos de ces 2 options pour l' <script> balise.

J'ai un site qui a 2 js externe scripts actuellement juste au-dessus de l' </body> balise.

La première est jquery provenant de google et le second est un local extérieur de script que j'ai mis en place.

Je comprends que ces 2 options (async et reporter) uniquement dans les navigateurs HTML5.

Avec égards pour le site de la vitesse de charge:

Est-il un avantage en ajoutant 'async' pour les 2 scripts que j'ai au bas de la page?

Y aurait-il avantage est l'ajout d'un "asynchrone" option pour les 2 scripts et de les mettre en haut de la page dans l' <head> - serait-ce à dire qu'ils téléchargent comme le chargement de la page? Je suppose que ce serait la cause de retards pour HTML4 navigateurs mais ne serait-il accélérer la vitesse de chargement de la page pour les navigateurs HTML5?

Pourrais-je déplacer les 2 scripts dans l' <head> , puis utiliser "différer" pour obtenir le même effet que d'avoir les scripts avant d' </body>? une fois de plus, je suppose que ce serait ralentir HTML4 navigateurs.

Si j'ai 2 scripts avec "asynchrone" activé seraient-ils télécharger en même temps ou un par un avec le reste de la page? L'ordre des scripts deviennent alors un problème - par exemple: l'un dépend de l'autre, de sorte que si un téléchargement plus rapide que la seconde peut ne pas exécuter corriger etc.

Enfin, suis-je mieux de laisser les choses comme elles le sont jusqu'à ce que le HTML5 est plus couramment utilisé?

thx

461voto

jfriend00 Points 152127

Gardez vos scripts à droite avant d' </body>. Asynchrone peut être utilisé avec des scripts qui y est situé, dans quelques circonstances (voir la discussion ci-dessous). Reporter ne fera pas beaucoup de différence pour les scripts qui s'y trouvent parce que le DOM travail d'analyse a assez bien déjà été fait de toute façon.

Voici un article qui explique la différence entre async et de reporter: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/.

Votre code HTML affichera plus rapidement dans les navigateurs plus anciens, si vous gardez les scripts à la fin du corps juste avant de </body>. Donc, pour conserver la vitesse de charge dans les navigateurs plus anciens, vous ne voulez pas les mettre n'importe où d'autre.

Si votre second script dépend de la première script (par exemple, votre deuxième script utilise le jQuery est chargé dans le premier scénario), alors vous ne pouvez pas faire des async ou de reporter sans ajouter du code supplémentaire pour ne pas exécuter votre deuxième script jusqu'à ce que le jQuery est chargé. Si vous avez ce code et vous n'avez pas besoin de scripts pour exécuter tout de suite, vous pouvez les faire async ou de reporter. Il ne sera pas accélérer l'affichage de votre page, mais parce que la page doit déjà être affiché par le temps, les scripts de commencer le chargement.

Vous pourriez mettre les scripts dans l' <head> balise et définissez - defer et le chargement de scripts sera différé jusqu'à ce que le DOM a été analysé et qui vous permettra d'obtenir rapidement l'affichage de la page dans les nouveaux navigateurs qui prennent en charge reporter, mais il ne sera pas vous aider du tout dans les navigateurs plus anciens, et ce n'est pas vraiment plus rapide que les scripts de droit avant d' </body> qui fonctionne dans tous les navigateurs. Donc, vous pouvez voir pourquoi il est juste préférable de les placer à droite avant d' </body>.

Async est plus utile quand vous n'avez vraiment pas de soins lorsque le script charge et rien d'autre qui est dépendantes de l'utilisateur dépend de ce script de chargement. Le plus souvent citée comme un exemple pour l'utilisation asynchrone est un script analytics comme Google Analytics que vous ne voulez pas quelque chose à attendre et c'est pas urgent pour exécuter rapidement et se distingue donc rien d'autre en dépend.

Habituellement la bibliothèque jQuery n'est pas un bon candidat pour async parce que d'autres scripts en dépendent et que vous souhaitez installer des gestionnaires d'événement pour que votre page pouvez commencer à répondre aux événements de l'utilisateur et vous pouvez avoir besoin pour exécuter certains jQuery basé sur le code d'initialisation pour établir l'état initial de la page. Il peut être utilisé asynchrone, mais d'autres scripts devront être codés de manière à ne pas exécuter jusqu'à ce que jQuery est chargé.

246voto

Dinesh Points 122

HTML5: asynchrone, reporter

En HTML5, vous pouvez dire au navigateur lorsque pour exécuter votre code JavaScript. Il y a 3 possibilités:

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

① Sans "async" ou "reporter", le navigateur exécute votre script immédiatement, avant de rendre les éléments ci-dessous votre balise de script.

② Avec "async" (asynchrone), le navigateur va continuer à charger la page HTML et de le rendre alors que le navigateur de charger et d'exécuter le script dans le même temps.

③ Avec "reporter", le navigateur exécute votre script lorsque la page terminé l'analyse. (pas nécessaire à la finition de télécharger tous les fichiers d'image. Que c'est bon.)

43voto

Zameer Khan Points 436

Les deux async et defer scripts commencer à télécharger immédiatement et sans mise en pause de l'analyseur et à la fois de support optionnel onload gestionnaire à l'adresse de la commune pour effectuer l'initialisation, qui dépend du script.

La différence entre async et defer centres autour lorsque le script est exécuté. Chaque async script s'exécute à la première occasion après c'est fini le téléchargement et l'avant de la fenêtre de chargement de l'événement. Cela signifie qu'il est possible (et probable) que l' async les scripts ne sont pas exécutées dans l'ordre dans lequel ils se produisent dans la page. Alors que l' defer scripts, d'autre part, sont garantis pour être exécutée dans l'ordre d'apparition dans la page. Que l'exécution commence après l'analyse est complètement terminé, mais avant que le document de l' DOMContentLoaded événement.

Plus de détails sont ici

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X