Chrome pour moi a toujours été une référence sur les standards du web, malheureusement le report n'est pas supporté et IE le supporte depuis la version 5.5. Pourquoi ?
js.js
document.getElementById ("hi").innerHTML = "Hi :)";
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<script defer="defer" src="js.js"></script>
<title>Hi</title>
</head>
<body>
<div id="hi"></div>
</body>
</html>
defer et async moyenne?Par défaut, un <script src=...></script> balise est mal! Le navigateur doit mettre un terme à l'analyse du HTML jusqu'à ce que le script téléchargé et exécuté (depuis le script pourrait appeler document.write(...) , ou de définir des variables globales qui, plus tard, des scripts dépendent). Cela signifie que toutes les images et feuilles de style qui sont après la balise de script de ne pas commencer le téléchargement jusqu'à ce que, une fois le script terminé le téléchargement et l'exécution. Des scripts externes généralement à rendre le Web se chargent beaucoup plus lentement, ce qui est pourquoi NoScript est devenu si populaire.
Microsoft a lancé defer pour résoudre le problème. Si vous utilisez <script defer src=...></script>, vous promets de ne pas appeler document.write(...). Un defer script externe va commencer à télécharger immédiatement, mais ne s'exécute qu'après que la page est affichée. Après que la page a rendu, toutes defer scripts sont exécutés dans le même ordre qu'ils ont été déclarés. Tous les navigateurs n'implémentent defer encore.
HTML5 introduit l' async attribut qui peut exécuter tout le temps-peut-être avant que la page a fini de l'analyse ou même avant les autres defer/async scripts qui sont encore en téléchargement. Mais il est plus difficile d'utiliser plusieurs async scripts parce que leur ordre d'exécution n'est pas garanti. Comme defer, tous les navigateurs n'implémentent async encore.
Après tout, defer et async scripts ont exécuté, l' DOMContentLoaded et load événements feu.
defer et async
defer.defer, mais malheureusement, il ne dit pas exactement quand defer exécution des scripts (Tous dans l'ordre? Avant d' onload?). Donc, pas d'autres navigateurs defer parce que personne ne veut l'ingénierie inverse sur IE comportement ou briser des scripts qui peut dépendre d'IE particularités. (Voir la Mozilla demande de fonctionnalité, par exemple).defer: defer scripts doivent toutes être exécutées dans l'ordre après le reste de la page est analysée, et avant d' onload. Il introduit également async pour spécifier les scripts qui peut s'exécuter à chaque fois qu'ils sont téléchargés sans avoir à attendre les uns des autres. Malheureusement, HTML5 contredit IE en ne permettant pas inline defer scripts. Cela rompt l'invariant que tous defer scripts sont exécutés dans l'ordre (si certains defer scripts ont src et certains ont du contenu en ligne).defer.async.defer et async sont enregistrés dans Webkit. Vous devriez le voir dans Chrome et Safari très bientôt (elle est déjà dans le Chrome dev canal, mais il est un peu buggé).defer et async et pour IE à mettre en oeuvre async.Il n'y a pas une seule règle à suivre en ce moment. Vous avez à choisir la solution la mieux des soldes de la simplicité, de la page de rendu de la latence et de l'exécution du script de latence pour l'ensemble des navigateurs qui accèdent à votre site web.
<script async defer src=...></script>: Cela permet de rendu de continuer en parallèle à écrire le script de téléchargement pour IE et les derniers navigateurs HTML5, mais des causes pré-HTML5 dans les navigateurs (y compris toutes les versions de l'Opéra) à bloc.defer (mais pas async) et ils seront exécutés dans l'ordre où ils ont été déclarés. Encore une fois, cela permet de rendu de continuer en parallèle à un script de téléchargement en IE et HTML5-conscient Gecko/Webkit, mais les anciens navigateurs et de l'Opéra en souffrira. C'est une bonne idée d'utiliser defer même si les scripts sont au bas de la page afin qu'ils téléchargent en parallèle les uns avec les autres.defer pour les scripts parce que le HTML5, le projet a pris de l'ordonnance d'exécution de la garantie.async d'attribut. En d'autres termes, la plupart des navigateurs plus anciens, c'est un script en bas de la page, et les navigateurs les plus récents reconnaître l' async. Mais les utilisateurs de Opera obtenir le pire des deux mondes, parce que l'Opéra commence l'exécution immédiatement et de ne pas comprendre async. C'est le modèle recommandé par Google Analytics pour l'oursin sur de nombreuses pages web.extrait:
<script>
(function() {
var script = document.createElement('script');
script.src = '...';
script.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(script, s);
})();
</script>
Mise à jour: Si vous avez des scripts divisé en modules et souhaitez améliorer les performances, je recommande le "Couplage Asynchrone Scripts" de Même plus Rapide des Sites Web par Steve Souder. Il contient des conseils/astuces pour non seulement le contrôle de l'exécution de l'ordre, mais aussi de retarder l'analyse de scripts pour améliorer les performances.
defer est pris en charge uniquement par internet explorer. vous n'avez pas besoin de compter sur elle. il y a d'autres façons d'obtenir le même effet, comme placer vos scripts à la fin de la page, juste avant la </body> balise, comme d'autres l'ont souligné.
Le but de reporter est-à-dire la script externe lié à attendre jusqu'à ce que chargement de la page terminé jusqu'à ce qu'il s'exécute. La même chose peut être réalisé via un bon discrète Les méthodes JavaScript, qui habituellement inclure le code qui empêche les scripts de l'exécution jusqu'à ce que le DOM est fini de se charger.
L'avantage de reporter se produit dans connexion avec Internet Explorer, depuis que le navigateur est le seul qui prend en charge l'attribut defer. Donc, si vous avez besoin d'un rapide script à exécuter seulement dans IE, et vous n'avez pas l'esprit si l' ensemble de chargement de la page avant qu'il commence à exécuter, puis il suffit d'ajouter defer="defer" dans votre balise et qui rapidement prendre soin de ce problème. La fixation d'une image PNG transparente question dans IE6 une utilisation pratique pour reporter.
L'attribut defer doit être utilisé lorsque le masquage d'un script à partir de d'autres navigateurs avec un conditionnel le commentaire que les objectifs de l'IE-seulement script - sinon, le script sera exécuté normalement dans les autres navigateurs.)
Référence: http://www.impressivewebs.com/10-javascript-quick-tips-and-best-practices/
Si les scripts peuvent être différés, ils peuvent également être déplacés vers le bas de la page (comme indiqué par @Christian dans les commentaires)
Ce serait un meilleur choix en termes de performances, car cela n'empêchera pas le reste de la page de se charger. Vous pouvez placer vos scripts avant la balise </body> .
Cet attribut est mal pris en charge par les principaux navigateurs, cela en soi devrait être un indice pour cesser de l'utiliser.
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.
