我有一个Javascript图像序列对象，它使用<canvas>中的一个DOM标记，快速调用clearRect和drawImage来播放序列。有3个不同的序列，每个序列由1,440个图像组成，一次只需要加载一个序列，但是将它们全部排队将使得体验更快更顺畅。
图像尺寸相当大，每个8680x1920，JPG各约1.5mb。我有按钮可以单独加载每一组，而不是一次加载所有按钮。在第一个序列集中一切都很好，但第二个序列集在Windows 7 Business的Chrome 51中崩溃（Aw Snap页面）。
开发正在我的Mac Pro上运行完美，让我加载所有3个序列就好了。我的Mac Pro的规格远低于PC。 PC是i7四核，32GB RAM，2x M5000 Nvidia Quadro卡，带有Sync卡。我的理解是Chrome甚至没有使用大部分高级硬件，但是我们需要将它们用于其他部分。
我尝试将现有图像对象设置为空源，然后在下一个序列中加载之前将它们设置为null，我也尝试从DOM中删除<canvas>标记，但似乎没有任何帮助。我还发现，观看Chrome的“网络”标签显示，在转移1.5gb后，崩溃总是会发生。 Chrome的任务管理器在Windows和Mac上都有大约8GB的内存使用量，并加载了1个序列。
这是一个模糊的，一次性的安装，将与互联网断开连接，所以我并不关心安全问题或最佳实践，只是通过任何必要的手段让它工作。
更新 ，以反映我最近因性能原因将<img>代码更改为<canvas>代码
答案 0 :(得分：2)
您不应该一次加载整个序列。你最有可能用完RAM。使用内存中的Javascript仅加载几帧，然后将该图像分配给图像标记。请务必通过覆盖变量或使用delete运算符来清除前瞻缓存。
其次，更改src属性将导致整个DOM重绘。这是因为当src属性发生更改时，假定图像可能已更改大小，这将导致之后的所有元素可能已移位并需要重新绘制。
最好将图像设置为<div>的背景并更新background-image样式。您也可以将图像写入<canvas>。在这两种情况下，只需要重新绘制元素。
最后，<video>标签可能是您的最佳选择，因为它旨在有效地处理帧序列。为了能够无滞后地擦除单个帧，您可以使用keyframe every 1 frames设置进行编码，或者只使用不使用关键帧的未压缩格式对视频进行编码。关键帧就像是视频中特定间隔的快照，所有后续帧仅重绘自上一个关键帧以来已更改的部分。因此，如果关键帧相距很远，则寻找特定帧需要渲染关键帧，然后将其间的所有后续帧添加到其中以获得您所在帧的最终图像。通过在每一帧上放置关键帧，它将使视频更大，因为它不能使用差分压缩，但它必须更快地寻求。