0

我正在为我的 Web 应用程序实现一个博客页面。我使用标记来支持降价，并使用highlight.js来突出显示代码。这是我处理解析和突出显示的代码：

import marked from "marked";
import DOMPurify from "dompurify";
import hljs from "highlight.js";
import $ from "jquery";

class MarkDownParser {
    // configuration for marked
    static markedOptions = {
        highlight: function (code, language) {
            if (language) {
                const validLanguage = hljs.getLanguage(language);

                if (validLanguage) {
                    return hljs.highlight(language, code).value;
                }
            }
            return hljs.highlightAuto(code).value;
        },
        gfm: true,
        silent: true,
    };

    static getMarkDown(text) {
        var markedHtml = marked(text, this.markedOptions);
        var newHtml = '<div id="container" >' + markedHtml + "</div>";
        var dom = $(newHtml);

        dom.find("code").each(function () {
            var par = $(this).parent()[0];

            if (par.tagName === "PRE") {
                // adding line numbers in code blocks
                var n = $(par).html().split("\n").length;
                var line_nums = "<div class='line-num-container'>";

                for (var i = 1; i <= n; i++) {
                    line_nums += `<span class="line-num">${i}</span>`;
                }

                line_nums += "</div>";
                $(par).prepend($(line_nums));
            } else {
                // highlighting inline codes, because marked.js highlights blocked codes only
                var code = $(this).text();
                $(this).text("");
                $(this).html(hljs.highlightAuto(code).value);
            }
        });

        // wrapping tables with div for overflow handling
        dom.find("table").each(function () {
            $(this).wrap("<div class='table-wrapper'></div>");
        });

        return DOMPurify.sanitize(dom.html());
    }
}

export default MarkDownParser;

在这个函数中，我使用标记解析文本，然后使用 jquery 和 highlight.js 进行更多处理。

我的问题是，我对getMarkDown(text)函数的性能不太满意。我不确定为什么它很慢，但我假设原因是大量的 DOM 创建和插入。当标签中有 100 行代码时<code>，它将为行号创建 100 个跨度并将其添加到 DOM 中。我检查了执行时间，发现它在我处理<code>标签的第一个循环中花费了大部分时间。我还注意到，当我第一次加载我的网络应用程序时（在硬重新加载之后），它的运行速度较慢，之后它变得比第一次更快。

  • 为什么这段代码很慢？
  • 为什么第一次加载速度较慢？
  • 如何改进此代码以获得更好的性能？
4

1 回答 1

0

使用性能分析器进行一些分析后，我发现highlightAuto()highlight.js 的功能是执行缓慢的原因。我通过避免使用该功能解决了性能问题。

于 2020-10-03T20:40:12.613 回答