Javascript 浏览器渲染引擎：对于巨大的图像背景，哪种策略最合适

我有一个项目，我正在计划它基于一种“交互式世界”风格的体验，浏览器的视窗会四处移动，以显示许多不同的图形环境，它必须是流畅的，没有页面到页面的中断。该项目采用js/html5/css3格式

这带来的问题是整个“世界”可能是8-15000像素的平方（它也会旋转，上面有各种png alpha叠加）

我本来打算进行一些测试，但有很多方法可以实现这一点，我正在寻找最流畅的方法。我对浏览器渲染引擎的内部工作原理了解不多，所以我想问问周围的人

我不能使用google map使用的“平铺”方法，因为它不够流畅（太块状），而且在旋转时也会造成麻烦。请进行数学变换，以确定在什么角度加载哪些平铺，因此我将其归结为以下两种选择：

（1） “巨大”图像方法

这样做的好处是，一旦加载，一切都很容易，缺点是它将是巨大的，我不能显示一个增量预加载程序，因为图像队列将基本上是2个图像（覆盖和巨大的img）

（2） 图像片段

好处是我可以以10%的增量（10倍图像）显示带有图像队列的预加载程序

问题：

第二种方法在浏览器的渲染引擎上会有更痛苦的开销，因为有9组单独的计算正在进行，还是浏览器引擎在最初渲染后只是将它们视为一个绘制区域，然后作为一个整体进行更新？或者每次更改dom（旋转等）时，浏览器必须运行相同的转换/重新绘制过程9次

---

非常感谢。

以后进行了大量测试：结果：使用大图像，似乎对浏览器来说不太容易处理