Optimizations

Author: Akryum

src/components/VirtualScroller.vue

@@ -185,6 +185,41 @@ export default {
     itemHeight: 'setDirty',
   },
 
+  created () {
+    this.$_ready = false
+    this.$_startIndex = 0
+    this.$_oldScrollTop = null
+    this.$_oldScrollBottom = null
+    this.$_offsetTop = 0
+    this.$_height = 0
+    this.$_scrollDirty = false
+    this.$_updateDirty = false
+
+    const prerender = parseInt(this.prerender)
+    if (prerender > 0) {
+      this.visibleItems = this.items.slice(0, prerender)
+      this.$_length = this.visibleItems.length
+      this.$_endIndex = this.$_length - 1
+      this.$_skip = true
+    } else {
+      this.$_endIndex = 0
+      this.$_length = 0
+      this.$_skip = false
+    }
+  },
+
+  mounted () {
+    this.applyPageMode()
+    this.$nextTick(() => {
+      this.updateVisibleItems(true)
+      this.$_ready = true
+    })
+  },
+
+  beforeDestroy () {
+    this.removeWindowScroll()
+  },
+
   methods: {
     getScroll () {
       const el = this.$el
@@ -220,113 +255,120 @@ export default {
     },
 
     updateVisibleItems (force = false) {
-      const l = this.items.length
-      const scroll = this.getScroll()
-      const items = this.items
-      const itemHeight = this.itemHeight
-      let containerHeight, offsetTop
-      if (scroll) {
-        let startIndex = -1
-        let endIndex = -1
-
-        const buffer = parseInt(this.buffer)
-        const poolSize = parseInt(this.poolSize)
-        const scrollTop = ~~(scroll.top / poolSize) * poolSize - buffer
-        const scrollBottom = Math.ceil(scroll.bottom / poolSize) * poolSize + buffer
-
-        if (!force && ((scrollTop === this._oldScrollTop && scrollBottom === this._oldScrollBottom) || this._skip)) {
-          this._skip = false
-          return
-        } else {
-          this._oldScrollTop = scrollTop
-          this._oldScrollBottom = scrollBottom
-        }
-
-        // Variable height mode
-        if (itemHeight === null) {
-          const heights = this.heights
-          let h
-          let a = 0
-          let b = l - 1
-          let i = ~~(l / 2)
-          let oldI
-
-          // Searching for startIndex
-          do {
-            oldI = i
-            h = heights[i]
-            if (h < scrollTop) {
-              a = i
-            } else if (i < l && heights[i + 1] > scrollTop) {
-              b = i
+      if (!this.$_updateDirty) {
+        this.$_updateDirty = true
+        this.$nextTick(() => {
+          this.$_updateDirty = false
+
+          const l = this.items.length
+          const scroll = this.getScroll()
+          const items = this.items
+          const itemHeight = this.itemHeight
+          let containerHeight, offsetTop
+          if (scroll) {
+            let startIndex = -1
+            let endIndex = -1
+
+            const buffer = parseInt(this.buffer)
+            const poolSize = parseInt(this.poolSize)
+            const scrollTop = ~~(scroll.top / poolSize) * poolSize - buffer
+            const scrollBottom = Math.ceil(scroll.bottom / poolSize) * poolSize + buffer
+
+            if (!force && ((scrollTop === this.$_oldScrollTop && scrollBottom === this.$_oldScrollBottom) || this.$_skip)) {
+              this.$_skip = false
+              return
+            } else {
+              this.$_oldScrollTop = scrollTop
+              this.$_oldScrollBottom = scrollBottom
             }
-            i = ~~((a + b) / 2)
-          } while (i !== oldI)
-          i < 0 && (i = 0)
-          startIndex = i
-
-          // For containers style
-          offsetTop = i > 0 ? heights[i - 1] : 0
-          containerHeight = heights[l - 1]
-
-          // Searching for endIndex
-          for (endIndex = i; endIndex < l && heights[endIndex] < scrollBottom; endIndex++);
-          if (endIndex === -1) {
-            endIndex = items.length - 1
-          } else {
-            endIndex++
-            // Bounds
-            endIndex > l && (endIndex = l)
-          }
-        } else {
-          // Fixed height mode
-          startIndex = ~~(scrollTop / itemHeight)
-          endIndex = Math.ceil(scrollBottom / itemHeight)
 
-          // Bounds
-          startIndex < 0 && (startIndex = 0)
-          endIndex > l && (endIndex = l)
-
-          offsetTop = startIndex * itemHeight
-          containerHeight = l * itemHeight
-        }
-
-        if (
-          force ||
-          this._startIndex !== startIndex ||
-          this._endIndex !== endIndex ||
-          this._offsetTop !== offsetTop ||
-          this._height !== containerHeight ||
-          this._length !== l
-        ) {
-          this.keysEnabled = !(startIndex > this._endIndex || endIndex < this._startIndex)
-
-          this.itemContainerStyle = {
-            height: containerHeight + 'px',
-          }
-          this.itemsStyle = {
-            marginTop: offsetTop + 'px',
-          }
+            // Variable height mode
+            if (itemHeight === null) {
+              const heights = this.heights
+              let h
+              let a = 0
+              let b = l - 1
+              let i = ~~(l / 2)
+              let oldI
+
+              // Searching for startIndex
+              do {
+                oldI = i
+                h = heights[i]
+                if (h < scrollTop) {
+                  a = i
+                } else if (i < l && heights[i + 1] > scrollTop) {
+                  b = i
+                }
+                i = ~~((a + b) / 2)
+              } while (i !== oldI)
+              i < 0 && (i = 0)
+              startIndex = i
+
+              // For containers style
+              offsetTop = i > 0 ? heights[i - 1] : 0
+              containerHeight = heights[l - 1]
+
+              // Searching for endIndex
+              for (endIndex = i; endIndex < l && heights[endIndex] < scrollBottom; endIndex++);
+              if (endIndex === -1) {
+                endIndex = items.length - 1
+              } else {
+                endIndex++
+                // Bounds
+                endIndex > l && (endIndex = l)
+              }
+            } else {
+              // Fixed height mode
+              startIndex = ~~(scrollTop / itemHeight)
+              endIndex = Math.ceil(scrollBottom / itemHeight)
+
+              // Bounds
+              startIndex < 0 && (startIndex = 0)
+              endIndex > l && (endIndex = l)
+
+              offsetTop = startIndex * itemHeight
+              containerHeight = l * itemHeight
+            }
 
-          if (this.delayPreviousItems) {
-            // Add next items
-            this.visibleItems = items.slice(this._startIndex, endIndex)
-            // Remove previous items
-            this.$nextTick(() => {
-              this.visibleItems = items.slice(startIndex, endIndex)
-            })
-          } else {
-            this.visibleItems = items.slice(startIndex, endIndex)
+            if (
+              force ||
+              this.$_startIndex !== startIndex ||
+              this.$_endIndex !== endIndex ||
+              this.$_offsetTop !== offsetTop ||
+              this.$_height !== containerHeight ||
+              this.$_length !== l
+            ) {
+              this.keysEnabled = !(startIndex > this.$_endIndex || endIndex < this.$_startIndex)
+
+              this.itemContainerStyle = {
+                height: containerHeight + 'px',
+              }
+              this.itemsStyle = {
+                marginTop: offsetTop + 'px',
+              }
+
+              if (this.delayPreviousItems) {
+                // Add next items
+                this.visibleItems = items.slice(this.$_startIndex, endIndex)
+                // Remove previous items
+                this.$nextTick(() => {
+                  this.visibleItems = items.slice(startIndex, endIndex)
+                })
+              } else {
+                this.visibleItems = items.slice(startIndex, endIndex)
+              }
+
+              this.emitUpdate && this.$emit('update', startIndex, endIndex)
+
+              this.$_startIndex = startIndex
+              this.$_endIndex = endIndex
+              this.$_length = l
+              this.$_offsetTop = offsetTop
+              this.$_height = containerHeight
+            }
           }
-
-          this.emitUpdate && this.$emit('update', startIndex, endIndex)
-
-          this._startIndex = startIndex
-          this._endIndex = endIndex
-          this._length = l
-          this._offsetTop = offsetTop
-          this._height = containerHeight
-        }
+        })
       }
     },
 
@@ -341,8 +383,8 @@ export default {
     },
 
     setDirty () {
-      this._oldScrollTop = null
-      this._oldScrollBottom = null
+      this.$_oldScrollTop = null
+      this.$_oldScrollBottom = null
     },
 
     applyPageMode () {
@@ -364,56 +406,29 @@ export default {
     },
 
     handleScroll () {
-      this.updateVisibleItems()
+      if (!this.$_scrollDirty) {
+        this.$_scrollDirty = true
+        requestAnimationFrame(() => {
+          this.$_scrollDirty = false
+          this.updateVisibleItems()
+        })
+      }
     },
 
     handleResize () {
       this.$emit('resize')
-      this._ready && this.updateVisibleItems()
+      this.$_ready && this.updateVisibleItems()
     },
 
     handleVisibilityChange (isVisible, entry) {
-      if (this._ready && (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0)) {
+      if (this.$_ready && (isVisible || entry.boundingClientRect.width !== 0 || entry.boundingClientRect.height !== 0)) {
         this.$emit('visible')
         this.$nextTick(() => {
           this.updateVisibleItems()
         })
       }
     },
   },
-
-  created () {
-    this._ready = false
-    this._startIndex = 0
-    this._oldScrollTop = null
-    this._oldScrollBottom = null
-    this._offsetTop = 0
-    this._height = 0
-    const prerender = parseInt(this.prerender)
-    if (prerender > 0) {
-      this.visibleItems = this.items.slice(0, prerender)
-      this._length = this.visibleItems.length
-      this._endIndex = this._length - 1
-      this._skip = true
-    } else {
-      this._endIndex = 0
-      this._length = 0
-      this._skip = false
-    }
-  },
-
-  mounted () {
-    this.applyPageMode()
-    this.$nextTick(() => {
-      this.updateVisibleItems(true)
-      this._ready = true
-      this.$nextTick(this.updateVisibleItems)
-    })
-  },
-
-  beforeDestroy () {
-    this.removeWindowScroll()
-  },
 }
 </script>