这是一个英雄抓怪物的小游戏

• 网上有各种说明以及源代码

• 自己模拟了一下，并进行部分优化

• 将英雄的移动范围设置在背景区域之内

部分代码

var render = function () {         if (bgReady) {             ctx.drawImage(bgImage, 0, 0);         }         if (heroReady) {             ctx.drawImage(heroImage, hero.x, hero.y);         }         if (monsterReady) {             ctx.drawImage(monsterImage, monster.x, monster.y);         }         //计分         ctx.fillStyle = "rgb(250,250,250)";         ctx.font = "24px Helvetica";         ctx.textAlign = "left";         ctx.textBaseline = "top";         ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);     };  var main = function () {         var now = Date.now();         var delta = now - then;          update(delta / 1000);          render();         then = now;          var w = window;         requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;         // 立即调用主函数         requestAnimationFrame(main);     };

• 这段代码被执行很多次相当于render()函数被调用多次

• render()函数主要在canvas画布上画图片

问题

1. render()函数将被调用多次，多次执行ctx.drawImage()，相当于canvas上有几百张图片为什么不会造成资源浪费？

2. 每次根据移动位置不同，重新添加图片，requestAnimationFrame()函数是频率非常高么？为什么不会造成视觉上的影响？