Improve performance until over 9000 rows!!! 🍡🍢

[mesqueeb]

Currently it's only performant until about 200 rows.

[mesqueeb]

latest patch I greatly improved speed until 1.22ms per row.

• 0.33 seconds to render 300 rows! 🎉
• that's still 11 seconds with 9000 rows though... 💈

[mesqueeb]

https://www.vuemastery.com/conferences/vueconf-us-2019/9-performance-secrets-revealed


Cannot use vue-virtual-scroller https://github.com/Akryum/vue-virtual-scroller Because they require dedicated wrapper components, which I can't integrate with mine.


Perhaps look into: vue-observe-visibility https://github.com/Akryum/vue-observe-visibility

[mesqueeb]

Quasar uses: https://github.com/quasarframework/quasar/blob/4691db529a1b4055b2c198888f6c9eb6f1fdf484/ui/src/components/select/QSelect.js Look here:

        on: {
          '&scroll': this.__hydrateOptions,
          hide: this.__closeMenu
        }

this.__hydrateOptions

    __hydrateOptions () {
      if (this.avoidScroll !== true) {
        if (this.optionsToShow < this.options.length) {
          const el = this.__getMenuContentEl()

          if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
            this.optionsToShow += 20
            this.avoidScroll = true
            this.$nextTick(() => {
              this.avoidScroll = false
              this.__hydrateOptions()
            })
          }
        }
      }
    },

and, finally (from above), the magic...: this.optionsToShow += 20