sindresorhus / element-ready

Detect when an element is ready in the DOM
MIT License
436 stars 15 forks source link

requestAnimationFrame instead of setInterval #4

Closed fregante closed 7 years ago

fregante commented 7 years ago

I used element-ready for https://github.com/sindresorhus/refined-github/pull/441 but it's not fast enough. Here's a comparison with the simple rAF-based solution I used in github-clean-feed and how that compares with element-ready's setInterval

const domReady = new Promise(resolve => {
    (function check() {
        if (document.querySelector('.ajax-pagination-form')) {
            resolve();
        } else {
            requestAnimationFrame(check);
        }
    })();
});

reload screencast

⬆️ I'm refreshing the page. Notice the feed being instantly changed by github-clean-feed, but the Trending link appearing after the first paint.

document.querySelector is not that CPU-intensive, so running it on every frame until domready is not that much to ask. Perhaps it can be an option. Either way I hope to see the change in RefinedGH

sindresorhus commented 7 years ago

Sure, let's go with it.