Last active
February 15, 2019 06:12
-
-
Save manikantag/630288fb67453bb88c2493f8bd46aadd to your computer and use it in GitHub Desktop.
fastdom perf analysis with Callbackss, Promise, async/await;
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>Fastdom promises + async/await test</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
</head> | |
<body> | |
<div id="container"> | |
<div | |
id="testdiv1" | |
style="position: absolute; left: 100px; top: 200px; height: 50px;width: 70px; background-color: lightseagreen;" | |
></div> | |
</div> | |
<script src="https://wilsonpage.github.io/fastdom/fastdom.min.js"></script> | |
<script src="https://wilsonpage.github.io/fastdom/extensions/fastdom-promised.js"></script> | |
<script type="module"> | |
const _fastdom = fastdom.extend(fastdomPromised); | |
const _measure = (fn, ctx) => _fastdom.measure(fn, ctx); | |
const _mutate = (fn, ctx) => _fastdom.mutate(fn, ctx); | |
const getElementWidth = element => | |
_measure(() => element.offsetWidth); | |
const getElementHeight = element => | |
_measure(() => element.offsetHeight); | |
const createElement = (elementType, parentNode) => | |
_mutate(() => { | |
let newEle = document.createElement(elementType); | |
if (parentNode) { | |
parentNode.appendChild(newEle); | |
} | |
return newEle; | |
}); | |
const appendElement = (element, parentNode) => | |
_mutate(() => parentNode.appendChild(element)); | |
let container = document.getElementById('container'); | |
let testdiv1 = document.getElementById('testdiv1'); | |
(async function test() { | |
let testdiv1Width = await getElementWidth(testdiv1); | |
let testdiv1Height = await getElementHeight(testdiv1); | |
console.log( | |
'testdiv1Height=%s, testdiv1Width=%s', | |
testdiv1Height, | |
testdiv1Width | |
); | |
for (let i = 0; i < 1000; i++) { | |
let newDiv = await createElement('span'); | |
newDiv.textContent = i; | |
newDiv.style.display = 'inline-block'; | |
newDiv.style.height = testdiv1Width + 'px'; | |
newDiv.style.width = testdiv1Height + 'px'; | |
newDiv.style.backgroundColor = 'red'; | |
appendElement(newDiv, container); | |
// console.log(newDiv); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>Fastdom test</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
</head> | |
<body> | |
<div id="container"> | |
<div | |
id="testdiv1" | |
style="position: absolute; left: 100px; top: 200px; height: 50px;width: 70px; background-color: lightseagreen;" | |
></div> | |
</div> | |
<!-- <script src="lib/fastdom.min.js"></script> | |
<script src="lib/fastdom-promised.js"></script> | |
<script src="lib/fastdom-strict.js"></script> --> | |
<script src="https://wilsonpage.github.io/fastdom/fastdom.min.js"></script> | |
<script type="module"> | |
const _measure = (fn, ctx) => fastdom.measure(fn, ctx); | |
const _mutate = (fn, ctx) => fastdom.mutate(fn, ctx); | |
const getElementWidth = (element, cb) => | |
_measure(() => cb(element.offsetWidth)); | |
const getElementHeight = (element, cb) => | |
_measure(() => cb(element.offsetHeight)); | |
const createElement = (elementType, cb) => | |
_mutate(() => cb(document.createElement(elementType))); | |
const appendElement = (element, parentNode, cb) => | |
_mutate(() => cb(parentNode.appendChild(element))); | |
let container = document.getElementById("container"); | |
let testdiv1 = document.getElementById("testdiv1"); | |
(function test() { | |
for (let i = 0; i < 1000; i++) { | |
getElementWidth(testdiv1, testdiv1Width => { | |
getElementHeight(testdiv1, testdiv1Height => { | |
console.log( | |
"testdiv1Height=%s, testdiv1Width=%s", | |
testdiv1Height, | |
testdiv1Width | |
); | |
createElement("span", newDiv => { | |
newDiv.textContent = i; | |
newDiv.style.display = "inline-block"; | |
newDiv.style.height = testdiv1Width + "px"; | |
newDiv.style.width = testdiv1Height + "px"; | |
newDiv.style.backgroundColor = "red"; | |
appendElement(newDiv, container, () => {}); | |
// console.log(newDiv); | |
}); | |
}); | |
}); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>Fastdom callback test</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
</head> | |
<body> | |
<div id="container"> | |
<div | |
id="testdiv1" | |
style="position: absolute; left: 100px; top: 200px; height: 50px;width: 70px; background-color: lightseagreen;" | |
></div> | |
</div> | |
<script src="https://wilsonpage.github.io/fastdom/fastdom.min.js"></script> | |
<script type="module"> | |
const _measure = (fn, ctx) => fastdom.measure(fn, ctx); | |
const _mutate = (fn, ctx) => fastdom.mutate(fn, ctx); | |
const getElementWidth = (element, cb) => | |
_measure(() => cb(element.offsetWidth)); | |
const getElementHeight = (element, cb) => | |
_measure(() => cb(element.offsetHeight)); | |
const createElement = (elementType, cb) => | |
_mutate(() => cb(document.createElement(elementType))); | |
const appendElement = (element, parentNode, cb) => | |
_mutate(() => cb(parentNode.appendChild(element))); | |
let container = document.getElementById('container'); | |
let testdiv1 = document.getElementById('testdiv1'); | |
(function test() { | |
getElementWidth(testdiv1, testdiv1Width => { | |
getElementHeight(testdiv1, testdiv1Height => { | |
console.log( | |
'testdiv1Height=%s, testdiv1Width=%s', | |
testdiv1Height, | |
testdiv1Width | |
); | |
for (let i = 0; i < 1000; i++) { | |
createElement('span', newDiv => { | |
newDiv.textContent = i; | |
newDiv.style.display = 'inline-block'; | |
newDiv.style.height = testdiv1Width + 'px'; | |
newDiv.style.width = testdiv1Height + 'px'; | |
newDiv.style.backgroundColor = 'red'; | |
appendElement(newDiv, container, () => {}); | |
// console.log(newDiv); | |
}); | |
} | |
}); | |
}); | |
})(); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>Fastdom test</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
</head> | |
<body> | |
<div id="container"> | |
<div | |
id="testdiv1" | |
style="position: absolute; left: 100px; top: 200px; height: 50px;width: 70px; background-color: lightseagreen;" | |
></div> | |
</div> | |
<!-- <script src="lib/fastdom.min.js"></script> | |
<script src="lib/fastdom-promised.js"></script> | |
<script src="lib/fastdom-strict.js"></script> --> | |
<script src="https://wilsonpage.github.io/fastdom/fastdom.min.js"></script> | |
<script src="https://wilsonpage.github.io/fastdom/extensions/fastdom-promised.js"></script> | |
<script type="module"> | |
const _fastdom = fastdom.extend(fastdomPromised); | |
const _measure = (fn, ctx) => _fastdom.measure(fn, ctx); | |
const _mutate = (fn, ctx) => _fastdom.mutate(fn, ctx); | |
const getElementWidth = element => | |
_measure(() => element.offsetWidth); | |
const getElementHeight = element => | |
_measure(() => element.offsetHeight); | |
const createElement = (elementType, parentNode) => | |
_mutate(() => { | |
let newEle = document.createElement(elementType); | |
if (parentNode) { | |
parentNode.appendChild(newEle); | |
} | |
return newEle; | |
}); | |
const appendElement = (element, parentNode) => | |
_mutate(() => parentNode.appendChild(element)); | |
let container = document.getElementById('container'); | |
let testdiv1 = document.getElementById('testdiv1'); | |
(function test() { | |
getElementWidth(testdiv1).then(testdiv1Width => { | |
getElementHeight(testdiv1) | |
.then(testdiv1Height => { | |
console.log( | |
'testdiv1Height=%s, testdiv1Width=%s', | |
testdiv1Height, | |
testdiv1Width | |
); | |
return { | |
testdiv1Width: testdiv1Width, | |
testdiv1Height: testdiv1Height, | |
}; | |
}) | |
.then(dimensions => { | |
for (let i = 0; i < 1000; i++) { | |
createElement('span').then(newDiv => { | |
newDiv.textContent = i; | |
newDiv.style.display = 'inline-block'; | |
newDiv.style.height = dimensions.testdiv1Width + 'px'; | |
newDiv.style.width = dimensions.testdiv1Height + 'px'; | |
newDiv.style.backgroundColor = 'red'; | |
appendElement(newDiv, container); | |
// console.log(newDiv); | |
}); | |
} | |
}); | |
}); | |
})(); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>No fastdom test</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
</head> | |
<body> | |
<div id="container"> | |
<div | |
id="testdiv1" | |
style="position: absolute; left: 100px; top: 200px; height: 50px;width: 70px; background-color: lightseagreen;" | |
></div> | |
</div> | |
<script> | |
const getElementWidth = element => element.offsetWidth; | |
const getElementHeight = element => element.offsetHeight; | |
const createElement = (elementType, parentNode) => { | |
let newEle = document.createElement(elementType); | |
if (parentNode) { | |
parentNode.appendChild(newEle); | |
} | |
return newEle; | |
}; | |
const appendElement = (element, parentNode) => | |
parentNode.appendChild(element); | |
let container = document.getElementById("container"); | |
let testdiv1 = document.getElementById("testdiv1"); | |
(function test() { | |
for (let i = 0; i < 1000; i++) { | |
let testdiv1Width = getElementWidth(testdiv1); | |
let testdiv1Height = getElementHeight(testdiv1); | |
console.log( | |
"testdiv1Height=%s, testdiv1Width=%s", | |
testdiv1Height, | |
testdiv1Width | |
); | |
let newDiv = createElement("span"); | |
newDiv.textContent = i; | |
newDiv.style.display = "inline-block"; | |
newDiv.style.height = testdiv1Width + "px"; | |
newDiv.style.width = testdiv1Height + "px"; | |
newDiv.style.backgroundColor = "red"; | |
appendElement(newDiv, container); | |
// console.log(newDiv); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<title>No fastdom test</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
</head> | |
<body> | |
<div id="container"> | |
<div | |
id="testdiv1" | |
style="position: absolute; left: 100px; top: 200px; height: 50px;width: 70px; background-color: lightseagreen;" | |
></div> | |
</div> | |
<script> | |
const getElementWidth = element => element.offsetWidth; | |
const getElementHeight = element => element.offsetHeight; | |
const createElement = (elementType, parentNode) => | |
{ | |
let newEle = document.createElement(elementType); | |
if (parentNode) { | |
parentNode.appendChild(newEle); | |
} | |
return newEle; | |
}; | |
const appendElement = (element, parentNode) => parentNode.appendChild(element); | |
let container = document.getElementById('container'); | |
let testdiv1 = document.getElementById('testdiv1'); | |
(function test() { | |
let testdiv1Width = getElementWidth(testdiv1); | |
let testdiv1Height = getElementHeight(testdiv1); | |
console.log( | |
'testdiv1Height=%s, testdiv1Width=%s', | |
testdiv1Height, | |
testdiv1Width | |
); | |
for (let i = 0; i < 1000; i++) { | |
let newDiv = createElement('span'); | |
newDiv.textContent = i; | |
newDiv.style.display = 'inline-block'; | |
newDiv.style.height = testdiv1Width + 'px'; | |
newDiv.style.width = testdiv1Height + 'px'; | |
newDiv.style.backgroundColor = 'red'; | |
appendElement(newDiv, container); | |
// console.log(newDiv); | |
} | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment