-webkit-transform проблемы с производительностью в Chrome

Question

-webkit-transform проблемы с производительностью в Chrome

0

Мы используем плагин jQuery для некоторых пользовательских интерфейсов. Плагин отлично работает, но в хроме он расплавляет процессор. Плагин пытается css-transform изображение. Вот пример изображения:

<img width="1600" height="568" alt="" src="foo.png"  style="width: 1598px; height: 567px; left: -209px; top: -2px; opacity: 1; transform-origin: center top 0px; transition-duration: 0s; transform: scale(1);">

и вот код, вызывающий проблему в chrome ($ img beeing объект jQuery):

$img.css({
    "-webkit-transition-duration":"20s",
    "-webkit-transition-timing-function":"ease",
    "-webkit-transform":"scale(0.73) rotate(0.1deg)",
    "-webkit-perspective":"0"
});

Проблематичной частью является " -webkit-transform ". В Firefox нет проблемы с производительностью с эквивалентным преобразованием CSS.

Известна ли эта проблема, есть ли альтернативный способ сделать это?

РЕДАКТИРОВАТЬ:

Использование 3d-варианта не решает проблему здесь:

$img.css({
    "-webkit-transition-duration":"20s",
    "-webkit-transition-timing-function":"ease",
    "-webkit-transform":"scale3d(0.73,0.73,0.73) rotate3d(0,0,0,0.1deg)",
    "-webkit-perspective":"0"
});

EDIT2:

После того, как вы посмотрели больше на хронологию хрома devtools, я могу увидеть множество событий "Композитные слои" (каждые 15 мс). Я также заметил (после включения счетчика FPS), что частота кадров всегда составляет около 60 FPS при использовании преобразования css.

Если я использую простой $.animate(), чтобы масштабировать изображение, FPS составляет около 20 макс и меньше событий "Композитные слои" (примерно каждые 40 мс).

Похоже, что тяжелая (re-) картина вызывает проблему.

nonsenz 26 сен. 2013, в 14:54

Источник

Теги:

javascript

jquery

performance

css

google-chrome

2 ответа

Ещё вопросы

Tibos · Answer 1 · 2013-09-26T11-16-00.000Z

Вы должны использовать 3d-преобразования с преобразованием глубины в качестве преобразования идентичности, чтобы заставить GPU обрабатывать операцию вместо CPU. Используйте scale3d и rotate3d вместо scale и rotate.

не решает мою проблему (см. мое редактирование в OP)

ostapische · Answer 2 · 2013-09-26T10-37-00.000Z

Для обработки изображений я использую плагин jQueryRotate, для масштабирования вы можете изменять width и height тега img с помощью метода анимации jQuery.
См. Эту ссылку.

$(document.body).ready(function(){
    $("img").mouseover(function(){
        var width = $(this).width();
        var height = $(this).height();
        var toResize = Math.random() * 20 - 10;
        var newWidth = parseInt(width + toResize * width/height);
        var newHeight = parseInt(height + toResize * height/width);
        $(this).animate({
            width: newWidth + 'px',
            height: newHeight + 'px'
        }, 100, function(){
            //complete
        });
        var angle = Math.random() * 360;
        $(this).rotate({animateTo: angle});
    });
});