From 95290afca7ef93d3afd5affd6d368cbd9fe500a2 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 17 Jan 2018 00:59:15 -0800 Subject: [PATCH] add perf marks --- package-lock.json | 5 +++++ package.json | 1 + routes/_components/Layout.html | 9 ++++++++- routes/_components/Status.html | 12 +++++------- routes/_components/Timeline.html | 23 +++-------------------- routes/_components/VirtualList.html | 3 +++ routes/_components/VirtualListItem.html | 3 +++ routes/_utils/marks.js | 13 +++++++++++++ routes/_utils/virtualListStore.js | 3 +++ 9 files changed, 44 insertions(+), 28 deletions(-) create mode 100644 routes/_utils/marks.js diff --git a/package-lock.json b/package-lock.json index 069b5106..85fae1c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 402fb5e5..6d953475 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/routes/_components/Layout.html b/routes/_components/Layout.html index 0beecf74..947ae82c 100644 --- a/routes/_components/Layout.html +++ b/routes/_components/Layout.html @@ -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 }) diff --git a/routes/_components/Status.html b/routes/_components/Status.html index bc5e51e0..bb5b4bdd 100644 --- a/routes/_components/Status.html +++ b/routes/_components/Status.html @@ -182,6 +182,7 @@ \ No newline at end of file diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html index 42cc8620..85a4c2c8 100644 --- a/routes/_components/Timeline.html +++ b/routes/_components/Timeline.html @@ -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') } } } diff --git a/routes/_components/VirtualList.html b/routes/_components/VirtualList.html index be0a7937..8cde2853 100644 --- a/routes/_components/VirtualList.html +++ b/routes/_components/VirtualList.html @@ -16,15 +16,18 @@