application.js Skript blockiert in „Warteschlangen“ Zustand, bis Bilder

Question

Unsere Website geladen hat eine asynchron geladen application.js:

<script async="async" src="//...application-123456.js"></script>

Zusätzlich haben wir eine Menge von Dritten Skripte haben, dass (1) asynchron geladen werden und (2) wiederum ein asynchrones <script>-Tag erzeugen, an dem ein größeres Skript aufgerufen wird.

Um nur ein Beispiel zu nennen, ist eines dieser Skripte von Drittanbietern Google's gpt.js (Sie können schnell einen Blick darauf werfen, wie es funktioniert).

Unser Problem ist, dass, während alle Drittanbieter-Skripte asynchron wie erwartet geladen werden, die Anwendung.js Stapel in "Warteschlangen" Status für mehr als 4 Sekunden bekommt.

Ich habe versucht, das Skript zu ändern, und es wie die Dritte diejenigen laden machen: Erstellen Sie eine <script> Element, setzen Sie das „src“ -Attribut und laden Sie es:

<script async> 
    (function() { 
     var elem = document.createElement('script'); 
     elem.src = 'http://...application-123456.js'; 
     elem.async = true; 
     elem.type = 'text/javascript'; 
     var scpt = document.getElementsByTagName('script')[0]; 
     scpt.parentNode.insertBefore(elem, scpt); 
    })(); 
</script> 

aber nichts geändert.

Dann studierte ich die Netzwerk-Kaskade in einer Seite unserer Website, die fast keine Bilder enthält, und ich sah, dass die Wartezeit fast Null war. Ich habe das gleiche Experiment auf Seiten mit unterschiedlichen Bildmengen versucht und festgestellt, dass die Wartezeit in Seiten mit mehr Bildern proportional zunimmt.

Ich lese diese in Chrome's network cascade documentation:

Wartezeit: Der Antrag der Rendering-Engine wurde verschoben, weil sie eine niedrigere Priorität als kritische Ressourcen (wie scripts/Stile) betrachtet wird. Dies passiert oft mit Bildern.

Ist es möglich, dass der Browser aus irgendeinem Grund unsere application.js als "niedrigere Priorität" markiert? Ich habe im Internet gesucht und es scheint, dass niemand Probleme mit der Wartezeit hatte. Hat jemand eine Idee?

Vielen Dank.

Answer 1

Browser verwenden einen Pre-Loader, um die Netzwerkauslastung zu verbessern. This article erklärt das Konzept.

Im Chrome Documentation Sie oben verbunden, sagt er folgendes über Warteschlangen:

Wenn eine Anforderung, dass angegebene Warteschlange gestellt wird: die Rendering-Engine, weil:

• Der Antrag wurde vertagt Es wird als weniger wichtig eingestuft als kritische Ressourcen (z. B. Skripts/Stile). Dies passiert oft mit Bildern.
• Die Anforderung wurde in die Warteschleife gestellt, um auf einen nicht verfügbaren TCP Socket zu warten, der gerade freigegeben wird. Die Anforderung wurde angehalten, da der Browser nur sechs TCP-Verbindungen pro Ursprung auf HTTP 1 zulässt.
• Zeitaufwand für die Erstellung von Festplatten-Cache-Einträgen (normalerweise sehr schnell.
)

Die Pre-Loader die leichten Ressourcen hätte, schnell, wie die Stile und Skripte abgerufen und dann die Bilder der Warteschlange, weil, wie die oben genannten Kriterien schon sagt, nur 6 TCP-Verbindungen pro Ursprungs eingeführt werden dürfen . Daher würde dies die Verzögerung der gesamten Antwortzeit erklären.

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• Keine verwandten Themen^_^