Canvas.getContext('2d').translate() VS CSS transform translate();哪个更有效率？（性能方面）

Question

我的问题是当玩家位于屏幕中央时背景的滚动（以产生玩家正在移动的错觉）

我正在用 javascript 制作一个相当简单的游戏，它是一个角色扮演游戏，我必须加载很多背景图块 + 一些作为地图一部分的游戏对象（游戏区域，如森林，会有树木和灌木丛， ETC...）。 所以，问题是，我需要提高性能，因为我目前使用的是 20x20 像素的 png，但我想让它们至少达到 80x80 像素。哪种策略在性能方面会更好？

(dummy code, just to illustrate)

1-)

<div id='screen'> <div id='canvasContainer'> <canvas id='background' width=900 height=900></canvas> <canvas id='spriteLayer' with=900 height= 900></canvas> </div> </div>

背景或多或少是静态的，所以只需使用 ct.drawImage 一次绘制所有图块，添加隐藏在“#screen”上的 css overflow，然后使用“#canvasContainer”上的 CSS transform translate 来匹配玩家的x 和 y 给玩家一种错觉，它正在移动，穿越地图

或

2-) 使用 ct.translate() 更改画布上下文的参考点以匹配玩家的 x 和 y 位置，但必须在游戏循环的每次迭代中重绘所有内容 或者 完全是别的东西??

我目前使用的是 1 选项，#screen 只是 200x200px，如果我删除溢出隐藏属性，应用 css 翻译时帧率会急剧下降