Add fastdom to improve performance

package.json

@@ -54,6 +54,7 @@
  "eslint-plugin-promise": "^4.0.1",
  "eslint-plugin-standard": "^4.0.0",
  "eslint-plugin-vue": "^6.2.2",
+ "fastdom": "^1.0.9",
  "rollup": "^2.2.0",
  "rollup-plugin-babel": "^4.4.0",
  "rollup-plugin-commonjs": "^10.1.0",

src/components/DynamicScrollerItem.vue

@@ -1,4 +1,5 @@
 <script>
+import fastdom from 'fastdom'
 export default {
  name: 'DynamicScrollerItem',
 
@@ -161,12 +162,22 @@ export default {
  this.updateSize()
  },
 
+ getBounds () {
+ return new Promise((resolve, reject) => {
+ fastdom.measure(() => {
+ resolve({
+ width: this.$el.offsetWidth,
+ height: this.$el.offsetHeight,
+ })
+ })
+ })
+ },
+
  computeSize (id) {
- this.$nextTick(() => {
+ this.$nextTick(async () => {
  if (this.id === id) {
- const width = this.$el.offsetWidth
- const height = this.$el.offsetHeight
- this.applySize(width, height)
+ const bounds = await this.getBounds()
+ this.applySize(bounds.width, bounds.height)
  }
  this.$_pendingSizeUpdate = null
  })

src/components/RecycleScroller.vue

@@ -57,6 +57,7 @@
 import { ResizeObserver } from 'vue-resize'
 import { ObserveVisibility } from 'vue-observe-visibility'
 import ScrollParent from 'scrollparent'
+import fastdom from 'fastdom'
 import config from '../config'
 import { props, simpleArray } from './common'
 import { supportsPassive } from '../utils'
@@ -265,7 +266,7 @@ export default {
  }
  },
 
- updateVisibleItems (checkItem) {
+ async updateVisibleItems (checkItem) {
  const itemSize = this.itemSize
  const typeField = this.typeField
  const keyField = this.simpleArray ? null : this.keyField
@@ -285,7 +286,7 @@ export default {
  endIndex = this.prerender
  totalSize = null
  } else {
- const scroll = this.getScroll()
+ const scroll = await this.getScroll()
  const buffer = this.buffer
  scroll.start -= buffer
  scroll.end += buffer
@@ -471,39 +472,61 @@ export default {
  },
 
  getScroll () {
- const { $el: el, direction } = this
- const isVertical = direction === 'vertical'
- let scrollState
-
- if (this.pageMode) {
- const bounds = el.getBoundingClientRect()
- const boundsSize = isVertical ? bounds.height : bounds.width
- let start = -(isVertical ? bounds.top : bounds.left)
- let size = isVertical ? window.innerHeight : window.innerWidth
- if (start < 0) {
- size += start
- start = 0
- }
- if (start + size > boundsSize) {
- size = boundsSize - start
- }
- scrollState = {
- start,
- end: start + size,
- }
- } else if (isVertical) {
- scrollState = {
- start: el.scrollTop,
- end: el.scrollTop + el.clientHeight,
- }
- } else {
- scrollState = {
- start: el.scrollLeft,
- end: el.scrollLeft + el.clientWidth,
+ return new Promise((resolve, reject) => {
+ const { $el: el, direction } = this
+ const isVertical = direction === 'vertical'
+ let scrollState
+
+ if (this.pageMode) {
+ fastdom.measure(() => {
+ const bounds = el.getBoundingClientRect()
+ const boundsSize = isVertical ? bounds.height : bounds.width
+ let start = -(isVertical ? bounds.top : bounds.left)
+ let size = isVertical ? window.innerHeight : window.innerWidth
+
+ fastdom.mutate(() => {
+ if (start < 0) {
+ size += start
+ start = 0
+ }
+ if (start + size > boundsSize) {
+ size = boundsSize - start
+ }
+ scrollState = {
+ start,
+ end: start + size,
+ }
+ resolve(scrollState)
+ })
+ })
+ } else if (isVertical) {
+ fastdom.measure(() => {
+ const start = el.scrollTop
+ const end = el.scrollTop + el.clientHeight
+
+ fastdom.mutate(() => {
+ scrollState = {
+ start,
+ end,
+ }
+ resolve(scrollState)
+ })
+ })
+ } else {
+ fastdom.measure(() => {
+ const start = el.scrollLeft
+ const end = el.scrollLeft + el.clientWidth
+
+ fastdom.mutate(() => {
+ scrollState = {
+ start,
+ end,
+ }
+ resolve(scrollState)
+ })
+ })
  }
- }
-
- return scrollState
+ })
  },
 
  applyPageMode () {

yarn.lock

@@ -1773,6 +1773,13 @@ fast-levenshtein@~2.0.6:
  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fastdom@^1.0.9:
+ version "1.0.9"
+ resolved "https://registry.yarnpkg.com/fastdom/-/fastdom-1.0.9.tgz#b395fab11a3701173c02a054fe769d8f596a0a26"
+ integrity sha512-SSp4fbVzu8JkkG01NUX+0iOwe9M5PN3MGIQ84txLf4TkkJG4q30khkzumKgi4hUqO1+jX6wLHfnCPoZ6eSZ6Tg==
+ dependencies:
+ strictdom "^1.0.1"
+
 fastparse@^1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
@@ -3429,6 +3436,11 @@ sshpk@^1.7.0:
  safer-buffer "^2.0.2"
  tweetnacl "~0.14.0"
 
+strictdom@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/strictdom/-/strictdom-1.0.1.tgz#189de91649f73d44d59b8432efa68ef9d2659460"
+ integrity sha1-GJ3pFkn3PUTVm4Qy76aO+dJllGA=
+
 string-hash@^1.1.0:
  version "1.1.3"
  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"