Laden machen blockiert Skript vor Bild

Ich habe eine Seite mit folgender Struktur:Laden machen blockiert Skript vor Bild

<html> 
    <head> 
    <script type="text/javascript" src="//example.com/s1.min.js"></script> 
    <script type="text/javascript" src="//example.com/s2.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> 
    </head> 
    <body> 
    ... template initiation, layout, etc. ... 
    <ul> 
     <li><img src="https://cdn.example.com/img1.jpg"/></li> 
     <li><img src="https://cdn.example.com/img2.jpg"/></li> 
     <li><img src="https://cdn.example.com/img3.jpg"/></li> 
     ... and a lot more images ... 
    </ul> 
    ... a bunch of scripts here ... 
    </body> 
</html>

Wenn ich langsame Verbindung mit Chrome DevTool simulieren, wurde die Seite leer für bis zu 1 Minute, da die jquery Skript in den Kopf war Blockierung des DOM Das Laden des Skripts dauerte so lange, da Chrome die Bilder zur gleichen Zeit wie das Skript heruntergeladen hat, wodurch die Bandbreite gesättigt wurde.

Ich verstehe dieses Verhalten nicht. Ich dachte, Render-Skripte im Kopf wird zuerst heruntergeladen, bevor irgend etwas anderes im Körper? Der Testbeweis hat das Gegenteil bewiesen.

Ich kann nicht einfach die Jquery an den unteren Rand der Seite verschieben oder es asynchron machen, da es andere Skripte in der Seite, die ich nicht besitze, brechen könnte.

Ich habe eine Menge Diskussion über das Entfernen von Render-Blocking-Skript gesehen. Aber meine Frage ist mehr darüber, warum das Render-Blocking-Skript nicht "Priorität" Download bekommen? Und wenn es irgendetwas gibt, das ich tun kann, um zu garantieren, dass das 32KB-Skript heruntergeladen wird, lädt das DOM, das geladen wird, bevor das Netz durch Bilddownload gesättigt wird?

Bearbeiten: Hier ist die Zeitachse Grafik. Beachten Sie, dass jquery zuerst angefordert wird, die Bilder jedoch nicht blockiert werden. timeline graph

Quelle

2017-10-21 Hendrik Poernama

Versuch 'haben onload' Ereignis –

[Scripts vor der geladen und ausgeführt werden Laden der Bilder kann beginnen.] (https://stackoverflow.com/questions/28635141/sequence-in-which-html-page-loads) Zumindest sollte das der Browser tun. –

gibt es eine Diskussion des gleichen Themas hier https://stackoverflow.com/questions/2703468/is-it-possible-to-run-javascript-before-any-image-loads – msoliman

Eine gemeinsame aproach das Laden der Bilder zu verzögern, so etwas wie dieses wäre:

$(function(){ 
 
    $('img[data-src]').each(function(){ 
 
    if(!this.src) this.src = this.dataset.src; 
 
    delete this.dataset.src; 
 
    }) 
 
    //just to show the resulting markup, as the image-urls are just placeholder 
 
    console.log($('ul').html()); 
 
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> 
 
... template initiation, layout, etc. ... 
 
<ul> 
 
    <li><img data-src="https://cdn.example.com/img1.jpg" /></li> 
 
    <li><img data-src="https://cdn.example.com/img2.jpg" /></li> 
 
    <li><img data-src="https://cdn.example.com/img3.jpg" /></li> 
 
    ... and a lot more images ... 
 
</ul>

Quelle

2017-10-21 07:38:26 Thomas

Laden machen blockiert Skript vor Bild

Antwort

Verwandte Themen