1. Dom
  2. Pytanie i odpowiedź
  3. Treść znika na ułamek sekundy w przypadku obciążenia aplikacji internetowej w trybie offline

Treść znika na ułamek sekundy w przypadku obciążenia aplikacji internetowej w trybie offline

2011-09-23 15 views
8

Zaobserwowałem to na iOS 4.3 do wersji 5.0. Gdy tworzysz nawet prostą aplikację internetową w trybie offline, czyli jeden plik HTML i kilka zasobów, takich jak CSS i JS (wszystkie obecne w manifeście pamięci podręcznej), działa on w trybie offline (testowałem w trybie samolotowym) - ALE, po dodaniu taką aplikację na ekranie głównym i otworzyć w trybie pełnoekranowym, najpierw wyświetla początkową treść, , a następnie wszystko znika na (strona staje się biała) przez pół sekundy lub dłużej, a następnie zawartość ponownie się pojawia.Treść znika na ułamek sekundy w przypadku obciążenia aplikacji internetowej w trybie offline

Możesz to zobaczyć, dodając Glyphboard, dobrze znaną i przydatną aplikację internetową w trybie offline na ekranie głównym iOS i uruchamiając ją kilka razy. Powinieneś zobaczyć biały efekt błysku przy każdym ładowaniu.

Jest to poważny problem, ponieważ eliminuje nienaturalność aplikacji i sprawia wrażenie, że aplikacja nie jest zoptymalizowana pod kątem wydajności i błędów.

Próbowałem znaleźć raporty na ten temat, ale wszystko, co mogę znaleźć, to plotki i błędne przekonania na temat silnika JavaScript w wersji iOS 4.3, które wcale nie musi być związane z tym problemem. Ale w wersji iOS 3 pamiętam, że nigdy nie widziałem białego błysku.

Źródło

2011-09-23 mislav

Odpowiedz

5

Czyszczenie ekranu i innych artefaktów podczas renderowania jest częstym problemem renderowania HTML ze względu na postępujący charakter HTML. Koncepcja polega na tym, że przeglądarka powinna rysować tak wcześnie i często, jak to możliwe, i renderować style/skrypty/treści, gdy tylko będą dostępne. Możliwe, że w znaczniku występuje problem polegający na opóźnieniu renderowania do momentu udostępnienia niektórych treści lub skryptu. Może się to zdarzyć, gdy:

  • mieć dynamiczne wysokość na podstawie wymiarów obrazu, ale nie masz ustawić wymiary obrazka w znacznikach lub CSS.
  • Twój układ oparty jest na tabelach i nie używasz "układu tabeli: naprawiono" w CSS.
  • Twój HTML wykorzystuje wbudowane skrypty z document.write().
  • Masz jakąś funkcję onLoad(), która ujawnia/modyfikuje zawartość.
  • Link do zewnętrznego arkusza stylów.
  • Używasz niekompatybilnych treści zewnętrznych lub wyłączyłeś buforowanie.
  • Używasz zewnętrznych treści, które powracają 404 lub nie są dostępne offline.

Czy zmienił się Twój HTML/CSS między testowaniem wersji IOS?

Źródło

2011-10-13 05:19:36 SpliFF

+0

Nie, HTML/CSS się nie zmienił. Jednak dobry punkt o zewnętrznych aktywach. Zobaczę, czy to pomaga wprowadzić CSS w linii. – mislav

+2

Czy rozwiązałeś problem? Czy domyśliłeś się, co było przyczyną? –

1

Myślę, że to, co dzieje się tutaj, to to, że iOS pobiera zrzut ekranu ze strony, kiedy jest dodawany do głównego menu. Następnie ten zrzut ekranu jest wyświetlany podczas ładowania aplikacji (ładuje WebKit). WebKit zaczyna renderować stronę, a sama strona jest skonstruowana w taki sposób, że zawartość strony nie jest natychmiast dostępna, co prowadzi do białego flasha, który jest renderowaną stroną, gdy treść strony jeszcze nie istnieje,

Możesz uniknąć problem do pewnego poziomu, budując swój JS/CSS tak, aby szybko wczytał początkowy widok HTML, a następnie leniwie ładuje/buduje pozostałe zasoby w tle. Możesz także ustawić niestandardowy ekran ładowania zamiast domyślnego zastosowania iOS na zrzut ekranu ze strony.

Może jeśli można zrobić sobie zrzut ekranu z aplikacji i wtedy coś takiego:

<body style="background: white url('my-initial-loading-screen.png')" />

... i upewnij się, że obraz jest dostępny i pochodzi z manifestu.

Co więcej, ekran ładowania nie wymaga żadnych zewnętrznych zasobów (tylko zwykły HTML), więc wiadomo, że przeglądarka nie musi niczego ładować.

Źródło

2011-09-24 10:10:16

+0

Masz rację, jeśli chodzi o zrzut ekranu iOS, najpierw go uruchamiając, a następnie przerysowując stronę. Dlaczego jednak trzeba wyczyścić całą stronę pomiędzy? Ponadto Glyphboard (który wyraźnie wykazuje problem) ma zarówno "obraz dotykowy-rozruchowy" i kolor tła, a wszystko to znika. Wygląda na to, że nie możesz nic zrobić ze strony, aby temu zapobiec. – mislav

+0

Później przerysowanie strony może być związane z kodem JavaScript, układem HTML lub treścią - jestem pewien, że możesz tego uniknąć. To, co widzisz, to że przeglądarka wywołuje reflow https://code.google.com/speed/articles/reflow.html –

2

Znalazłem to być spowodowane przez użycie:

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">

z minimalną stronie, mam biały błysk między apple-touch-startup-obrazu i zawartości strony, jeśli mogę użyć metatag z rzutni. Jeśli wyjmę tag, bez lampy błyskowej.

Można obejść problem, ustawiając programowo program.

Źródło

2012-07-05 18:08:09

Powiązane problemy

 Powiązane problemy