使用 Prettify 在网页中动态生成的片段的语法突出显示很慢

Question

我有一个 div，可以在其中动态加载 AJAX 请求结果中的一段代码。然后我想使用 prettify 对其进行格式化。它可以工作，但是速度太慢了。我使用的代码如下：

var jqxhr = $.get(fileName)
 .success(function(data) {
  $('#myDiv').html(data);
  prettyPrint();
  $('#myDiv').fadeIn();
})

简而言之，我执行 GET 请求，将请求结果放入

#myDiv

中，格式化它并

fadeIn

div。这需要一段时间，但会加载。但是当我淡出 div 时，页面将在几秒钟内保持无响应。我删除了

prettyPrint()

，页面表现得非常完美。有什么提示吗？

Answer 1

我只是猜测，但有几件事值得一提。

根据源代码，prettify.js 的默认模式是使用 Continuations 运行，并避免一次占用 CPU 超过 250 毫秒（我引用的是 http://code.google.com 上的源代码） /p/google-code-prettify/source/browse/trunk/src/prettify.js）：

/**
 * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
 * UI events.
 * If set to {@code false}, {@code prettyPrint()} is synchronous.
 */
window['PR_SHOULD_USE_CONTINUATION'] = true;

您在上面编写代码的方式表明它可能被配置为以同步模式运行，这就是为什么它很慢并占用您的页面。您应该确保此标志未设置为 false，并将您的 fadeIn 调用添加到传递给 PrettyPrint 调用的回调函数中。

假设我理解正确，如果你设法在异步模式下运行 PrettyPrint，它最多应该占用 250 毫秒，并且通过将对 fadeIn 的调用放在传递给 PrettyPrint 中的调用的回调函数中，它不会淡入直到所有语法突出显示完成。如果当时对 PrettyPrint (250ms) 的一系列调用仍然感觉很慢，其他建议可能是将最大时间值减少到小于 250，或者弄清楚如何确保 PrettyPrint 仅 PrettyPrints 更新的元素你的ajax调用。