web-dev-qa-db-fra.com

Rendre le blocage différé par rapport au script en bas

Je suppose que déplacer le script en bas revient à utiliser l'attribut différer ou async. Etant donné que reporter et async ne sont pas totalement compatibles avec l'ancien navigateur, je suis parti avec le script de chargement en bas de la page.

<html>
<body>
<!-- whole block of  html -->
<script type='text/javascript' src='app.js'></script>
</body>
</html>

Auparavant, j'avais déjà utilisé des outils d'évaluation des performances tels que GTmatrix et Google Speed ​​Page Insight. Les deux montraient le paramètre '' blocage du rendu '' comme problème principal. Je suis un peu confus maintenant, car même après avoir déplacé ces scripts vers le bas pour permettre au contenu/html de se charger en premier; ces outils signalent toujours que le blocage du rendu est un problème principal. 

J'ai regardé les autres publications de stackoverflow soulignant que même si les scripts chargés au niveau de bottom doivent avoir l'attribut 'différer'.

J'ai plusieurs questions:

  1. est dessus vrai?
  2. ces outils recherchent-ils spécifiquement l'attribut 'différer' ou 'asynchrone'?
  3. si je dois effectuer un repli avec w.r.t différer (spécifiquement pour les navigateurs IE), dois-je utiliser des instructions conditionnelles pour charger des scripts non différés pour IE?

Veuillez suggérer la meilleure approche. Merci d'avance.

javascripthtmlperformanceasynchronousrender
17
Robin

  1. Oui, les scripts chargés même en bas doivent avoir l'attribut defere, si cela est possible dans la conception et les exigences de votre site

  2. non, ces outils cherchent l'achèvement de l'analyse

  3. dépend de la version de IE que vous souhaitez prendre en charge, elles auront des recommandations différentes

Maintenant, expliquez un peu script, defer et async un peu, pour vous aider à comprendre les raisons:

Script La balise <script> simple arrêtera l'analyse à ce stade, jusqu'à ce que le script download et soit exécuté .

Async Si vous utilisez async, le script n'arrêtera pas l'analyse du téléchargement car il continuera à se télécharger en parallèle avec le reste du contenu HTML. Cependant, le script arrêtera l'analyse de execution et ensuite l'analyse de HTML se poursuivra ou se terminera

Report Si vous utilisez defer, le script n'arrêtera pas l'analyse des données HTML pour le téléchargement ou l'exécution du script. C'est donc en quelque sorte le meilleur moyen d'éviter d'ajouter du temps au temps de chargement de la page Web. 

Veuillez noter que différer est utile pour réduire le temps d'analyse du code HTML, mais qu'il n'est pas toujours préférable ni approprié dans chaque flux de Webdesign, soyez donc prudent lorsque vous l'utilisez.

4
Nabeel Khan

Au lieu de async, peut-être quelque chose comme ça (merci @ guest271314 pour l'idée)

<!DOCTYPE html>
<html>
<body>
<!-- whole block of  html -->

<!-- inline scripts can't have async -->
<script type='text/javascript'>
function addScript(url){
document.open();
document.write("<scrip" + "t src = \"" + url + "\"></scr" + "ipt>");//weird quotes to avoid confusing the HTML parser
document.close();
}
//add your app.js last to ensure all libraries are loaded
addScript("jquery.js");
addScript("lodash.js");
addScript("app.js");
</script>
</body>
</html>

C'est ce que tu voulais? Vous pouvez ajouter les attributs async ou defer à l'appel document.write si vous le souhaitez.

2
programmer5000

Pourquoi les scripts mentionnés enfin doivent-ils avoir un attribut différé?

La réponse est qu’en ajoutant différer au dernier script, vous réduisez réellement le nombre de ressources critiques à charger avant que la page ne soit peinte, ce qui réduit le chemin de rendu critique.

Oui, vous avez raison au moment où le dernier DOM est analysé, mais le navigateur n’a pas encore commencé à peindre le DOM. Par conséquent, domContentLoadedEvent est bloqué jusqu’à ce que l’activité Peinture et rendu soit terminée.

En ajoutant async/defer, nous indiquons au navigateur que la ressource n'est pas critique pour le rendu et qu'elle peut être chargée et exécutée après le chargement du contenu de dom. , plus tôt la logique d’application peut commencer à s’exécuter.

Reportez-vous au lien Google situé en dessous, qui illustre clairement le concept. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

0
Novice

Conformément à la spécification HTML 1.1, le blocage de script dans la page HTML bloque le rendu de la page jusqu'à ce que le fichier javascript de l'URL soit téléchargé et traité. 

Ajout de script à la fin de la page: autorisez le navigateur à poursuivre le rendu de la page. L’utilisateur pourra ainsi afficher la page au plus vite.

[Préféré] Ajouter une valeur différée à la balise script: promet au navigateur que le script ne contient aucun document.write ou code modifiant le document et lui permet donc de poursuivre le rendu.

Comme le fil précédent peut vous être utile

Est-il nécessaire de mettre des scripts au bas d'une page lorsque vous utilisez l'attribut "différer"?

0
Chennai Coder