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 hidden or 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> |
I updated the benchmark here https://gist.github.com/aehlke/bc0e23a21a19cbd0abc13cf55c3d1d91
It now mutates elements as part of the benchmark to see how it performs when layout is needed. Results are via console.log. Pretty clear results now
@aehlke Out of curiosity, what were the results? I haven't looked at this in years.
@nolanlawson I actually stopped investigating as I noticed the benchmark getting worse as I ran it (once I added more complex layout with ruby tags and made changes that forced re-layout between iterations) so I'm not certain but it still looks like you were right. I also compared raw client rects without the animation frame and it was way worse when I had more extreme layouts.
Thanks! Makes sense.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Do you know if this still holds true? I can't find info on how using getBoundingClientRect() inside of requestAnimationFrame would avoid re-layouts