Created
April 26, 2018 23:57
-
-
Save nolanlawson/daa6100518e00f9354e04a6a6b09926e to your computer and use it in GitHub Desktop.
Test async getBoundingClientRect with IntersectionObserver vs rAF + gBCR
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 lang="en"> | |
| <head> | |
| <title>Test IntersectionObserver vs rAF + getBoundingClientRect</title> | |
| </head> | |
| <body> | |
| <h1>Test IntersectionObserver vs rAF + getBoundingClientRect</h1> | |
| <button type=button onclick=testIO()>Test using IntersectionObserver</button> | |
| <button type=button onclick=testGBCR()>Test using rAF + gBCR</button> | |
| <pre id=display></pre> | |
| <div id="theContainer"></div> | |
| <script> | |
| function asyncGetBoundingClientRectUsingIO(element) { | |
| return new Promise(function (resolve) { | |
| var observer = new IntersectionObserver(function (entries) { | |
| observer.disconnect(); | |
| resolve(entries[0].boundingClientRect); | |
| }); | |
| observer.observe(element); | |
| }) | |
| } | |
| function asyncGetBoundingClientRectUsingGBCR(element) { | |
| return new Promise(function (resolve) { | |
| requestAnimationFrame(function () { | |
| var rect = element.getBoundingClientRect() | |
| resolve(rect) | |
| }) | |
| }) | |
| } | |
| function log(str) { | |
| display.innerHTML += str + '\n' | |
| } | |
| var $ = document.querySelector.bind(document) | |
| var container = $('#theContainer') | |
| function fillContainer() { | |
| var bigText = '<table>' | |
| for (var i = 0; i < 1000; i++) { | |
| bigText += '<tr>' | |
| for (var j = 0; j < 10; j++) { | |
| bigText += '<td>' + i + ' ' + j + '</td>' | |
| } | |
| bigText += '</tr>' | |
| } | |
| bigText += '</table>' | |
| container.innerHTML = bigText | |
| return Promise.resolve() | |
| } | |
| function Marker(str) { | |
| this.str = str | |
| } | |
| Marker.prototype.mark = function () { | |
| performance.mark('start_' + this.str) | |
| } | |
| Marker.prototype.stop = function () { | |
| performance.mark('end_' + this.str) | |
| performance.measure(this.str, 'start_' + this.str, 'end_' + this.str) | |
| return performance.getEntriesByName(this.str).reverse().slice(-1)[0].duration | |
| } | |
| function stringifyRect(rect) { | |
| return JSON.stringify({ left: rect.left, top: rect.top, width: rect.width, height: rect.height }) | |
| } | |
| function testGBCR() { | |
| var marker = new Marker('gbcr-' + Math.random()) | |
| fillContainer().then(function () { | |
| marker.mark() | |
| return asyncGetBoundingClientRectUsingGBCR(container) | |
| }).then(function (rect) { | |
| var duration = marker.stop() | |
| log('duration: ' + duration + ', rect: ' + stringifyRect(rect)) | |
| container.innerHTML = '' | |
| }).catch(console.error.bind(console)) | |
| } | |
| function testIO() { | |
| var marker = new Marker('io-' + Math.random()) | |
| fillContainer().then(function () { | |
| marker.mark() | |
| return asyncGetBoundingClientRectUsingIO(container) | |
| }).then(function (rect) { | |
| var duration = marker.stop() | |
| log('duration: ' + duration + ', rect: ' + stringifyRect(rect)) | |
| container.innerHTML = '' | |
| }).catch(console.error.bind(console)) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment