提高 jQuery 处理大量 DOM 的性能答案

【问题标题】：Improve performance of jQuery for large amount of DOM processing提高 jQuery 处理大量 DOM 的性能
【发布时间】：2020-10-03 13:25:05
【问题描述】：

我正在为我的 Web 应用程序实现一个博客页面。我使用marked 支持降价，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 创建和插入。当<code> 标签中有 100 行代码时，它将为行号创建 100 个跨度并将其添加到 DOM 中。我检查了执行时间，发现它在我使用<code> 标签的第一个循环中花费了大部分时间。我还注意到，当我第一次加载我的网络应用程序时（在硬重新加载之后），它的运行速度较慢，之后它变得比第一次更快。

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

【问题讨论】：

“我不知道为什么它很慢，但我假设......” - 所以你还没有进行一些分析（开发者工具 -> 分析器/性能)?这应该是您尝试修复可能不会被破坏的东西之前的第一步。
我检查了执行时间，发现它在我使用 标记的第一个循环中花费了大部分时间。 @安德烈亚斯

标签： jquery dom markdown highlightjs

【解决方案1】：

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

【讨论】：