如何解决提高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);
}
函数是执行缓慢的原因。我通过避免使用该函数解决了性能问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。