javascript - 使用 Prettify 在网页中动态生成的代码段的语法突出显示

Question

我有一个 div，我在其中根据 AJAX 请求的结果动态加载一段代码。然后我想使用 prettify 对其进行格式化。它有效，但它太慢了。我使用的代码如下:

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

简而言之，我执行 GET 请求，我将请求的结果放在 #myDiv 中，对其进行格式化，然后淡入 div。这需要一段时间但加载。但是当我淡出 div 时，页面会在几秒钟内保持无响应。我删除了 prettyPrint() 并且页面表现得非常完美。有什么提示吗？

Answer 1

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

根据源代码，prettify.js 的默认模式是使用连续运行，并避免一次占用 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 ONLY prettyPrints 从中更新的元素你的 ajax 调用。