Detect js/css Datei laden Fehler

Question

In unserer SAAS Web App, verwenden wir eine ganze Reihe von js und CSS-Dateien (rund 80 insgesamt), und einige der Dateien, die wie jQuery abhängig sind, müssen geladen werden bevor unsere App ordnungsgemäß ausgeführt werden kann.

In einer idealen Netzwerkumgebung ist dies kein Problem, da alle Ressourcen jedes Mal geladen werden. Aber in einer Produktionsumgebung haben wir festgestellt, dass es nicht selten ist, dass einige der js/css-Dateien nicht ordnungsgemäß geladen werden, wenn das Netzwerk schlecht ist. Wenn dies geschieht, protokolliert der Browser die js/css-Ladezeitüberschreitungsfehler in der Konsole, und die App wird ausgeführt. Wenn dann die App versucht, einige Funktionen aufzurufen, die in den js-Dateien definiert sind, die nicht geladen werden konnten, wird in der Konsole eine nicht definierte Ausnahme ausgelöst und protokolliert, und die App wird nicht mehr ausgeführt, was die Benutzer die meiste Zeit verwirrt. Beachten Sie, dass es sich nicht um Ladefehler von 404 handelt, bei denen es sich um Programmier-/Bereitstellungsfehler handelt, sondern nur um Zeitüberschreitungsfehler, die durch schlechte Netzwerkverbindungen verursacht werden.

Wir denken nicht, dass eine solche Erfahrung optimal ist. Wir möchten prüfen, ob alle Ressourcen geladen sind, bevor die App ausgeführt wird. Wenn es ein Problem gibt, warnen wir den Benutzer, damit er die App neu laden kann, was unserer Meinung nach einen Großteil der Verwirrung verringern kann.

Einige könnten vorschlagen, die Dateien zu concattieren und die Zahl auf ein Paar herabzusetzen, und ja, das könnte die Möglichkeit reduzieren, Zeitüberschreitungsfehler zu haben. Aber das wird das Problem nicht lösen - wir könnten immer noch Zeitlimitfehler haben, wenn wir ein paar Dateien laden.

Nach einigen Nachforschungen zu SO fand ich die folgenden Vorschläge:
1 Verwenden Sie window.error, um nicht abgefangene Ausnahmen zu erfassen, einschließlich undefinierter Ausnahme;
2 Platzieren Sie eine spezielle Variable/einen bestimmten Status in jeder js/css-Datei und ermitteln Sie, ob diese Variable/dieser Zustand existiert;
3 Verwenden Sie den Onload-Ereignishandler, um ein Ladeereignis erfolgreich zu registrieren, und rufen Sie dann setTimeout auf, um festzustellen, ob ein Ereignis registriert wurde.

AFAICS, diese haben einige Nachteile:
1 ist eine träge Erkennungstechnik, d. H. Wir wissen nicht, dass das Skript nicht richtig geladen wird, bis die Ausnahme ausgelöst wird;
2 chaotisch, müssen in einigen Fällen Plug-Ins von Drittanbietern ändern;
3 Es wird gesagt, dass IE einige Probleme hat, Onload-Ereignis in einigen Szenarien zu feuern;

Was ist also der beste Cross-Browser-Mechanismus, um solche Ladefehler bei js/css-Dateien zu erkennen?

Answer 1

Sie können Ihre Skripte in Javascript laden. Zum Beispiel:

var scriptsarray=new Array(
"script1.js", 
"script2.js", 
"style1.css", 
"style2.css" 
) 

var totalloads=0; 

for (var i=0;i<scriptsarray.length;i++){ 
var script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        script.src = scriptsarray[i] + '?rnd=' + Math.random(); 
        document.body.appendChild(script); 
    script.addEventListener('load', wholoads, false); 
    script.addEventListener('error', errload,false); 
} 

function wholoads(scriptname){ 
totalloads++; 
if (totalloads==scriptsarray.length){alert('All scripts and css load');} 
} 

function errload(event){ 

    console.log(event); 
} 

Answer 2

window.addEventListener("error", function (e, url) { 
    var eleArray = ["IMG", "SCRIPT", "LINK"]; 
    var resourceMap = { 
     "IMG": "Picture file", 
     "SCRIPT": "JavaScript file", 
     "LINK": "CSS file" 
    }; 
    var ele = e.target; 
    if(eleArray.indexOf(ele.tagName) != -1){ 
     var url = ele.tagName == "LINK" ? ele.href: ele.src; 
     console.log("src：" + url + " File" + resourceMap[ele.tagName] + "failed loading. "); 

     return true;// dont show in console 
    } 
}, true);