Der Inhalt verschwindet für den Bruchteil einer Sekunde beim Laden der Offline-Webanwendung

8

Ich habe das auf iOS 4.3 bis 5.0 beobachtet. Wenn Sie eine einfache Offline-Webanwendung erstellen, also eine HTML-Datei mit wenigen Assets wie CSS und JS (alle im Cache-Manifest vorhanden), funktioniert sie offline (ich habe sie im Flugzeugmodus getestet) - ABER Wenn Sie eine solche App zu Ihrem Startbildschirm hinzufügen und im Vollbildmodus öffnen, zeigt sie zuerst den ersten Inhalt an, dann verschwindet alles für eine halbe Sekunde oder länger und der Inhalt wird wieder angezeigt wieder.

Sie können dies sehen, indem Sie Glyphboard , eine bekannte und nützliche Offline-Web-App, auf Ihrem iOS-Startbildschirm hinzufügen und starten ein paar Male. Sie sollten den weißen Flash-Effekt jedes Mal sehen, wenn Sie ihn laden.

Dies ist ein großes Problem, da es die Nicht-Ursprünglichkeit einer App verschenkt und den Eindruck erweckt, dass die App nicht auf Leistung und Buggy optimiert ist.

Ich habe versucht, Berichte darüber zu finden, aber alles, was ich finden kann, sind Gerüchte und Missverständnisse über das iOS 4.3-JavaScript-Rendering-Engine-Fiasko, das überhaupt nicht mit diesem Problem verbunden sein muss. Aber in iOS Version 3 erinnere ich mich eindeutig daran, dass ich nie den weißen Blitz gesehen habe.

    
mislav 23.09.2011, 22:54
quelle

3 Antworten

5

Das Löschen des Bildschirms und anderer Artefakte beim Rendern ist ein häufiges Problem beim HTML-Rendering aufgrund der progressiven Natur von HTML. Das Konzept ist, dass der Browser so früh und so oft wie möglich zeichnen sollte und Stile / Skripte / Inhalte rendern soll, sobald sie verfügbar sind. Es ist möglich, dass das Markup ein Problem hat, bei dem das Rendering verzögert wird, bis ein Inhalt oder ein Skript verfügbar ist. Dies könnte passieren, wenn:

  • Sie haben dynamische Höhen basierend auf Bilddimensionen, aber Sie haben keine Legen Sie die Bildmaße im Markup oder CSS fest.
  • Ihr Layout basiert auf Tabellen und Sie verwenden in CSS kein 'table-layout: fixed'.
  • Ihr HTML verwendet Inline-Skripte mit document.write ().
  • Sie haben eine Art onLoad () -Funktion, die Inhalte anzeigt / ändert.
  • Sie verlinken auf ein externes Stylesheet.
  • Sie verwenden nicht speicherbaren externen Inhalt oder Sie haben das Caching deaktiviert.
  • Sie verwenden externen Inhalt, der 404 zurückgibt oder offline nicht verfügbar ist.

Hat sich Ihr HTML / CSS zwischen dem Testen von IOS-Versionen geändert?

    
SpliFF 13.10.2011, 05:19
quelle
2

Ich habe festgestellt, dass dies durch Folgendes verursacht wurde:

%Vor%

Bei einer minimalen Seite erhalte ich einen weißen Blitz zwischen dem Apple-Touch-Startup-Image und dem Seiteninhalt, wenn ich das Viewport-Meta-Tag verwende. Wenn ich das Tag herausnehme, kein Blitz.

Es ist möglich, das Problem zu umgehen, indem Sie das Tag programmatisch setzen.

    
Paul Greyson 05.07.2012 18:08
quelle
1

Ich denke, hier passiert, dass iOS einen Screenshot von der Seite erstellt, wenn er zum Hauptmenü hinzugefügt wird. Dann wird dieser Screenshot während des Ladens der Anwendung angezeigt (WebKit lädt). WebKit beginnt mit dem Rendern der Seite, und die Seite selbst ist so konstruiert, dass der Seiteninhalt nicht sofort verfügbar ist, was zu einem weißen Flash führt, der eine gerenderte Seite ist, wenn der Seiteninhalt noch nicht da ist,

Sie können das Problem auf ein bestimmtes Niveau reduzieren, indem Sie Ihr JS / CSS so aufbauen, dass es die anfängliche HTML-Ansicht schnell lädt und dann den Rest der Ressourcen im Hintergrund träge lädt / aufbaut. Außerdem können Sie einen benutzerdefinierten Ladebildschirm anstelle des Standard-Screenshots, den iOS von der Seite verwendet, festlegen.

Vielleicht, wenn du dir einen Screenshot deiner App machen kannst und dann so etwas haben kannst:

%Vor%

... und stelle sicher, dass ein Bild verfügbar ist und aus dem Manifest kommt.

Oder noch besser, Ladebildschirm, der keine externen Ressourcen zum Anzeigen benötigt (einfach HTML), damit Sie wissen, dass der Browser nichts laden muss.

    
Mikko Ohtamaa 24.09.2011 10:10
quelle

Tags und Links