在JavaScript中加载大量图片时，Chrome选项卡会崩溃

我有一个Javascript图像序列对象，在DOM中使用一个<canvas>标签，快速调用clearRect和drawImage播放序列。 有3个不同的序列，每个序列由1440个图像组成，每次只需要加载一个序列，但是将它们全部排队，将使体验更快，更顺畅。

图像尺寸相当大，每幅8680×1920，大约1.5MB，每幅JPG。 我有button来加载每个集合，而不是一次。 在第一个序列集中，一切都很好加载，但第二个在Windows 7 Business中的Chrome 51中崩溃（Aw Snap页面）。

Dev正在发生在我的Mac Pro上，完美地工作，让我加载所有3个序列就好了。 我的Mac Pro的规格远远低于PC。 个人电脑是一个i7四核，32GB内存，2个M5000 Nvidia Quadro卡与同步卡。 我的理解是，Chrome甚至没有使用这些高级硬件中的大部分，但我们需要其他部分。

我已经尝试将现有的图像对象设置为一个空的源，然后在下一个序列中加载之前将它们设置为null，我也尝试从DOM中删除<canvas>标记，但似乎没有任何帮助。 我也发现，观看Chrome的“networking”标签会显示在1.5gb传输之后总是发生崩溃。 Chrome的任务pipe理器的标签在Windows和Mac上都有8GB的内存使用量，加载了1个序列。

运行s / wclosures远程桌面连接

GetExitCodeProcess失败的进程在另一个会话中运行？

在Windows上“npm运行”找不到模块“

什么是USB HID col参数

区分Windows版本的最简单方法是什么？

这是一个晦涩的，一次性的安装，将从互联网断开，所以我不关心安全问题或最佳实践，只是通过任何必要的手段来工作。

为了体现出性能的原因， UPDATE反映了我最近将<img>标签更改为<canvas>标签

卸载框架4.6.2预览

Flask Windows Apache问题

在Windows上，如何打开一个已经打开的文件来写入另一个进程？

查询D3DKMDT_VIDEO_OUTPUT_TECHNOLOGY的WMI

获取孕期（季度）代码在C＃

你不应该一次加载整个序列。 你很可能用完了RAM。 在内存中仅使用Javascript加载几帧，然后将该图像分配给图像标签。 请务必通过覆盖变量或使用delete操作符清除向前看的缓存。

其次，更改src属性将导致整个DOM重绘。 这是因为当src属性发生变化时，图像被认为有可能改变了大小，这将导致所有元素可能已经移动并需要重绘。

将图像设置为<div>的background-image并更新background-image样式是个好主意。 您也可以将图像写入<canvas> 。 在这两种情况下，只有元素需要重绘。

最后，一个<video>标签可能是你最好的选择，因为它被设计来有效地处理帧序列。 为了能够无滞后地擦除单个帧，您可以使用keyframe every 1 frames设置的keyframe every 1 frames进行编码，也可以仅使用未使用关键帧的未压缩格式对视频进行编码。 关键帧就像视频中特定时间段的快照，所有后续帧只重绘自上次关键帧以来发生更改的部分。 因此，如果关键帧距离很远，寻找特定的帧需要渲染关键帧，然后将所有后续帧添加到其中，以获得所在帧的最终图像。 通过在每一帧上放置一个关键帧，它将使视频更大，因为它不能使用差分压缩，但它会寻求更快的速度。