feat: allow throttling update calls

updateVisibleItems needs to get the value of scrollTop,
which can be expensive because of layout calculations. Further,
checking the view at 60fps can be overkill, especially if you
have a well-sized buffer. Setting updateInterval to a small
value such as 100ms drastically reduces CPU usage.

Signed-off-by: Varun Patil <[email protected]>

Author: pulsejet

packages/vue-virtual-scroller/README.md

@@ -187,6 +187,7 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `prerender` (default: `0`): render a fixed number of items for Server-Side Rendering (SSR).
 - `buffer` (default: `200`): amount of pixel to add to edges of the scrolling visible area to start rendering items further away.
 - `emitUpdate` (default: `false`): emit a `'update'` event each time the virtual scroller content is updated (can impact performance).
+- `updateInterval` (default: `0`): the interval in ms at which the view will be checked for updates after scrolling. When set to `0`, checked will happen during the next animation frame.
 - `listClass` (default: `''`): custom classes added to the item list wrapper.
 - `itemClass` (default: `''`): custom classes added to each item.
 - `listTag` (default: `'div'`): the element to render as the list's wrapper.

packages/vue-virtual-scroller/src/components/RecycleScroller.vue

@@ -148,6 +148,11 @@ export default {
       default: false,
     },
 
+    updateInterval: {
+      type: Number,
+      default: 0,
+    },
+
     skipHover: {
       type: Boolean,
       default: false,
@@ -333,17 +338,29 @@ export default {
     handleScroll (event) {
       if (!this.$_scrollDirty) {
         this.$_scrollDirty = true
-        requestAnimationFrame(() => {
+        if (this.$_updateTimeout) return
+
+        const requestUpdate = () => requestAnimationFrame(() => {
           this.$_scrollDirty = false
           const { continuous } = this.updateVisibleItems(false, true)
 
           // It seems sometimes chrome doesn't fire scroll event :/
           // When non continous scrolling is ending, we force a refresh
           if (!continuous) {
             clearTimeout(this.$_refreshTimout)
-            this.$_refreshTimout = setTimeout(this.handleScroll, 100)
+            this.$_refreshTimout = setTimeout(this.handleScroll, this.updateInterval + 100)
           }
         })
+
+        requestUpdate()
+
+        // Schedule the next update with throttling
+        if (this.updateInterval) {
+          this.$_updateTimeout = setTimeout(() => {
+            this.$_updateTimeout = 0
+            if (this.$_scrollDirty) requestUpdate();
+          }, this.updateInterval)
+        }
       }
     },
 
@@ -597,7 +614,7 @@ export default {
       // After the user has finished scrolling
       // Sort views so text selection is correct
       clearTimeout(this.$_sortTimer)
-      this.$_sortTimer = setTimeout(this.sortViews, 300)
+      this.$_sortTimer = setTimeout(this.sortViews, this.updateInterval + 300)
 
       return {
         continuous,