草庐IT

javascript - Chrome 中 Blob 消失的神秘案例(在 IndexedDB 中)

coder 2024-07-26 原文

概括

我想要做的很简单:

  • 1a.如果图像不是某种类型的本地存储(例如 IndexedDB)，则从服务器读取图像作为字节数组，放入本地存储(作为字节数组或对文件的引用，我不在乎)
  • 1b.如果图像在本地存储中，则从本地存储中读取字节数组。将此字节数组显示为 html 页面中的图像。

    • 不知何故，在 Blob、objectURL、indexedDB 和缓存之间，它都变得过于复杂，并表现出一些奇怪的行为。如果有一种方法可以将 ArrayBuffer 直接粘贴到图像中，而不是先转换为 Blob，然后再转换为 ObjectURL，那么我可能会采用这种方法，因为它更简单，并且摆脱了有问题的 Blob 和一些不必要的步骤。

    如果您想查看 代码示例 流然后看到这个 jsfiddle .请注意，如下所述，该问题不会出现在 jsfiddle 示例中(出于某种我无法弄清楚的原因)。

    我使用 IndexedDB 而不是依赖浏览器缓存是有原因的，所以让我们尽量避免这种讨论，并且与 IndexedDB 似乎在 Chrome 上行为不端的事实无关。

    我很感兴趣，如果其他人遇到过类似的事情或任何关于如何改善这种情况的建议。

    细节

    Chrome 版本 38.0.2125.104 m。

    基本上，流程是通过索引检查 blob 是否在 IndexedDB 中(参见 jsfiddle 以供引用):
  • 1a.如果不是，则从服务器检索 blob ( xhr.open )，将 blob 放入 IndexedDB ( objectStore.put ) 并显示 blob ( imgSrc = createTheObjectUrl(blob) )。
  • 1b.如果是，则从 IndexedDB ( objectStore.get ) 检索 blob，从 blob 创建 URL，将图像 src 设置为 URL。

    • 问题是它最初可以工作，但过了一会儿(有时当我刷新页面时，有时当我关闭 Chrome 并返回网页时)我在访问 blob 的 URL 时收到 404(未找到)。

    有几点需要注意:-
  • 在我对其他浏览器的有限测试中，我没有看到相同的行为 - 其他浏览器似乎工作正常。
  • 当我查看 blob-internals 页面 (chrome://blob-internals) 时，我的磁盘上有一个 blob 的路径。当它工作时(图像可见)，该文件存在，当它开始失败(404 Not Found)时，该文件不存在(即使 blob-internals 仍然引用它)。
  • 当我试图在 jsfiddle 中重现此内容时，问题不会发生。这是从我的代码中剪切和粘贴的。不幸的是，我没有这个网络服务器的公共(public)版本，所以我不能证明它失败了。

    • 鉴于 jsfiddle 似乎总是有效，我所能想到的就是我的服务器的配置方式有所不同。我查看了返回的 header 的差异，我可以看到在 jsfiddle 的情况下，启用了缓存。所以，我开始认为这与缓存有关(这可能是一个完全错误的假设)。就好像 Chrome 正在跟踪 blob 的使用情况，并在它超出范围时立即将其从文件系统中删除，这会导致 IndexedDB 中的条目没有文件(这本身似乎是一个错误)。我不想在服务器上启用缓存，也不想让 blob 的生命周期取决于服务器缓存设置。

    解决方法

    作为一种解决方法，我执行了以下操作:-
  • 1a.如果图像不在 IndexedDB 中，则从服务器检索它作为 Blob。将 Blob 转换为 ArrayBuffer。作为 ArrayBuffer 存储在 IndexedDB 中。
  • 1b.如果图像在 IndexedDB 中，则检索，将 ArrayBuffer 转换为 Blob，从 Blob 创建 URL，将图像 src 设置为 URL。

    • 这并不理想，因为这意味着我在第一次显示图像时(在将图像存储在 IndexedDB 之前)从 blob 读取数组缓冲区的额外开销，然后从 IndexedDB 检索时我有将 ArrayBuffer 读入 blob 的开销.也许有一些聪明的共享资源正在进行，这意味着它们使用相同的底层缓冲区，但这意味着依赖于性能的实现。

    还有更多 - 如果我从服务器返回的 Blob 创建一个新 Blob 或从 Blob 创建一个 ArrayBuffer，那么从 ArrayBuffer 中创建一个新 Blob 它仍然不起作用。就好像使用了某种共享的引用计数资源。也就是说 - 我能想到的任何涉及在 IndexedDB 中存储 blob 的解决方法都不起作用。

    最佳答案

    似乎是 chrome 中的一个错误
    请参见:
    https://code.google.com/p/chromium/issues/detail?id=108012#c162

    Chrome 金丝雀不会受到影响

    关于javascript - Chrome 中 Blob 消失的神秘案例(在 IndexedDB 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26580844/

    javascriptIndexedDBbrblobgoogle-chrome

    有关javascript - Chrome 中 Blob 消失的神秘案例(在 IndexedDB 中)的更多相关文章

    1. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

      本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

    2. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

      了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在，如果我运行script/server并发出请求，一切都很好。然而，在我的Rails应用程序的第二个请求中，一切都因单元化常量错误而变得糟糕。在生产模式下，我可以成功发出第二个请求，这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

    3. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    4. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

      我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

    5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

      我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

    6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

      我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

    7. ruby - 是否有 chrome 开关来抑制 'external protocol request' ？ - 2

      是否有chrome开关来抑制“外部协议(protocol)请求”？我正在使用selenium-ruby​​-watirwebdriver自动化应用程序。我在网上搜索了绕过此窗口和对话的解决方案:http://productforums.google.com/forum/#!topic/chrome/K22hXwRy6zQ概述了我们如何手动执行此操作。但是对于Selenium-Chrome-Ruby，我需要通过可能设置一个chrome开关(chorme开关列表:=http://src.chromium.org/svn/trunk/src/chrome/common/chrome_swit

    8. ruby - 运行测试时静音 Chrome 驱动程序控制台输出 - 2

      我使用的是最新版本的Chrome(32.0.1700.107)和Chrome驱动程序(V2.8)。但是当我在Ruby中使用以下代码运行示例测试时:require'selenium-webdriver'WAIT=Selenium::WebDriver::Wait.new(timeout:100)$driver=Selenium::WebDriver.for:chrome$driver.manage.window.maximize$driver.navigate.to'https://www.google.co.in'defapps_hoverele_hover=$driver.find_

    9. ruby - session 未创建 : Chrome version must be between - 2

      当使用ruby​​selenium驱动程序驱动chrome时，我得到/home/travis/.rvm/gems/ruby-2.6.2/gems/selenium-webdriver-3.141.5926/lib/selenium/webdriver/remote/response.rb:72:in`assert_ok':sessionnot创建:Chrome版本必须在70和73之间(Selenium::WebDriver::Error::SessionNotCreatedError)如何解决这个问题？降级chrome不是我想做的事。 最佳答案

    10. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

      我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

    随机推荐