experiment with high and low render priority

This commit is contained in:
Nolan Lawson 2018-03-21 23:32:08 -07:00
parent 72e7e18e0b
commit 5a80d43784
4 changed files with 21 additions and 4 deletions

View File

@ -5,6 +5,7 @@
focusSelector="{{virtualProps.focusSelector}}"
index="{{virtualIndex}}"
length="{{virtualLength}}"
lowPriority="{{virtualLowPriority}}"
on:recalculateHeight />
<script>
import Notification from '../status/Notification.html'

View File

@ -8,6 +8,7 @@
makeProps="{{makeProps}}"
key="{{visibleItem.key}}"
index="{{visibleItem.index}}"
lowPriority="{{visibleItem.lowPriority}}"
/>
{{/each}}
{{/if}}

View File

@ -19,11 +19,18 @@
let key = this.get('key')
if (makeProps) {
let props = await makeProps(key)
scheduleIdleTask(() => { // delay slightly to avoid slow scrolling
let render = () => {
mark('VirtualListLazyItem set props')
this.set({props: props})
stop('VirtualListLazyItem set props')
})
}
if (this.get('lowPriority')) {
console.log('lazy render', this.get('key'))
scheduleIdleTask(render)
} else {
console.log('fast render', this.get('key'))
render()
}
}
},
components: {

View File

@ -4,6 +4,11 @@ import { reselect } from '../../_utils/reselect'
const VIEWPORT_RENDER_FACTOR = 5
// TODO: Hack because compose box takes up roughly this amount of pixels.
// Ideally we should calculate that the .virtual-list is X number of pixels
// below the .container and then offset everything by that.
const HIGH_PRIORITY_TOP_BUFFER = 600
class VirtualListStore extends RealmStore {
constructor (state) {
super(state, /* maxSize */ 10)
@ -46,14 +51,17 @@ virtualListStore.compute('rawVisibleItems',
continue // above the area we want to render
}
} else {
if (currentOffset > (scrollTop + height + renderBuffer)) {
if (currentOffset > (scrollTop + offsetHeight + renderBuffer)) {
break // below the area we want to render
}
}
let lowPriority = ((currentOffset + height + HIGH_PRIORITY_TOP_BUFFER) < scrollTop) ||
(currentOffset > (scrollTop + offsetHeight))
visibleItems.push({
offset: currentOffset,
key: key,
index: i
index: i,
lowPriority: lowPriority
})
}
stop('compute visibleItems')