Как сделать javascript гладким на Galaxy S3?

У меня есть javascript игра, в которой есть 15 divs, движущихся вокруг. Он работает плавно на моем рабочем столе и моем iPhone, но когда я тестирую его на Galaxy S3, он выглядит очень рывком. Странно, что он работает на 60 FPS на обоих устройствах. Как сделать его гладким на Galaxy S3? Это похоже на то, что он запускает код, чтобы изменить «левый» div 60 раз в секунду, но он не всегда заметно делает это.Как сделать javascript гладким на Galaxy S3?

Я попытался добавить transform3d в divs, но это только ухудшает его.

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>

источник

2013-08-15 Curtis

Используйте CSS переход, а не JS для перемещения вещей. Переходы CSS оптимизированы на GPU, а js - все CPU. Я могу порекомендовать http://rekapi.com/ как api для этого.

источник

2013-08-15 02:02:20

Мне нужно поддерживать IE 9. Я не знаю, почему этот телефон не позволит мне использовать javascript со скоростью 60 кадров в секунду, я могу использовать тонну большего количества CPU, прежде чем он снизится до 50 кадров в секунду. – Curtis

Я попытался переключиться на переходы, но та же проблема возникла. 60 FPS, но выглядит действительно порывистым по сравнению с iPhone. http://curtastic.com/test5t.html – Curtis

Как сделать javascript гладким на Galaxy S3?

ответ

Смежные вопросы