Уменьшить потребление ресурсов для скрытых элементов с помощью телефонного разговора

Я пишу веб-приложение с html/js/css и телефоном. У меня есть два раздела на странице, и каждый из них длинный список. В то же время видно только одно. Когда списки очень длинные, производительность ухудшается. Предоставляет ли браузер ресурсы для отображения: нет элементов? Если нет, то как я могу освободить ресурсы для скрытого раздела (и быстро восстановить его, когда это необходимо)?Уменьшить потребление ресурсов для скрытых элементов с помощью телефонного разговора

источник

2013-09-25 mrmoment

Если это все еще проблема, могу ли я узнать, как вы обрабатываете прокрутку списка? Узкое место может быть здесь. Я бы предложил посмотреть библиотеку 'iScroll 4'. Насколько я знаю, он работает для Android 2.3 и iOS. Также не пытайтесь использовать много текстовых теней, градиентов и других CSS3-блогов в длинных списках. Они, как правило, свист производительности. – Hless

Я точно знаю, что вы имеете в виду о плохом качестве, когда дело доходит до длинных списков. Похоже на разрывание экрана на секунду, затем он догоняет. Поместите ниже на верхнем уровне (попробуйте тело {}) вашего файла CSS:

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

источник

2013-09-25 14:08:29 Dom

Зачем добавлять это в тело, чтобы мой фон тела не показывался? Кажется, рекомендуется для ios, но глючит в android. – mrmoment

Действительно? Это странно. Но это исправить вашу проблему? Правила css, приведенные выше, используются для удаления 3D-преобразований и делают их 2D, что повышает производительность. Попробуйте добавить их к * {}. Если это не работает, добавьте их в элемент и продолжайте подниматься до уровня, пока он не будет работать. Я действительно не знаю, почему это сломало бы фон. Если, конечно, вы не делаете 3D-преобразования своего фона. – Dom

Исправление, предложенное здесь, не является «магическим решением для всех». Следует отметить, что в то время как 3D-анимация определенно намного лучше для мобильных устройств, чем их 2D-копия. Этот ответ не приводит к тому, что весь экран будет отображаться поверх видеокарты, а не процессора. Я использую их только при анимации. В противном случае я бы просто использовал '-webkit-backface-visibility: hidden;' на родительских элементах трехмерных анимированных объектов. По какой-то причине это предотвратило бы мерцание. – Hless

Уменьшить потребление ресурсов для скрытых элементов с помощью телефонного разговора

ответ

Смежные вопросы