Slightly improved diff performance

This commit is contained in:
2017-11-10 08:41:45 +01:00
parent d8367b6172
commit 44369cb916
5 changed files with 47 additions and 35 deletions

View File

@ -7,23 +7,35 @@ export class Diff {
static rootContainer: HTMLElement
// innerHTML will diff the element with the given HTML string and apply DOM mutations.
static innerHTML(aRoot: HTMLElement, html: string) {
static innerHTML(aRoot: HTMLElement, html: string): Promise<void> {
if(!Diff.container) {
Diff.container = document.createElement("main")
}
Diff.container.innerHTML = html
Diff.childNodes(aRoot, Diff.container)
return new Promise((resolve, reject) => {
window.requestAnimationFrame(() => {
Diff.childNodes(aRoot, Diff.container)
resolve()
})
})
}
// root will diff the document root element with the given HTML string and apply DOM mutations.
static root(aRoot: HTMLElement, html: string) {
if(!Diff.rootContainer) {
Diff.rootContainer = document.createElement("html")
}
Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])
return new Promise((resolve, reject) => {
if(!Diff.rootContainer) {
Diff.rootContainer = document.createElement("html")
}
Diff.rootContainer.innerHTML = html.replace("<!DOCTYPE html>", "")
window.requestAnimationFrame(() => {
Diff.childNodes(aRoot.getElementsByTagName("body")[0], Diff.rootContainer.getElementsByTagName("body")[0])
resolve()
})
})
}
// childNodes diffs the child nodes of 2 given elements and applies DOM mutations.
@ -31,7 +43,7 @@ export class Diff {
let aChild = [...aRoot.childNodes]
let bChild = [...bRoot.childNodes]
let numNodes = Math.max(aChild.length, bChild.length)
for(let i = 0; i < numNodes; i++) {
let a = aChild[i]
@ -69,7 +81,7 @@ export class Diff {
let elemB = b as HTMLElement
let removeAttributes: Attr[] = []
for(let x = 0; x < elemA.attributes.length; x++) {
let attrib = elemA.attributes[x]
@ -119,7 +131,7 @@ export class Diff {
continue
}
elemA.setAttribute(attrib.name, attrib.value)
}