Improve scroller performance
parent
21276219a1
commit
0fbd076a52
|
@ -24,6 +24,7 @@ jobs:
|
||||||
- name: Build vue app
|
- name: Build vue app
|
||||||
run: |
|
run: |
|
||||||
make dev-setup
|
make dev-setup
|
||||||
|
make patch-external
|
||||||
make build-js-production
|
make build-js-production
|
||||||
zip -r vue.zip js/
|
zip -r vue.zip js/
|
||||||
|
|
||||||
|
@ -40,8 +41,8 @@ jobs:
|
||||||
# do not stop on another job's failure
|
# do not stop on another job's failure
|
||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
php-versions: ['7.4']
|
php-versions: ["7.4"]
|
||||||
server-versions: ['stable25']
|
server-versions: ["stable25"]
|
||||||
|
|
||||||
services:
|
services:
|
||||||
mysql:
|
mysql:
|
||||||
|
@ -100,7 +101,6 @@ jobs:
|
||||||
name: report-mysql-${{ matrix.php-versions }}-${{ matrix.server-versions }}
|
name: report-mysql-${{ matrix.php-versions }}-${{ matrix.server-versions }}
|
||||||
path: apps/${{ env.APP_NAME }}/playwright-report
|
path: apps/${{ env.APP_NAME }}/playwright-report
|
||||||
|
|
||||||
|
|
||||||
pgsql:
|
pgsql:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
needs: vue
|
needs: vue
|
||||||
|
@ -109,8 +109,8 @@ jobs:
|
||||||
# do not stop on another job's failure
|
# do not stop on another job's failure
|
||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
php-versions: ['7.4']
|
php-versions: ["7.4"]
|
||||||
server-versions: ['stable25']
|
server-versions: ["stable25"]
|
||||||
|
|
||||||
services:
|
services:
|
||||||
postgres:
|
postgres:
|
||||||
|
@ -181,8 +181,8 @@ jobs:
|
||||||
# do not stop on another job's failure
|
# do not stop on another job's failure
|
||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
php-versions: ['7.4']
|
php-versions: ["7.4"]
|
||||||
server-versions: ['stable25']
|
server-versions: ["stable25"]
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: Checkout server
|
- name: Checkout server
|
||||||
|
@ -231,4 +231,3 @@ jobs:
|
||||||
with:
|
with:
|
||||||
name: report-sqlite-${{ matrix.php-versions }}-${{ matrix.server-versions }}
|
name: report-sqlite-${{ matrix.php-versions }}-${{ matrix.server-versions }}
|
||||||
path: apps/${{ env.APP_NAME }}/playwright-report
|
path: apps/${{ env.APP_NAME }}/playwright-report
|
||||||
|
|
||||||
|
|
|
@ -24,6 +24,7 @@ jobs:
|
||||||
- name: Build
|
- name: Build
|
||||||
run: |
|
run: |
|
||||||
make dev-setup
|
make dev-setup
|
||||||
|
make patch-external
|
||||||
make build-js-production
|
make build-js-production
|
||||||
./scripts/bundle.sh
|
./scripts/bundle.sh
|
||||||
|
|
||||||
|
|
3
Makefile
3
Makefile
|
@ -26,6 +26,9 @@ build-js:
|
||||||
build-js-production:
|
build-js-production:
|
||||||
rm -f js/* && npm run build
|
rm -f js/* && npm run build
|
||||||
|
|
||||||
|
patch-external:
|
||||||
|
patch -p1 < patches/scroller.patch
|
||||||
|
|
||||||
watch-js:
|
watch-js:
|
||||||
npm run watch
|
npm run watch
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
"vue-material-design-icons": "^5.1.2",
|
"vue-material-design-icons": "^5.1.2",
|
||||||
"vue-property-decorator": "^9.1.2",
|
"vue-property-decorator": "^9.1.2",
|
||||||
"vue-router": "^3.5.4",
|
"vue-router": "^3.5.4",
|
||||||
"vue-virtual-scroller": "^1.1.2",
|
"vue-virtual-scroller": "1.1.2",
|
||||||
"webdav": "^4.11.0"
|
"webdav": "^4.11.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
"vue-material-design-icons": "^5.1.2",
|
"vue-material-design-icons": "^5.1.2",
|
||||||
"vue-property-decorator": "^9.1.2",
|
"vue-property-decorator": "^9.1.2",
|
||||||
"vue-router": "^3.5.4",
|
"vue-router": "^3.5.4",
|
||||||
"vue-virtual-scroller": "^1.1.2",
|
"vue-virtual-scroller": "1.1.2",
|
||||||
"webdav": "^4.11.0"
|
"webdav": "^4.11.0"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
|
|
|
@ -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
|
||||||
|
};
|
|
@ -83,9 +83,11 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||||
/** Scrolling recycler timer */
|
/** Scrolling recycler timer */
|
||||||
private scrollingRecyclerTimer = null as number | null;
|
private scrollingRecyclerTimer = null as number | null;
|
||||||
/** View size reflow timer */
|
/** View size reflow timer */
|
||||||
private reflowRequest = false;
|
private reflowRequest!: boolean;
|
||||||
/** Tick adjust timer */
|
/** Tick adjust timer */
|
||||||
private adjustRequest = false;
|
private adjustRequest!: boolean;
|
||||||
|
/** Recycler scrolling throttle */
|
||||||
|
private recyclerScrollDirty!: boolean;
|
||||||
|
|
||||||
/** Get the visible ticks */
|
/** Get the visible ticks */
|
||||||
get visibleTicks() {
|
get visibleTicks() {
|
||||||
|
@ -115,6 +117,17 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||||
|
|
||||||
/** Recycler scroll event, must be called by timeline */
|
/** Recycler scroll event, must be called by timeline */
|
||||||
public recyclerScrolled() {
|
public recyclerScrolled() {
|
||||||
|
if (!this.recyclerScrollDirty) {
|
||||||
|
this.recyclerScrollDirty = true;
|
||||||
|
window.setTimeout(() => {
|
||||||
|
this.recyclerScrollDirty = false;
|
||||||
|
requestAnimationFrame(this.updateFromRecyclerScroll);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Update cursor position from recycler scroll position */
|
||||||
|
public updateFromRecyclerScroll() {
|
||||||
// Ignore if not initialized
|
// Ignore if not initialized
|
||||||
if (!this.ticks.length) return;
|
if (!this.ticks.length) return;
|
||||||
|
|
||||||
|
@ -556,6 +569,7 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
min-height: 1.5px;
|
min-height: 1.5px;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
|
transition: transform 0.1s linear;
|
||||||
|
|
||||||
&.st {
|
&.st {
|
||||||
font-size: 0.75em;
|
font-size: 0.75em;
|
||||||
|
@ -579,8 +593,11 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover > .cursor.st {
|
&:hover > .cursor {
|
||||||
|
transition: none;
|
||||||
|
&.st {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -26,11 +26,12 @@
|
||||||
:class="{ empty: list.length === 0 }"
|
:class="{ empty: list.length === 0 }"
|
||||||
:items="list"
|
:items="list"
|
||||||
:emit-update="true"
|
:emit-update="true"
|
||||||
:buffer="400"
|
:buffer="800"
|
||||||
:skipHover="true"
|
:skipHover="true"
|
||||||
key-field="id"
|
key-field="id"
|
||||||
size-field="size"
|
size-field="size"
|
||||||
type-field="type"
|
type-field="type"
|
||||||
|
:updateInterval="100"
|
||||||
@update="scrollChange"
|
@update="scrollChange"
|
||||||
@resize="handleResizeWithDelay"
|
@resize="handleResizeWithDelay"
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue