提高jQuery的性能以进行大量DOM处理

问题描述

我正在为我的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>标签的第一个循环中，它花费了最多的时间。我还注意到，当我第一次加载Web应用程序（在硬性重新加载之后）时，它的运行速度较慢，此后它变得比第一次运行时快。

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

解决方法

在使用性能分析器进行了一些分析之后，我发现Highlight.js的function cypher(messageInput){ let inputMessage = document.getElementById("messageInput"); let encodedMess =[]; let upperAlphabit = new Array( 26 ).fill( 1 ).map( ( _,i ) => String.fromCharCode( 65 + i ) ); //upper and lower case alphabit let lowerAlphabit = new Array( 26 ).fill( 1 ).map( ( _,i ) => String.fromCharCode( 97 + i ) ); let reverseLower = lowerAlphabit.reverse(); let reverseUpper = upperAlphabit.reverse(); for (let i = 0; i <= inputMessage.length; i++) for(let b = 0; b <= upperAlphabit.length; b++) // cycles through the upper/lower case alphabit finding a match and { if(lowerAlphabit.charAt(b) == inputMessage.charAt(i)) encodedMess.fill(reverseLower.charAt(b)); if(upperrAlphabit.charAt(b) == inputMessage.charAt(i)) encodedMess.fill(reverseUpper.charAt(b)); } encodedMess = document.getElementById("encode").innerHTML = " "+ encodedMess; console.log(encodedMess); }函数是执行缓慢的原因。我通过避免使用该函数解决了性能问题。

dom highlightjs jquery markdown