表明处理器密集的JS函数正在运行(GIF微调器不动画)

Question

显示然后隐藏动画指示符/微调器GIF是向用户显示其操作有效以及在等待操作完成时发生某些事情的好方法 - 例如,如果操作需要从服务器加载某些数据(s )通过AJAX.

我的问题是,如果减速的原因是处理器密集的功能,gif会冻结.

在大多数浏览器中,GIF会在执行处理器饥饿功能时停止动画.对于用户来说,这看起来有些事情已经崩溃或发生故障,而实际上它正在工作.

JSBIN示例

注意:"这很慢"按钮会占用处理器一段时间 - 对我来说大约10秒钟,将根据PC规格而有所不同.您可以使用HTML中的"data-reps"attr更改它的功能.

如果JS保持处理器忙,有没有办法表明正在运行的进程没有冻结？如果没有办法制作动画片,我会依靠显示然后隐藏静态文字信息Loading...或类似内容,但动画看起来更活跃.

如果有人想知道我为什么使用处理器密集型的代码而不是通过优化来避免问题:这很多都是复杂的渲染.代码非常高效,但它的功能很复杂,因此对处理器的要求总是很高.它只需要几秒钟,但这足以让用户感到沮丧,并且有很多研究可以追溯到很长一段时间,以证明指标对用户体验有利.

处理器繁重函数的gif微调器的第二个相关问题是,在一个同步集中的所有代码都运行之前,微调器实际上并不显示 - 这意味着它通常不会显示微调器,直到隐藏微调器为止.

JSBIN示例.
我在这里找到的一个简单修复(在上面的另一个示例中使用)是在setTimeout( function(){ ... },50);以非常短的间隔显示指示符之后包装所有内容,以使其异步.这是有效的(见上面的第一个例子),但它不是很干净 - 我确信有更好的方法.

我确信必须有一些标准的处理器密集型加载指标的方法,我不知道 - 或者只是使用Loading...文本是正常的setTimeout？我的搜索没有任何结果.我已经阅读了6或7个关于类似声音问题的问题,但它们都变得无关紧要.

编辑评论中的一些很棒的建议,以下是我确切问题的一些细节:

复杂的过程涉及处理大型JSON数据文件(如加载文件后的内存中的JS数据操作操作),以及基于结果的渲染SVG(通过Raphael.js)可视化,包括复杂,详细的可缩放世界地图.来自JSON的数据处理.因此,有些需要DOM操作,有些则不需要.
不幸的是,我确实需要支持IE8 但是如果有必要,我可以给IE8/IE9用户一个最小的后备Loading...文本,并给其他人一些现代的东西.

Answer 1

如果动画是使用变换实现的,而不是通过更改属性,现代浏览器现在独立于UI线程运行CSS动画.有关此内容的文章可在http://www.phpied.com/css-animations-off-the-ui-thread/找到.

例如,http: //projects.lukehaas.me/css-loaders/中的一些CSS微调器是用变换实现的,并且在UI线程忙时不会冻结(例如,该页面上的最后一个微调器).