Astrian/Laterano
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance %for macro handling: optimize DOM updates by using a document fragment for list rendering

Browse Source
This commit is contained in:
Astrian Zheng 2025-05-15 14:26:33 +10:00
parent 7ca68b88a4
commit 719853d2d1
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/main.ts
View File

@ -433,6 +433,9 @@ export default (options: ComponentOptions) => {
// Clear rendered items // Clear rendered items
renderedItems.length = 0 renderedItems.length = 0
// document fragment
const fragment = document.createDocumentFragment()
// Create or update items in the list // Create or update items in the list
collection.forEach((item, index) => { collection.forEach((item, index) => {
// Determine the key for this item // Determine the key for this item
@ -471,10 +474,13 @@ export default (options: ComponentOptions) => {
// We will use recursive processing here! // We will use recursive processing here!
this._processElementWithItemContext(itemElement, itemContext) this._processElementWithItemContext(itemElement, itemContext)
// Insert the element at the correct position in the DOM // Insert the element to the document fragment
placeholder.parentNode?.insertBefore(itemElement, placeholder.nextSibling) fragment.appendChild(itemElement)
}) })
// Insert the document fragment into the DOM
placeholder.parentNode?.insertBefore(fragment, placeholder.nextSibling)
// Remove any remaining unused items // Remove any remaining unused items
existingElementsByKey.forEach(item => { existingElementsByKey.forEach(item => {
if (item.element.parentNode) { if (item.element.parentNode) {