jjzjj

javascript - 在 Javascript 中加载大量图像时，Chrome 选项卡崩溃

coder 2024-06-20 原文

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

图片尺寸很大，每张 8680x1920，每张 JPG 约 1.5mb。我有按钮可以单独加载每组而不是一次加载所有。在第一个序列集中加载一切正常，但第二个在 Windows 7 Business 的 Chrome 51 中崩溃(Aw Snap 页面)。

Dev 在我的 Mac Pro 上运行并且运行完美，让我可以很好地加载所有 3 个序列。我的 Mac Pro 的规范远低于 PC。 PC 是 i7 四核、32gb RAM、2x M5000 Nvidia Quadro 卡和同步卡。我的理解是 Chrome 甚至没有使用这些高级硬件中的大部分，但我们需要它们用于其他部分。

我尝试将现有图像对象设置为空源，然后在加载下一个序列之前将它们设置为空，我还尝试删除 <canvas>来自 DOM 的标记，但似乎没有任何帮助。我还发现观看 Chrome 的网络选项卡显示崩溃总是在传输 1.5gb 之后发生。 Chrome 的任务管理器的选项卡在 Windows 和 Mac 上徘徊在 8gb 内存使用情况下，加载 1 个序列。

这是一个不起眼的一次性安装，将断开与 Internet 的连接，因此我不太关心安全问题或最佳实践，只是通过任何必要的方式让它运行。

UPDATED 以反射(reflect)我最近更改了 <img>标记为 <canvas>出于性能原因的标记

最佳答案

您不应该一次加载整个序列。您很可能用完了 RAM。使用内存中的 Javascript 仅提前加载几帧，然后将该图像分配给您的图像标签。一定要通过覆盖变量或使用 delete 来清除前瞻缓存。运营商。

其次，更改 src属性将导致整个 DOM 重绘。这是因为当 src属性改变，假设图像可能改变了大小，这将导致之后的所有元素可能已经移动并需要重绘。

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

最后，一个 <video>标签可能是您的最佳选择，因为它旨在有效地处理帧序列。为了能够无延迟地擦洗到单个帧，您可以使用 keyframe every 1 frames 进行编码。设置，或者简单地以不使用关键帧的未压缩格式对视频进行编码。关键帧就像视频中特定间隔的快照，所有后续帧仅重绘自上一个关键帧以来发生变化的部分。因此，如果关键帧相距很远，则寻找特定帧需要渲染关键帧，然后将其间的所有后续帧添加到它以获得您所在帧的最终图像。通过在每一帧上放置一个关键帧，它会使视频变大，因为它不能使用差分压缩，但它会更快。

关于javascript - 在 Javascript 中加载大量图像时，Chrome 选项卡崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39277151/

中加javascriptcodesection关键htmlwindowsgoogle-chromev8

有关javascript - 在 Javascript 中加载大量图像时，Chrome 选项卡崩溃的更多相关文章

  1. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  2. ruby - 默认情况下使选项为 false - 2

    这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb

  3. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少

  4. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  5. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  6. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  7. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  8. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  9. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐