Skip to content

Instantly share code, notes, and snippets.

@manikantag

manikantag/fastdom-async.html

Last active February 15, 2019 06:12
Show Gist options
  • Save manikantag/630288fb67453bb88c2493f8bd46aadd to your computer and use it in GitHub Desktop.
Save manikantag/630288fb67453bb88c2493f8bd46aadd to your computer and use it in GitHub Desktop.
Download ZIP
fastdom perf analysis with Callbackss, Promise, async/await;
Raw
fastdom-async.html
<!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>
Raw
fastdom-callbacks-correct-test.html
<!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>
Raw
fastdom-callbacks.html
<!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>
Raw
fastdom-promise.html
<!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>
Raw
no-fastdom-correct-test.html
<!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>
Raw
no-fastdom-test.html
<!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