我正在修改Jump'n'Bump游戏的HTML5端口,以便在Apple和基于Android的移动设备上运行.我使用廉价的1 GHz Cortex-A8 Android 4.0.3平板电脑进行测试.我在系统的浏览器中遇到了奇怪的行为.我通常得到一个约1 FPS的非常低的帧速率(每帧重新绘制整个屏幕,使用setTimeout ......).但是,当我在<canvas>标签之前添加一个具有位置:固定CSS属性的<div>时,帧速率突然增加,游戏变得可玩.
有人可以解释这个奇怪的现象吗？Android浏览器中是否存在一些影响画布性能的渲染模式？这是跨平台问题吗？如何确保页面在用户的浏览器中有效运行？
我正在处理的代码大纲:
<!DOCTYPE html>
<html>
<title>Jump'n'Bump - HTML5</title>
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<meta name="viewport" content = "width=400px, user-scaleable=no">
<!-- javascript files included here -->
<script type="text/javascript" src="main.js"></script>
<style type="text/css">
body { margin: 0px 0px 0xp 0px }
canvas { border: 0px solid black; }
img.resource { display:none; }
#fixed_div { position: fixed; width: 10px; height: 10px; left: 0px; top: 0px; }
#gameArea { position: absolute; left: 0px; top: …