Question

在计算机和iPhone上工作正常，但在Galaxy S3上，正在移动的块会留下随机清理的路径。我该如何解决这个问题？

踪迹消失（像它应该被清除），就像每秒一次。

enter image description here

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
    </head>
    <body style='margin:0;width:640px;'>
        <div id=fps></div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            var block;
            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;
                }

                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() {
                $("body").append("<div id=block style='position:absolute;width:33px;height:33px;background:green' class=block></div>")
                block = [];
                block.canvas = $('#block');
                block.x = 0;
                block.y = 55;

                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>

Answer 1

你手机没有太大的处理能力，无法快速处理这些变化。

有两种方式：

在window.setTimeut中增加回拨时间（如@Paul指出），以便您和其他手机浏览器可以处理javascript。如果这不可行。然后试试第二个。
使用文档片段添加元素（这样会更有效）：如果使用DocumentFragment添加元素，则不会导致浏览器重排导致闪烁。

正如documentation所说

由于文档片段在内存中而不是主DOM树的一部分，因此将子项附加到它不会导致页面重排（元素位置和几何的计算）。因此，使用文档片段通常会带来更好的性能。

您还可以查看我对this question的回答，这有点相关。

希望有所帮助：）

Answer 2

您是否尝试过使用GPU加速动画？他们应该给你更好的结果，因为它们实际上与视频驱动程序刷新率有关。使用JavaScript管理动画不是最佳选择。另一个答案可能是在正确的道路上，大多数Android设备都是硬件缺陷，甚至是S3，所以你会遇到这样的问题。我有一个Nexus 7 I测试用品，很多时候它只能处理这样的简单事情，而不是我的iPad2和Windows 8设备（平板电脑和手机）。

这可能是一篇合理的文章来展示差异，http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

为什么移动div会在手机上的javascript中留下痕迹？

2 个答案: