it-swarm.com.de

Übertragen Sie das Blockieren des Verschiebens im Vergleich zu dem Skript, das sich unten befindet

Ich gehe davon aus, dass das Verschieben des Skripts im unteren Bereich mit dem Verschieben oder asynchronen Attribut identisch ist. Da Defer und Async nicht vollständig mit dem alten Browser kompatibel sind, habe ich mich mit dem Laden des Skripts am Ende der Seite entschieden.

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

Zuvor habe ich Performance-Benchmark-Tools wie GTmatrix und Google Page Speed ​​Insight eingesetzt. Beide werden als Hauptproblem angezeigt. Ich bin jetzt etwas verwirrt, da ich selbst nach dem Verschieben dieser Skripte Content/html zuerst laden kann. Diese Tools berichten immer noch über das Rendering-Blockieren als Hauptproblem. 

Ich habe mir die anderen stackoverflow-Posts angesehen und hervorgehoben, dass Skripts, die am bottom geladen werden, das Attribut 'defer' haben müssen.

Ich habe mehrere Fragen:

  1. ist oben wahr?
  2. suchen diese Tools speziell nach 'defer' oder 'async' Attribut?
  3. wenn ich einen Fallback w.r.t-Zeitversatz angeben muss (speziell für IE-Browser), muss ich unter Verwendung von Bedingungsanweisungen nicht defensierte Skripts für IE laden?

Bitte schlagen Sie den besten Ansatz vor. Danke im Voraus.

17
Robin
  1. Ja, die unten geladenen Skripts müssen ein defere-Attribut haben, sofern dies in Ihrem Website-Design und Ihren Anforderungen möglich ist

  2. nein, diese Tools suchen nach dem Abschluss der Analyse

  3. abhängig von der Version von IE, die Sie unterstützen möchten, gibt es unterschiedliche Empfehlungen

Nun werden die einfachen Variablen script, defer und async etwas erklärt, damit Sie die Gründe verstehen können:

Skript Das einfache <script>-Tag stoppt die Analyse an diesem Punkt, bis das Skript download und ausgeführt ausgeführt wird.

Async Wenn Sie async verwenden, unterbricht das Skript die Analyse für den Download nicht, da der Download parallel zum restlichen Inhalt der HTML-Datei fortgesetzt wird. Das Skript beendet jedoch die Analyse für Ausführung und erst dann wird die Analyse von HTML fortgesetzt oder abgeschlossen

Defer Wenn Sie defer verwenden, stoppt das Skript die Analyse von HTML-Daten nicht, um das Skript herunterzuladen oder auszuführen. Es ist also die beste Möglichkeit, zu vermeiden, dass sich die Ladezeit der Webseite verlängert. 

Bitte beachten Sie, dass die Verzögerung die Analysezeit von HTML reduziert, jedoch nicht immer in jedem Webdesign-Ablauf am besten geeignet ist. Seien Sie also vorsichtig, wenn Sie sie verwenden.

4
Nabeel Khan

Anstelle von async vielleicht etwas (danke @ guest271314 für die Idee)

<!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>

Wolltest du das? Sie können die async- oder defer-Attribute zum document.write-Aufruf hinzufügen, wenn Sie möchten.

2
programmer5000

Warum sollten die zuletzt genannten Skripte das Attribut verzögern müssen?

Nun, die Antwort ist, dass durch das Hinzufügen eines verzögerten zum letzten Skript tatsächlich die Anzahl der kritischen Ressourcen reduziert wird, die vor dem Zeichnen der Seite geladen werden müssen, was den kritischen Renderpfad verringert.

Ja, Sie sind zu dem Zeitpunkt korrekt, zu dem Sie das letzte DOM analysiert haben, aber der Browser hat noch nicht mit dem Zeichnen des DOM begonnen. Daher wird domContentLoadedEvent blockiert, bis die Paint- und Render-Aktivität abgeschlossen ist.

Durch das Hinzufügen von async/defer teilen wir dem Browser mit, dass die Ressource für das Rendern nicht kritisch ist und nach dem Laden von dom-Inhalten geladen und ausgeführt werden kann. Dies löst das domContentLoaded-Ereignis früher aus und je früher das domContentLoaded-Ereignis ausgelöst wird Je früher eine andere Anwendungslogik ausgeführt werden kann.

Verweisen Sie auf den google-Link darunter, um das Konzept klar darzustellen. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp

0
Novice

Gemäß HTML-Spezifikation 1.1 Der Skriptblock in der HTML-Seite würde das Rendern der Seite blockieren, bis die Javascript-Datei in der URL heruntergeladen und verarbeitet wird. 

Skript am Ende der Seite hinzufügen: Der Browser kann mit dem Seitenrendering fortfahren, sodass der Benutzer das Seitenrendern so schnell wie möglich sehen kann.

[Preferred] Hinzufügen von verzögertem Skript-Tag: Versichert dem Browser, dass das Skript keinen document.write- oder Dokumentänderungscode enthält, und ermöglicht daher die weitere Wiedergabe.

Als vorheriger Thread kann es für Sie nützlich sein

Ist es notwendig, Skripte am unteren Rand einer Seite zu platzieren, wenn das Attribut "defer" verwendet wird?

0
Chennai Coder