Поздний рендеринг веб-браузера Android

Я написал приложение в основном в JS (Mootools) и HTML, загруженном в webview в моем приложении.

Это всего лишь один html файл, который отображает или скрывает части (элементы) страницы, добавляя или удаляя класс nodisplay:

.nodisplay {display:none}
function showPage1()
{
     $$('.pages').addClass('nodisplay');
     $('page1').removeClass('nodisplay');
}

В android 4 (xperia arc и galaxy note 2) Я вижу странный поздний рендеринг, но я не знаю, как ведут себя более старые версии. когда я скрываю элемент и показываю другой, он сначала кажется правильным, но во время прокрутки некоторые части старых элементов появляются в миллисекундах и немедленно исчезают. Он как рендеринг не видимой области откладывается до момента рисования.

А также когда-то просто нечетные мигания во время скрытия и показа.

В chrome на ПК у него нет никаких проблем. Даже в AVD он работает очень остро, без каких-либо мерцаний.

Я не знаю, есть ли проблема андроида и есть ли способ его преодолеть?

Я пробовал android:hardwareAccelerated="false"|"true", никакого эффекта. а также ws.enableSmoothTransition(), который также не решает проблему.

Ответ 1

Ответ Ajay дал мне намек на то, что я использовал в другом проекте, чтобы я мог сделать WebView фон прозрачным. До сих пор я не знал, что код отключает аппаратное ускорение. Я протестировал этот мир кода в этом проекте, и больше нет конца. хотя прокрутка страницы не такая гладко, как раньше, но лучше, чем поздняя рендеринг.

Это код для исправления всего этого:

if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

Кстати, он как определение android:hardwareAccelerated="false" не влияет на WebView!

Ответ 2

Вот мой "Исправьте ваше приложение для веб-просмотра одним ответом в стеке (первое издание)":

Производительность

Сохраняйте ссылки на свои элементы страницы в JS для повышения производительности. $('.page1') должен анализировать DOM каждый раз, когда вы меняете страницу, и это должно происходить только один раз. Это также относится к $('.pages') - он должен сканировать и выполнять операции над несколькими элементами. Вместо этого я предлагаю вам сохранить активную ссылку на страницу. Может быть, он должен выглядеть примерно так:

function showPage(page) { // receive active page; page is the jQuery ref to the next page
    activePage.addClass('nodisplay'); // activePage is the jQuery ref to the previous page
    page.removeClass('nodisplay'); // show the page
}

Вы должны отсканировать свое приложение и исправить такие проблемы. Они могут показаться не очень серьезными, но я уверен, что они могут изменить ситуацию в мобильной ОС, где ресурсы ограничены.

Управление DOM

Если вы еще этого не сделали, вам обязательно нужно использовать шаблоны. Помимо помощи в управлении вашим приложением, шаблоны помогают максимально упростить DOM: вместо 100 элементов страницы вы можете начать с 0 и создавать их на лету, когда это необходимо. Чтобы достичь максимальной производительности, убедитесь, что вы создаете каждый шаблон только один раз - перед рендерингом проверьте, существует ли страница в DOM. Чтобы увидеть, как это влияет на ваше приложение, просто перейдите в браузер браузера.

Есть много инструментов для этой работы. Учитывая текущую настройку, вы можете выбрать: http://mootools.net/forge/p/template. Вот некоторые другие варианты: http://mustache.github.com/, http://underscorejs.org/#template, http://api.jquery.com/category/plugins/templates/.

Пользовательский интерфейс

Также очень важно, но очень обширно. Некоторые вещи, о которых нужно помнить:

облегченная, семантическая и действительная разметка
js должен управлять данными и состоянием. Анимации и обновления DOM замедлят вас. Используйте дружественную среду css3
оптимизировать изображения и использовать их только как визуальные. Если вы не можете избежать этого, спрайты всегда являются хорошей идеей.

Отладка

Может быть больно. Я нашел очень полезным: http://people.apache.org/~pmuellr/weinre/docs/latest/. Правила блока try ... catch! Что-то, что поможет с выходом logcat: http://jsharkey.org/blog/2009/04/22/modifying-the-android-logcat-stream-for-full-color-debugging/.

Нижняя линия, веб-просмотр по-прежнему является суровой средой, и хотя в последнее время это стало возможным вариантом, для этого требуется много размышлений и планирования, чтобы "понять".

Надеюсь, что это поможет.

Ответ 3

Я мало что знаю о html с webkit. Но один из моих проектов имел те же проблемы с прокруткой с задержкой в эффектах скрытия и показа прокрутки. Я разрешаю аппаратное ускорение для веб-просмотра.

Вероятно, вы должны попробовать это.

Ответ 4

.nodisplay {height:0; display:none; }

работал здесь...

Ответ 5

попробуйте этот код, он мне очень помог. -webkit-transform: translateZ(0); вы можете взглянуть на мой код, в котором это мне помогло.. jquery toggle (показать/скрыть) на основе селектора

Также посмотрите ссылку ниже; http://www.html5rocks.com/en/mobile/optimization-and-performance/