是否可以将大量数据写入 localStorage 或 DOM 而不会阻塞动画 gif 之类的东西？答案

【问题标题】：Is it possible to write a large chunk of data to localStorage or the DOM without blocking things like animated gifs?是否可以将大量数据写入 localStorage 或 DOM 而不会阻塞动画 gif 之类的东西？
【发布时间】：2013-03-13 03:47:34
【问题描述】：

当我使用 PhoneGap 编写应用程序并下载相当大的数据块以存储以供离线使用 (~4kb) 时，我注意到如果有一个动画 gif 可见（例如 jQueryMobile 加载 gif），那么它会停止动画同时数据正在写入 LocalStorage。（也许这种情况更多的是关于写入 LocalStorage 的绝对数量，而不是关于记录的组合大小？）

向 DOM 添加大块 HTML 也是如此。如果我渲染一个大约 100 个 <li> 或其他东西的 HandlebarsJS 模板，然后将其注入 DOM（这似乎是最佳实践），页面滚动和动画 gif 将停止运行，直到追加完成。

从用户的角度来看，应用程序似乎已经锁定了几秒钟（在某种意义上它已经......）并且有杀死它的诱惑；即使它仍在工作。

我能做些什么来防止这种行为吗？我什至愿意牺牲一点真实性能，因为它会提高感知性能......

【问题讨论】：

您不应该加载数十万个<li> 元素。没有人可以一次吸收这么多信息，所以不要向他们展示。
可能是我对这句话的思考不够。一般来说，我不会向他们提供那么多信息，但肯定有数百个。假设您正在呈现活动的与会者列表。我会将它分成按字母表的某些块划分的组——但无论如何，即使只有一百或两个项目，我也看到过 gif 冻结问题。
@zzzzBov 刚刚注意到您说“数十万” - 不确定您是否误读了我写的“数百或数千”（无论如何都没有实际意义，因为它很少超过 100），或者您是否在你写了“的”。
我完全误解为“数十万”而不是“数百或数千”。该建议仍然有效，但如果它很少超过 100，则与此问题的相关性较小。

标签： javascript performance

【解决方案1】：

把它分块。做一些测试，看看你可以在不影响“普通”电脑上的动画的情况下一次性写多少，并将你的写限制在这个数量之内。只需多次追加或在 LocalStorage 的情况下写入连续键。

【讨论】：

"在 LocalStorage 的情况下写入连续键。" ——已经在做。这就是问题所在。它本质上是对返回记录的循环，它执行localStorage.setItem(key, value)
您必须在写入之间放弃控制。做一个 setTimeout(myWritingFunc, 0) 直到你写完。 JavaScript 是单线程的。