remove AsyncLayout in favor of rAf + gBCR

This commit is contained in:
Nolan Lawson 2018-04-27 09:21:30 -07:00
parent 8a46f3b3d1
commit 75b4d09b64
4 changed files with 15 additions and 62 deletions

View file

@ -12,13 +12,14 @@
</style> </style>
<script> <script>
import { virtualListStore } from './virtualListStore' import { virtualListStore } from './virtualListStore'
import { AsyncLayout } from '../../_utils/AsyncLayout' import { mark, stop } from '../../_utils/marks'
export default { export default {
oncreate () { oncreate () {
const asyncLayout = new AsyncLayout(() => '__footer__') requestAnimationFrame(() => {
asyncLayout.observe('__footer__', this.refs.node, (rect) => { mark('VirtualListFooter gBCR')
asyncLayout.disconnect() let rect = this.refs.node.getBoundingClientRect()
stop('VirtualListFooter gBCR')
this.store.setForRealm({footerHeight: rect.height}) this.store.setForRealm({footerHeight: rect.height})
}) })
}, },

View file

@ -22,8 +22,8 @@
</style> </style>
<script> <script>
import { virtualListStore } from './virtualListStore' import { virtualListStore } from './virtualListStore'
import { AsyncLayout } from '../../_utils/AsyncLayout'
import { doubleRAF } from '../../_utils/doubleRAF' import { doubleRAF } from '../../_utils/doubleRAF'
import { mark, stop } from '../../_utils/marks'
export default { export default {
oncreate () { oncreate () {
@ -44,9 +44,10 @@
return return
} }
this.set({heightCalculated: true}) this.set({heightCalculated: true})
const asyncLayout = new AsyncLayout(() => '__header__') requestAnimationFrame(() => {
asyncLayout.observe('__header__', this.refs.node, (rect) => { mark('VirtualListHeader gBCR')
asyncLayout.disconnect() let rect = this.refs.node.getBoundingClientRect()
stop('VirtualListHeader gBCR')
this.store.setForRealm({headerHeight: rect.height}) this.store.setForRealm({headerHeight: rect.height})
}) })
} }

View file

@ -24,15 +24,16 @@
</style> </style>
<script> <script>
import { virtualListStore } from './virtualListStore' import { virtualListStore } from './virtualListStore'
import { AsyncLayout } from '../../_utils/AsyncLayout'
import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize' import { registerResizeListener, unregisterResizeListener } from '../../_utils/resize'
import { mark, stop } from '../../_utils/marks'
export default { export default {
oncreate () { oncreate () {
let asyncLayout = new AsyncLayout(node => node.getAttribute('virtual-list-key'))
let { key } = this.get() let { key } = this.get()
asyncLayout.observe(key, this.refs.node, (rect) => { requestAnimationFrame(() => {
asyncLayout.disconnect() mark('VirtualListItem gBCR')
let rect = this.refs.node.getBoundingClientRect()
stop('VirtualListItem gBCR')
// update all item heights in one batch for better perf // update all item heights in one batch for better perf
this.store.batchUpdateForRealm('itemHeights', key, rect.height) this.store.batchUpdateForRealm('itemHeights', key, rect.height)
}) })

View file

@ -1,50 +0,0 @@
// Use intersection observer to calculate rects asynchronously
import { getRectFromEntry } from './getRectFromEntry'
class AsyncLayout {
constructor (generateKeyFromNode) {
this._onIntersectionCallbacks = {}
this._intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
let key = generateKeyFromNode(entry.target)
this._onIntersectionCallbacks[key](entry)
})
})
}
observe (key, node, callback) {
if (!node) {
return
}
if (this._intersectionObserver) {
this._onIntersectionCallbacks[key] = (entry) => {
callback(getRectFromEntry(entry))
this.unobserve(key, node)
}
this._intersectionObserver.observe(node)
}
}
unobserve (key, node) {
if (key in this._onIntersectionCallbacks) {
return
}
if (!node) {
return
}
if (this._intersectionObserver) {
this._intersectionObserver.unobserve(node)
}
delete this._onIntersectionCallbacks[key]
}
disconnect () {
if (this._intersectionObserver) {
this._intersectionObserver.disconnect()
this._intersectionObserver = null
}
}
}
export { AsyncLayout }