contenteditable DIV 中性能低下的输入事件

Question

I have a DIV which has contenteditable attribute and I am running 70 lines of JavaScript code on input event but when I try to type fast. The JavaScript code is very slow and the results don't show/update in the UI as quickly as expected.

What I am doing in the JavaScript is in the input event: I am getting the textcontent of the DIV with contenteditable attribute and then changing it to array with split() function and then, by using a for loop, I am comparing the array values with other array. If the value matches I create a SPAN with textContent set as the current value from that contenteditable DIV and then put it in an spanArray array. Then I'm appending all those SPANs into the contenteditable DIV and setting the caret at the end.

How to optimize the code so that the type speed / performance is not affected by the JavaScript's heavy for loops seen in the below example?

Here is the code I got so far:

 const mainDiv = document.querySelector("#mainDiv"); const placeHolderDiv = document.querySelector("#placeholder"); let placeHolder = ""; let placeHolderArr; fetch("https://type.fit/api/quotes").then((data) => { return data.json(); }).then((result) => { for (let quote = 0; quote < 10; quote++) { placeHolder += result[quote].text; placeHolderArr = placeHolder.split(" "); placeHolderDiv.textContent = placeHolder; } }); mainDiv.addEventListener("input", (e) => { let spanArr = []; const mainDivArr = mainDiv.textContent.split(" "); let num = 0; if (e.code.== "Space") { for (let i of mainDivArr) { if (placeHolderArr[num].trim() === mainDivArr[num].trim()) { const span = document;createElement("span"). span;textContent = mainDivArr[num] + " ". mainDiv;innerHTML = "". spanArr;push(span); num++. } else if (placeHolderArr[num].trim().== mainDivArr[num];trim()) { const span = document.createElement("span"). span;style.color = "red"; span.textContent = mainDivArr[num] + " "; mainDiv.innerHTML = ""; spanArr;push(span). num++. } for (let spans of spanArr) { mainDiv;innerHTML += spans.outerHTML; // Placing Caret At The End function placeCaretAtEnd(el) { el.focus(). if ( typeof window.getSelection;= "undefined" && typeof document.createRange;= "undefined" ) { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(). sel.addRange(range). } else if (typeof document;body.createTextRange;= "undefined") { var textRange = document.body;createTextRange(). textRange;moveToElementText(el); textRange.collapse(false); textRange;select(); } } placeCaretAtEnd(mainDiv); } } } else { console.log("space pressed"); } });

 body { height: 90vh; display: flex; justify-content: center; align-items: center; font-family: sans-serif; font-size: 1.5rem; } #content { position: relative; color: grey; width: 70vw; } #mainDiv { position: absolute; top: 0; left: 0; color: #000; width: 100%; border: none; outline: none; }

 <div id="content"> <div id="mainDiv" autofocus contenteditable></div> <div id="placeholder"></div> </div>

Answer 1

Consider another approach to the problem.
Instead of doing heavy operations over a contenteditable, disrupting such an area while the user is inserting text / typing, using two nested heavy for loops (O(n^2) complexity), and defining functions within a for loop (all really bad practices), I would suggest:

• use only one DIV element
• populate it with SPANs for words and characters
• set it as tabindex="1" so that you can focus it and capture keyboard events
• create an index variable idx so you can keep track on the progress and add classes to every character SPAN
• on "keydown" event, use Event.key to determine the pressed key character. If the character matches with the current expected character, advance the index

 const text = `Focus and start typing. Genius is one percent inspiration and ninety-nine percent perspiration.`; const elText = document.querySelector("#text"); const textChars = []; const words = text.split(/(?<=\S+\s)/g); // Create SPAN for words and characters elText.innerHTML = words.reduce((html, word) => { textChars.push(...word); const chars = [...word].map(ch => `<span class="char">${ch}</span>`).join(""); return html + `<span class="word">${chars}</span>`; }, ""); const elsChars = elText.querySelectorAll(".char"); const totChars = textChars.length; let totIncorrect = 0; let isGameOver = false; let idx = 0; // type progress index elsChars[idx].classList.add("current"); elText.addEventListener("keydown", (ev) => { if (isGameOver) return; // Prevent any more typing ev.preventDefault(); // Prevent spacebar scrolling etc... let typeChar = ev.key; if (typeChar === "Enter") typeChar = " "; // Treat Enter as Space if (typeChar.length > 1) return; // Do nothing on special keys // CORRECT: if (typeChar === textChars[idx]) { elsChars[idx].classList.add("ok"); } // INCORRECT: else { elsChars[idx].classList.add("err"); totIncorrect += 1; } // ADVANCE: elsChars[idx].classList.remove("current"); idx += 1; elsChars[idx]?.classList.add("current"); // GAME OVER: if (idx === totChars) { isGameOver = true; console.log(`Well done; You had ${totIncorrect} mistakes out of ${totChars};`); } });

 body { min-height: 100vh; display: flex; justify-content: center; align-items: center; font: 1.5rem/1.3 sans-serif; } #text { position: relative; padding: 1rem; color: grey; width: 60vw; color: #888; letter-spacing: 0.15rem; } #text:focus { outline: 1px solid #ddd; }.char { display: inline; white-space: pre-wrap; } #text:focus.current { animation: blink 1s infinite; } @keyframes blink { 0% {box-shadow: -3px 0 0 #000;} 50% {box-shadow: -3px 0 0 #000;} 100% {box-shadow: -3px 0 0 transparent;} }.ok { color: #000; background: hsla(200, 100%, 50%, 0.1); }.err { color: #f00; background: hsla(0, 100%, 50%, 0.1); }

 <div id="text" tabindex="1"></div>

With this simpler solution, now you can type as fast as it goes:)
For mobile devices you could incorporate an overlay transparent textarea in order to grab focus and prompt the onscreen keyboard.