移动webkit CSS与JavaScript性能

Question

我有一个非常简单的应用程序.我在页面底部创建了气泡,并将它们浮动到页面顶部.

我尝试过两种方法:

1)使用重复的JavaScript函数循环起泡DOM并使用jQuery来减少"顶级"CSS属性:

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

2)使用webkit CSS转换:

.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变换的浏览器上工作,同时仍然获得HW加速.我会验证第一个提高性能,然后检查第二个也是如何工作,而不是只使用第二个!