显示然后隐藏动画指示器/微调器 gif 是向用户展示他们的操作已经完成并且在他们等待操作完成时正在发生某些事情的好方法 - 例如，如果操作需要从服务器加载一些数据（s ) 通过 AJAX。
我的问题是，如果减速的原因是处理器密集型功能，则 gif 冻结。
在大多数浏览器中，GIF 会在需要处理器的函数执行时停止动画。对用户来说，这看起来像是发生了崩溃或故障，而实际上它正在工作。
JSBIN 示例
注意：“这很慢”按钮会占用处理器一段时间 - 对我来说大约 10 秒，具体取决于 PC 规格。您可以使用 HTML 中的“data-reps”属性更改它执行此操作的程度。
- 预期：点击时，动画运行。当该过程完成时，文本会发生变化（我们通常也会隐藏指示器，但如果我们让它旋转，示例会更清晰）。
- 实际结果：动画开始运行，然后冻结直到过程结束。这给人的印象是某些东西被破坏了（直到它突然意外地完成）。
如果 JS 使处理器保持忙碌状态，是否有任何方法可以表明进程正在运行且不会冻结？如果没有办法让某些东西变成动画，我将求助于显示然后隐藏一条静态文本消息Loading...或类似的东西，但动画看起来更活跃。
如果有人想知道为什么我要使用处理器密集型的代码，而不是仅仅通过优化来避免问题：这是很多必然复杂的渲染。代码非常高效，但它所做的事情很复杂，所以它总是对处理器要求很高。它只需要几秒钟，但这足以让用户感到沮丧，并且有大量的研究可以追溯到很长一段时间内表明指标对 UX 有好处。
第二个与 gif 微调器相关的问题是，在一个同步集中的所有代码都运行之前，微调器实际上不会显示 - 这意味着它通常不会显示微调器，直到隐藏微调器的时间。
- JSBIN 示例。
- 我在这里找到的一个简单解决方法（在上面的另一个示例中使用）是在
setTimeout( function(){ ... },50);以非常短的间隔显示指标后包装所有内容，以使其异步。这行得通（见上面的第一个例子），但它不是很干净——我相信有更好的方法。
我确信必须有一些标准方法来指示我不知道的处理器密集型加载指标 - 或者仅使用Loading...文本与setTimeout? 我的搜索一无所获。我已经阅读了 6 或 7 个关于听起来相似的问题的问题，但它们都被证明是无关的。
编辑评论中的一些很好的建议，这里是我的确切问题的更多细节：
- 复杂的过程包括处理大的 JSON 数据文件（例如，加载文件后在内存中进行 JS 数据操作操作），以及渲染 SVG（通过 Raphael.js）可视化，包括复杂、详细的可缩放世界地图，基于来自 JSON 的数据处理。所以，有些需要 DOM 操作，有些则不需要。
- 不幸的是，我确实需要支持 IE8，但如有必要，我可以为 IE8 / IE9 用户提供最小的回退，如
Loading...文本，并为其他所有人提供现代的东西。