add perf marks

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",

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",

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
         })

routes/_components/Status.html

@@ -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>

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)
         }
-      },
+        stop('addMoreItems')
-      addTheseItems(items) {
-        if (!items.length) {
-          return
-        }
-        this.push(items.pop())
-        while (items.length) {
-          this.addItemLazily(items.pop())
-        }
-      },
-      addItemLazily(item) {
-        requestIdleCallback(() => {
-          this.push(item)
-        })
       }
     }
   }

routes/_components/VirtualList.html

@@ -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

routes/_components/VirtualListItem.html

@@ -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)

routes/_utils/marks.js

@@ -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
+}

routes/_utils/virtualListStore.js

@@ -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
 })