Мобильный веб-набор CSS против производительности JavaScript

Question

У меня очень простое приложение. Я создаю пузыри в нижней части страницы, и они плавают в верхней части страницы.

Я пробовал два способа сделать это:

1) Использование повторяющейся функции JavaScript, которая перебирает DOM-пузырьки и использует jQuery для уменьшения «верхнего» свойства CSS:

function frame() {
    $(".bubble").each(function() {
        $(this).css("top", "-=5");
    });
}

2) Использование CSS переходов webkit:

.bubble {
    -webkit-transition: top 5s linear;
    top:-200px
}

Оба метода отлично работают в настольном браузере, но ни один из них не очень хорошо работает в мобильной среде. Вариант CSS немного быстрее, но все же не то, что я бы назвал хорошим.

Какие-нибудь советы?

Answer 1

Попробуйте:

.bubble {
    -webkit-transition: top 5s linear;
    -webkit-transform: translate3d(0px, -200px, 0px);
}

По крайней мере, на iOS это будет аппаратно ускорено. Если вы хотите, чтобы это было немного более обратно совместимо, то:

.bubble {
    -webkit-transition: top 5s linear;
    -webkit-transform3d(0,0,0);
    -webkit-transform: translate(0px, -200px);
}

Будет работать в браузерах без 3D-трансформации, но при этом будет ускоряться. Я бы проверил, что первый из них улучшает производительность, а затем проверил бы, что второй тоже работает, а не просто использует второй!

Answer 2

Я бы порекомендовал попробовать это с canvas.

Два примера:

• http://3.paulhamill.com/node/39
• http://blog.hostgrenade.com/wp-content/demo/bubbles/