diff options
| author | Devrim Tufan <dtufan@yahoo-inc.com> | 2014-02-25 17:03:48 -0800 |
|---|---|---|
| committer | Devrim Tufan <dtufan@yahoo-inc.com> | 2014-02-25 17:03:48 -0800 |
| commit | c1b12be629fcb7aa5b2fbd004583a7f71b3ccb57 (patch) | |
| tree | 02f78a9f9d407ce09ecfcbf58a5ce8817779cad8 | |
| parent | 73e10b94267242ca5076ddcc7427d9a84b5b57d8 (diff) | |
| download | fastdom-c1b12be629fcb7aa5b2fbd004583a7f71b3ccb57.zip fastdom-c1b12be629fcb7aa5b2fbd004583a7f71b3ccb57.tar.gz fastdom-c1b12be629fcb7aa5b2fbd004583a7f71b3ccb57.tar.bz2 | |
adding requestAnimationFrame function to comparison
| -rw-r--r-- | examples/aspect-ratio.html | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/examples/aspect-ratio.html b/examples/aspect-ratio.html index 3ae4a8b..9832393 100644 --- a/examples/aspect-ratio.html +++ b/examples/aspect-ratio.html @@ -20,6 +20,7 @@ <body> <label>Number of elements <input id="input" type="text" value="100" /></label> <button id="withoutFastDom">Run without FastDom</button> + <button id="withRequestAnimationFrame">Run with requestAnimationFrame</button> <button id="withFastDom">Run with FastDom</button> <button id="resetbtn">reset</button> <section id="perf"></section> @@ -56,6 +57,25 @@ } } + function setAspectRequestAnimationFrame(div, i) { + var aspect = 9/16; + var isLast = i === (n - 1); + + // READ + requestAnimationFrame(function() { + var h = div.clientWidth * aspect; + + // WRITE + requestAnimationFrame(function() { + div.style.height = h + 'px'; + + if (isLast) { + displayPerf(performance.now() - start); + } + }); + }); + } + function setAspectFastDom(div, i) { var aspect = 9/16; var isLast = i === (n - 1); @@ -91,6 +111,12 @@ divs.forEach(setAspectFastDom); }; + withRequestAnimationFrame.onclick = function() { + reset(); + start = performance.now(); + divs.forEach(setAspectRequestAnimationFrame); + }; + resetbtn.onclick = reset; </script> </body> |