Improve scroller performance

pull/162/head
Varun Patil 2022-10-29 16:16:13 -07:00
parent 1bea9c5ad1
commit 87973c2d5d
7 changed files with 62 additions and 2 deletions

View File

@ -24,6 +24,7 @@ jobs:
- name: Build vue app
run: |
make dev-setup
make patch-external
make build-js-production
zip -r vue.zip js/

View File

@ -24,6 +24,7 @@ jobs:
- name: Build
run: |
make dev-setup
make patch-external
make build-js-production
./scripts/bundle.sh

View File

@ -26,6 +26,9 @@ build-js:
build-js-production:
rm -f js/* && npm run build
patch-external:
patch -p1 < patches/scroller.patch
watch-js:
npm run watch

2
package-lock.json generated
View File

@ -23,7 +23,7 @@
"vue-material-design-icons": "^5.1.2",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.4",
"vue-virtual-scroller": "^1.1.2",
"vue-virtual-scroller": "1.1.2",
"webdav": "^4.11.0"
},
"devDependencies": {

View File

@ -43,7 +43,7 @@
"vue-material-design-icons": "^5.1.2",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.4",
"vue-virtual-scroller": "^1.1.2",
"vue-virtual-scroller": "1.1.2",
"webdav": "^4.11.0"
},
"browserslist": [

View File

@ -0,0 +1,54 @@
--- ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js 2022-10-29 15:40:12.517184534 -0700
+++ ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js 2022-10-29 15:40:42.814432774 -0700
@@ -99,6 +99,10 @@
type: Boolean,
default: false
},
+ updateInterval: {
+ type: Number,
+ default: 0,
+ },
skipHover: {
type: Boolean,
default: false
@@ -262,7 +266,9 @@
handleScroll(event) {
if (!this.$_scrollDirty) {
this.$_scrollDirty = true;
- requestAnimationFrame(() => {
+ if (this.$_updateTimeout) return
+
+ const requestUpdate = () => requestAnimationFrame(() => {
this.$_scrollDirty = false;
const {
continuous
@@ -272,9 +278,19 @@
// 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)
+ }
}
},
handleVisibilityChange(isVisible, entry) {
@@ -505,7 +521,7 @@
// 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
};

View File

@ -31,6 +31,7 @@
key-field="id"
size-field="size"
type-field="type"
:updateInterval="100"
@update="scrollChange"
@resize="handleResizeWithDelay"
>