我有一个 javascript 游戏，有 15 个移动的 div。它在我的台式机和 iPhone 上运行顺利，但当我在 Galaxy S3 上测试它时，它看起来非常不稳定。奇怪的是，它在两种设备上都以 60 FPS 的速度运行。如何使其在 Galaxy S3 上流畅？就好像它正在运行代码以每秒更改 div 的“左侧”60 次，但它并不总是明显地做到这一点。
我尝试过将transform3d添加到div中，但这只会让情况变得更糟。
http://curtastic.com/test5.html
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body style='margin:0;width:640px;'>
<div id=fps></div>
<style>
.block {
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var blocks = [];
var angle=0;
var fpsFrames = 0;
var fpsTime = 0;
function gameLoop() {
var now = new Date();
fpsFrames++;
if (now - fpsTime >= 1000) {
$('#fps').html("FPS: "+fpsFrames);
fpsFrames = 0;
fpsTime = now;
}
var block;
for(var i in blocks) {
block = blocks[i];
block.x += 3;
if (block.x >= $(window).width()-50) {
block.x = 0;
}
block.canvas.css('left', block.x);
block.canvas.css('top', block.y);
}
}
$(document).ready(function() {
var block;
for(var i=0; i<15; i++) {
$("body").append("<div id=block"+i+" style='position:absolute;width:33px;height:33px;background:green' class=block></div>")
block = [];
block.canvas = $('#block'+i);
block.x = Math.random()*($(window).width()-50);
block.y = Math.random()*($(window).height()-50);
blocks[i] = block;
}
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
(function animloop() {
requestAnimFrame(animloop);
gameLoop();
})();
});
</script>
</body>
</html>
最佳答案
使用 css 过渡而不是 js 来移动物体。 CSS 过渡是 GPU 优化的，而 js 则是全部 CPU 优化的。我可以推荐 http://rekapi.com/作为一个 api。
关于javascript - 如何让javascript在Galaxy S3上流畅运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18245184/