javascript - 在运行计算密集型 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中定义的进度条

这是 Bootstrap 渲染动画的方式的限制，还是我可以做一些事情来允许它在加载此索引时运行？

Answer 1

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

您可以尝试使用 Web Worker 在主 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)