Советы по оптимизации производительности -webkit-transform?

Question

Я использую webkit-transform: translate3d и несколько других свойств мобильного приложения для iPhone, потому что его аппаратное обеспечение ускоряется. Имея около 98% функций, производительность отличная. Я осознаю, что не пытаюсь сделать слишком много сразу.

Я успешно симулирую смахивание очень превосходным, естественным способом. Теперь я заметил, что, когда я добавляю последние 2% функций, я вижу некоторые проблемы с перерисовкой изображения в анимированном при перелистывании изображении. После того, как вы пролистаете все 4 изображения и они загрузятся, производительность снова станет идеально плавной. Однако когда этот раздел скрыт и показан, происходит то же самое.

То, что я предполагаю, происходит, когда происходит сбой внутреннего буфера, и он должен перезагружаться каждый раз.

Итак, на этом фоне общий вопрос: какие виды оптимизации производительности другие разработчики делали для -webkit-transform? Я не обязательно спрашиваю о своей конкретной ситуации, а о том, какой широкий диапазон оптимизации люди нашли для своих индивидуальных потребностей?

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

Answer 1

Это может звучать немного странно, но у меня была похожая проблема, и я решил ее, используя -webkit-перспектива: 1000 .

Не знаю, как это действует в пользу переходов, но в моем случае так оно и было.

Answer 2

Это довольно известная вещь, но проверка того, что преобразовываемый элемент использует 3d-преобразования, где это возможно, очень помогает на устройствах, аппаратное ускорение которых выполняется (на данный момент iOS).

Самый простой способ сделать это - добавить:

transform: translate3d(0,0,0);

с соответствующими префиксами к css рассматриваемого элемента, а затем просто анимируйте его как обычно, используя 2d или 3d преобразования.