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

我有一个Javascript图像序列对象,在DOM中使用一个<canvas>标签,快速调用clearRectdrawImage播放序列。 有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个序列。

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

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

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

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

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

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