add perf marks

This commit is contained in:
Nolan Lawson 2018-01-17 00:59:15 -08:00
parent 2c31746ae7
commit 95290afca7
9 changed files with 44 additions and 28 deletions

5
package-lock.json generated
View file

@ -3970,6 +3970,11 @@
"object-visit": "1.0.1"
}
},
"marky": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/marky/-/marky-1.2.0.tgz",
"integrity": "sha1-lhftZHu76o9F0ZUm2jPexwYG30I="
},
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",

View file

@ -27,6 +27,7 @@
"intersection-observer": "^0.5.0",
"intl-relativeformat": "^2.1.0",
"lodash": "^4.17.4",
"marky": "^1.2.0",
"node-fetch": "^1.7.3",
"node-sass": "^4.7.2",
"npm-run-all": "^4.1.2",

View file

@ -12,12 +12,14 @@
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'
import { mark, stop } from '../_utils/marks'
const SCROLL_EVENT_DELAY = 300
const RESIZE_EVENT_DELAY = 700
export default {
oncreate() {
mark('onCreate Layout')
this.observe('innerHeight', debounce(() => {
// respond to window resize events
this.store.set({
@ -29,6 +31,7 @@
scrollHeight: this.refs.node.scrollHeight,
offsetHeight: this.refs.node.offsetHeight
})
stop('onCreate Layout')
},
components: {
Nav
@ -36,7 +39,11 @@
store: () => virtualListStore,
events: {
scroll(node, callback) {
const onScroll = throttle(callback, SCROLL_EVENT_DELAY, {
const onScroll = throttle(event => {
mark('onScroll')
callback(event)
stop('onScroll')
}, SCROLL_EVENT_DELAY, {
leading: true,
trailing: true
})

View file

@ -182,6 +182,7 @@
</style>
<script>
import Avatar from './Avatar.html'
import { mark, stop } from '../_utils/marks'
import IntlRelativeFormat from 'intl-relativeformat'
const relativeFormat = new IntlRelativeFormat('en-US');
@ -192,15 +193,12 @@
computed: {
createdAtDate: (status) => status.created_at,
relativeDate: (createdAtDate) => {
return relativeFormat.format(new Date(createdAtDate))
mark('compute relativeDate')
let res = relativeFormat.format(new Date(createdAtDate))
stop('compute relativeDate')
return res
},
original: (status) => status.reblog ? status.reblog.account : status.account
},
methods: {
alert: function (e) {
e.preventDefault()
window.alert(e.target)
}
}
}
</script>

View file

@ -15,6 +15,7 @@
import StatusListItem from './StatusListItem.html'
import VirtualList from './VirtualList.html'
import { splice, push } from 'svelte-extras'
import { mark, stop } from '../_utils/marks'
let i = -1
@ -37,31 +38,13 @@
splice: splice,
push: push,
addMoreItems() {
console.log('addMoreItems')
mark('addMoreItems')
let statuses = this.get('statuses')
if (statuses) {
let itemsToAdd = createData()
if (itemsToAdd.length) {
}
let importantFirstItem = itemsToAdd
this.splice('statuses', statuses.length, 0, ...itemsToAdd)
}
},
addTheseItems(items) {
if (!items.length) {
return
}
this.push(items.pop())
while (items.length) {
this.addItemLazily(items.pop())
}
},
addItemLazily(item) {
requestIdleCallback(() => {
this.push(item)
})
stop('addMoreItems')
}
}
}

View file

@ -16,15 +16,18 @@
<script>
import VirtualListItem from './VirtualListItem'
import { virtualListStore } from '../_utils/virtualListStore'
import { mark, stop } from '../_utils/marks'
const DISTANCE_FROM_BOTTOM_TO_FIRE = 400
export default {
oncreate () {
this.observe('items', (items) => {
mark('set items')
this.store.set({
items: items
})
stop('set items')
})
let observedOnce = false

View file

@ -20,6 +20,7 @@
</style>
<script>
import { virtualListStore } from '../_utils/virtualListStore'
import { mark, stop } from '../_utils/marks'
let updateItemHeights = {}
let promise = Promise.resolve()
@ -44,6 +45,7 @@
if (!updatedKeys.length) {
return
}
mark('batch update VirtualListItem')
// batch all updates to itemHeights for better perf
let itemHeights = this.store.get('itemHeights')
for (key of updatedKeys) {
@ -53,6 +55,7 @@
itemHeights: itemHeights
})
updateItemHeights = {}
stop('batch update VirtualListItem')
})
}
intersectionObserver.observe(this.refs.node)

13
routes/_utils/marks.js Normal file
View file

@ -0,0 +1,13 @@
import { mark as markyMark, stop as markyStop } from 'marky'
import noop from 'lodash/noop'
const enableMarks = typeof window !== 'undefined' &&
new URLSearchParams(location.search).get('marks') === 'true'
const mark = enableMarks ? markyMark : noop
const stop = enableMarks ? markyStop : noop
export {
mark,
stop
}

View file

@ -1,4 +1,5 @@
import { Store } from 'svelte/store.js'
import { mark, stop } from '../_utils/marks'
class VirtualListStore extends Store {
}
@ -11,6 +12,7 @@ const virtualListStore = new VirtualListStore({
virtualListStore.compute('visibleItems',
['items', 'scrollTop', 'itemHeights', 'offsetHeight'],
(items, scrollTop, itemHeights, offsetHeight) => {
mark('compute visibleItems')
let renderBuffer = 3 * offsetHeight
let visibleItems = []
let totalOffset = 0
@ -38,6 +40,7 @@ virtualListStore.compute('visibleItems',
index: i
})
}
stop('compute visibleItems')
return visibleItems
})