In unserer SAAS-Webanwendung verwenden wir eine ganze Reihe von js und css-Dateien (insgesamt etwa 80), und einige der Dateien, insbesondere die anderen, hängen von jQuery ab, 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 404-Ladefehler handelt, bei denen es sich um Programmier- / Implementierungsfehler handelt, sondern nur um Zeitüberschreitungsfehler, die durch schlechte Netzwerkverbindungen verursacht werden.
Wir glauben 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 zu reduzieren, und ja, das könnte die Möglichkeit verringern, 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 über SO fand ich folgende Vorschläge:
1 Verwenden Sie window.error, um nicht abgefangene Ausnahmen zu erfassen, einschließlich nicht definierter Ausnahme;
2 Platziere einige spezielle Variablen / Zustände in jeder js / css-Datei und finde heraus, 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 Lazer Detection Technik, 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 3rd Party Plugins ändern;
3 Es wird gesagt, dass IE in einigen Szenarien Probleme beim Auslösen eines Onload-Ereignisses hat;
Was ist also der beste Cross-Browser-Mechanismus, um solche Ladefehler bei js / css-Dateien zu erkennen?
Tags und Links javascript css