tweak when to use requestIdleCallback

This commit is contained in:
Nolan Lawson 2018-03-22 22:53:50 -07:00
parent 0dc676b1c5
commit 3b03bd0e8d
2 changed files with 19 additions and 1 deletions

View File

@ -5,6 +5,7 @@
import { isFullscreen, attachFullscreenListener, detachFullscreenListener } from '../../_utils/fullscreen'
import { mark, stop } from '../../_utils/marks'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { isMobile } from '../../_utils/isMobile'
const SCROLL_EVENT_DELAY = 300
@ -72,7 +73,13 @@
},
onScroll(event) {
let { scrollTop, scrollHeight } = event.target
scheduleIdleTask(() => { // delay slightly to improve scroll perf
// On mobile devices, this can make scrolling more responsive. On
// desktop browsers... it's probably overkill, and can lead to a
// checkerboarding issue ("I just scrolled, why is it blank for 5 seconds?").
let runTask = isMobile() ? scheduleIdleTask : requestAnimationFrame
runTask(() => {
mark('onScroll -> setForRealm()')
this.store.setForRealm({scrollTop, scrollHeight})
stop('onScroll -> setForRealm()')

11
routes/_utils/isMobile.js Normal file
View File

@ -0,0 +1,11 @@
// Rough guess at whether this is a "mobile" device or not, for the purposes
// of "device class" estimations
let cached
export function isMobile () {
if (!cached) {
cached = !!(process.browser && navigator.userAgent.match(/(iPhone|iPod|iPad|Android)/))
}
return cached
}