Ladezeit von Files: JS vs JSON

J

jemand anders

Erfahrenes Mitglied
Hallo,

hat jemand eine Idee, warum der im Grunde gleiche File - einmal mittels Script-Tag geholt als JS-File und einmal mittels Fetch geholt als JSON-File - in der JSON-Version rund 20 mal länger braucht beim Laden?

Freundl. Grüße
 
Das sind Files mit jeweils rund 650 KB und 550 Sätzen. Die Daten sind aber nicht für die Öffentlichkeit. Mir ist das nur durch Zufall aufgefallen hier auf meinem Localhost und war erstaunt, sodass ich mich fragte, wie das sein kann. Wie gesagt, ein Script-Tag vs ein Fetch-Statement.
Javascript: 
<script src="./file.js"></script>
----------------------
var content;
fetch('./file.json').then(function (response) {
}).then(function (data) {
    content = data;
}).then(function() {
    fun();
});
 
Zuletzt bearbeitet:
Ein Grund könnte sein, dass es ein Mal aus dem Cache kommt und das andere Mal direkt geladen wird. Aber nicht richtig plausibel weil auch Dateien, die mit fetch geladen werden, ggf. aus dem Cache geholt werden.
in der JSON-Version rund 20 mal länger braucht beim Laden?
Zum Vergrößern anklicken....
Ich nehme an, dabei beziehst Du dich auf das Netzwerk-Tab in den Entwicklerwerkzeugen.

Was mich irritiert: Die Datei, die Du in Zeile 1 einbindest, ist anscheinend die selbe wie die, die Du mit fetch holst. Wenn Du sie mit dem Script-Tag einbindest müsste jedoch nicht nur das nackte JSON drin stehen sondern auch die Zuweisung zu einer Variablen:
Code: 
var data = {hier dein JSON};
 
Ich habe das mit Date() gemessen.
Sorry, war beides beides json; habe ich korrigiert.

Mein Testscript:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>

    <style>
    </style>
    <script src="./../file.js"></script>
    
</head>

<body>

<button onclick="test.hello('Nochmal Hello')">click</button>

<script>

"use strict"

var content;

var begin = new Date();
console.log(content.length);
var ende1 = new Date();
console.log(ende1-beginn);

fetch('./../file.json').then(function (response) {
    if (response.ok) {
        return response.json();
    } else {
        return Promise.reject(response);
    }
}).then(function (data) {
    content = data;
}).then(function() {
    test.hello('Hello');
});

var test = (function() {
    
    var ende2 = new Date();
    console.log(content.length);
    console.log(ende2-beginn);
    
    var hello = function(msg) {
        return console.log(msg);
    }

    return{hello:hello}

})();

</script>

</body>
</html>
 
Habe das Script entsprechend auf performance.now() geändert, wodurch die Werte etwas geringer ausfallen. Sie weichen jedoch erheblich von denen im Netzwerk-Tab ab.
Dort sehe ich nun fast gleiche Ladezeiten 3 bis 4 Sekunden beim erstmaligen Laden, und wenn aus dem Cache gelesen wird, ca. 1,5 Sekunden für den JS-File und ca. das Doppelte für den JSON-File.
Warum der json-Wert so hoch war, als ich den Post eröffnet habe, ist mir nicht ganz klar. Vielleicht war der Rechner hoch ausgelastet.
 
Sie weichen jedoch erheblich von denen im Netzwerk-Tab ab.
Zum Vergrößern anklicken....
Wenn Du die Laufzeit im Code misst, kommt noch die Zeit für das Parsing zu der reinen Ladezeit hinzu.

Davon abgesehen kann ich nicht erkennen, wie man den Zeitbedarf für das Laden und Parsen mit dem script-Tag durch Einträge im Code messen kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück