在运行计算密集型 javascript 脚本时显示基于 css 的动画

Question

我正在使用lunr.js 在静态网站上运行客户端驱动的搜索。随着内容的增长，lunr.js 需要更长的时间来索引所有页面。这很好，但我想要一个动画加载栏，以便人们知道页面实际上正在做某事。我尝试添加一个动画twitter bootstrap 3.3.1 progress bar，它在索引完成加载之前可见，但在加载索引时它似乎没有动画。

下面是实际示例：http://rosindex.github.io/search/

在每个要索引的文档上运行的代码位于jquery.lunr.search.js#L87

package_search.html#L15中定义的进度条

这是引导程序渲染动画方式的限制，还是我可以做些什么来让它在加载这个索引时运行？

Answer 1

当 lunr 正在索引浏览器时，浏览器无法执行任何其他操作，包括在您的情况下正确地为进度条设置动画。

您可以尝试使用网络工作者从主 ui 线程执行索引。这就是在 Angular 文档网站上使用 lunr 的方式，这里有一篇很好的文章解释了其中的一些实现 http://www.bacondarwin.co.uk/angularjs-docs-performance/

如果您的数据相当静态，您还可以考虑预先构建 lunr 索引。加载预建索引的速度要快得多，而且您应该没有发现索引锁定浏览器的问题。

您可以使用https://github.com/olivernn/lunr-index-builder 从命令行构建索引，然后在浏览器中加载索引，如下所示：

var index = lunr.Index.load(serialised_index)