Контент исчезает на долю секунды при загрузке автономного веб-приложения - PullRequest
Новая
       43

Контент исчезает на долю секунды при загрузке автономного веб-приложения

8 голосов
/ 24 сентября 2011

Я наблюдал это на iOS 4.3 до 5.0. Когда вы создаете даже простое автономное веб-приложение, то есть один файл HTML + несколько ресурсов, таких как CSS и JS (все они присутствуют в манифесте кэша), оно работает в автономном режиме (я тестировал в режиме полета) - НО Когда вы добавляете такое приложение на домашний экран и открываете его в полноэкранном режиме, оно сначала отображает исходный контент, , затем все исчезает (страница становится белым) на полсекунды или более, затем контент снова появляется.

Это можно увидеть, добавив Glyphboard , известное и полезное автономное веб-приложение, на домашний экран iOS и запустив его несколько раз. Вы должны видеть эффект белой вспышки каждый раз, когда загружаете его.

Это большая проблема, потому что она избавляет от неродного свойства приложения и создает впечатление, что приложение не оптимизировано для производительности и содержит ошибки.

Я пытался найти отчеты об этом, но все, что я могу найти, - это слухи и заблуждения о фиаско движка рендеринга JavaScript в iOS 4.3, который вообще не должен быть связан с этой проблемой. Но в iOS версии 3 я точно помню, что никогда не видел белую вспышку.

Ответы [ 3 ]

5 голосов
/ 13 октября 2011

Очистка экрана и других артефактов во время рендеринга является распространенной проблемой рендеринга HTML из-за прогрессивного характера HTML.Концепция заключается в том, что браузер должен рисовать как можно раньше и чаще и отображать стили / сценарии / контент по мере их появления.Возможно, в разметке есть проблема, из-за которой весь рендеринг задерживается до тех пор, пока не станет доступен какой-либо контент или скрипт.Это может произойти, если:

  • У вас есть динамические высоты, основанные на размерах изображения, но вы не установили размеры изображения в разметке или CSS.
  • Ваш макет основан на таблицах иВы не используете 'table-layout: fixed` в CSS.
  • Ваш HTML использует встроенные скрипты с document.write ().
  • У вас есть какая-то функция onLoad (), которая показывает / изменяет содержимое.
  • Вы ссылаетесь на внешнийтаблица стилей.
  • Вы используете не кэшируемый внешний контент или отключили кэширование.
  • Вы используете внешний контент, который возвращает 404 или недоступен в автономном режиме.

Изменился ли ваш HTML / CSS между тестированием версий IOS?

2 голосов
/ 05 июля 2012

Я обнаружил, что это вызвано использованием: 

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

При минимальной странице я получаю белую вспышку между изображением apple-touch-startup-image и содержимым страницы, если я использую метатег viewport. Если я достану метку, вспышка не будет.

Можно обойти проблему, установив тег программно.

1 голос
/ 24 сентября 2011

Я думаю, что здесь происходит то, что iOS делает снимок экрана со страницы, когда он добавляется в главное меню.Затем этот скриншот отображается во время загрузки приложения (загрузки WebKit).WebKit начинает рендеринг страницы, а сама страница создается таким образом, что содержимое страницы не доступно сразу, что приводит к появлению белой вспышки, которая представляет собой страницу, когда содержимого страницы еще нет,

Вы можетеИзбегайте проблемы до определенного уровня, создав свой JS / CSS так, чтобы он быстро загружал исходное представление HTML, а затем лениво загружал / собирал остальные ресурсы в фоновом режиме.Также вы можете установить пользовательский экран загрузки вместо скриншота по умолчанию, который использует iOS со страницы.

Может быть, если вы сможете сделать снимок экрана своего приложения и получить что-то вроде этого: 

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

... и убедитесь, что изображение доступно и получено из манифеста.

Или даже лучше, иметь загрузочный экран, который не требует никаких внешних ресурсов для отображения (просто HTML), чтобы вы знали, что браузер не должен ничего загружать.

...