From 9eae4d07c1e82cadc5cf2c6c057c795d3e2a28f9 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 15 Jan 2020 15:17:05 +0200 Subject: [PATCH 1/7] add custom solution for virtual scrolling to ease ram and cpu use when scrolling for a long time --- src/components/conversation/conversation.js | 15 ++++++-- src/components/conversation/conversation.vue | 4 +- src/components/status/status.js | 5 ++- src/components/timeline/timeline.js | 39 +++++++++++++++++++- src/components/timeline/timeline.vue | 3 +- 5 files changed, 57 insertions(+), 9 deletions(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 08283fff8..ad92a8397 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -35,7 +35,8 @@ const conversation = { data () { return { highlight: null, - expanded: false + expanded: false, + height: '115px' } }, props: [ @@ -44,7 +45,8 @@ const conversation = { 'isPage', 'pinnedStatusIdsObject', 'inProfile', - 'profileUserId' + 'profileUserId', + 'hidden' ], created () { if (this.isPage) { @@ -102,6 +104,9 @@ const conversation = { }, isExpanded () { return this.expanded || this.isPage + }, + hiderStyle () { + return this.hidden ? { height: this.height } : {} } }, components: { @@ -112,7 +117,7 @@ const conversation = { const newConversationId = this.getConversationId(newVal) const oldConversationId = this.getConversationId(oldVal) if (newConversationId && oldConversationId && newConversationId === oldConversationId) { - this.setHighlight(this.originalStatusId) + this.setHighheightlight(this.originalStatusId) } else { this.fetchConversation() } @@ -121,6 +126,10 @@ const conversation = { if (value) { this.fetchConversation() } + }, + hidden (value) { + this.height = `${this.$el.clientHeight}px` + console.log('Element height:', this.height) } }, methods: { diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 2e48240aa..ed06a32b7 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,10 +1,11 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index 75d66b9ff..614c867cc 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -375,6 +375,7 @@ "false": "no", "true": "yes" }, + "virtual_scrolling": "Optimize timeline rendering", "fun": "Fun", "greentext": "Meme arrows", "notifications": "Notifications", diff --git a/src/i18n/fi.json b/src/i18n/fi.json index e7ed5408f..563ff2b17 100644 --- a/src/i18n/fi.json +++ b/src/i18n/fi.json @@ -228,7 +228,8 @@ "values": { "false": "pois päältä", "true": "päällä" - } + }, + "virtual_scrolling": "Optimoi aikajanan suorituskykyä" }, "time": { "day": "{0} päivä", diff --git a/src/modules/config.js b/src/modules/config.js index de9f041b0..2a91800fd 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -49,7 +49,8 @@ export const defaultState = { useContainFit: false, greentext: undefined, // instance default hidePostStats: undefined, // instance default - hideUserStats: undefined // instance default + hideUserStats: undefined, // instance default + virtualScrolling: undefined // instance default } // caching the instance default properties diff --git a/src/modules/instance.js b/src/modules/instance.js index 625323b97..d8560d941 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -34,6 +34,7 @@ const defaultState = { showFeaturesPanel: true, minimalScopesMode: false, greentext: false, + virtualScrolling: true, // Nasty stuff pleromaBackend: true, From 2a9356209b80d21fd35edcb1600dece1d30d744c Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 15 Jan 2020 18:08:37 +0200 Subject: [PATCH 4/7] fix minor bugs --- src/components/timeline/timeline.js | 43 +++++++++++++++++++++-------- 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 0af09f2b0..d93fd8c31 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -33,7 +33,7 @@ const Timeline = { paused: false, unfocused: false, bottomedOut: false, - vScrollIndex: 0 + virtualScrollIndex: 0 } }, computed: { @@ -72,8 +72,9 @@ const Timeline = { }, statusesToDisplay () { const amount = this.timeline.visibleStatuses.length - const min = Math.max(0, this.vScrollIndex - 20) - const max = Math.min(amount, this.vScrollIndex + 20) + const statusesPerSide = Math.ceil(Math.max(10, window.innerHeight / 100)) + const min = Math.max(0, this.virtualScrollIndex - statusesPerSide) + const max = Math.min(amount, this.virtualScrollIndex + statusesPerSide) return this.timeline.visibleStatuses.slice(min, max).map(_ => _.id) }, virtualScrollingEnabled () { @@ -89,7 +90,7 @@ const Timeline = { const credentials = store.state.users.currentUser.credentials const showImmediately = this.timeline.visibleStatuses.length === 0 - window.addEventListener('scroll', throttle(this.scrollLoad, 100)) + window.addEventListener('scroll', this.handleScroll) if (store.state.api.fetchers[this.timelineName]) { return false } @@ -110,7 +111,7 @@ const Timeline = { window.addEventListener('keydown', this.handleShortKey) }, destroyed () { - window.removeEventListener('scroll', this.scrollLoad) + window.removeEventListener('scroll', this.handleScroll) window.removeEventListener('keydown', this.handleShortKey) if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false) this.$store.commit('setLoading', { timeline: this.timelineName, value: false }) @@ -153,34 +154,48 @@ const Timeline = { }) }, 1000, this), determineVisibleStatuses () { + if (!this.$refs.timeline) return + const statuses = this.$refs.timeline.children + if (statuses.length === 0) return + const bodyBRect = document.body.getBoundingClientRect() const height = Math.max(bodyBRect.height, -(bodyBRect.y)) const centerOfScreen = window.pageYOffset + (window.innerHeight * 0.5) - // Approximate which status is in the middle of the screen and check how - // far it is roughly from the viewport + // Start from approximating the index of some visible status by using the + // the center of the screen on the timeline. let approxIndex = Math.floor(statuses.length * (centerOfScreen / height)) let err = statuses[approxIndex].getBoundingClientRect().y + // if we have a previous scroll index that can be used, test if it's + // closer than the previous approximation, use it if so + if ( + this.virtualScrollIndex < statuses.length && + Math.abs(err) > statuses[this.virtualScrollIndex].getBoundingClientRect().y + ) { + approxIndex = this.virtualScrollIndex + err = statuses[approxIndex].getBoundingClientRect().y + } + // if the status is too far from viewport, check the next/previous ones if // they happen to be better - while (err < -100) { + while (err < -100 && approxIndex < statuses.length - 1) { approxIndex++ err = statuses[approxIndex].getBoundingClientRect().y } - while (err > 1000) { + while (err > window.innerHeight + 100 && approxIndex > 0) { approxIndex-- err = statuses[approxIndex].getBoundingClientRect().y } - // this status is now the center point for virtual scrolling - this.vScrollIndex = approxIndex + // this status is now the center point for virtual scrolling and visible + // statuses will be nearby statuses before and after it + this.virtualScrollIndex = approxIndex }, scrollLoad (e) { - this.determineVisibleStatuses() const bodyBRect = document.body.getBoundingClientRect() const height = Math.max(bodyBRect.height, -(bodyBRect.y)) if (this.timeline.loading === false && @@ -190,6 +205,10 @@ const Timeline = { this.fetchOlderStatuses() } }, + handleScroll: throttle(function (e) { + this.determineVisibleStatuses() + this.scrollLoad(e) + }, 100), handleVisibilityChange () { this.unfocused = document.hidden } From ac8df82bb73d66794102dd59a9206fcf842592a5 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 15 Jan 2020 18:41:38 +0200 Subject: [PATCH 5/7] fix warnings and console errors --- src/components/conversation/conversation.vue | 2 +- src/components/settings/settings.vue | 4 ++-- src/components/still-image/still-image.js | 10 ++++++---- src/components/timeline/timeline.vue | 7 +++++-- 4 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 2fe5fb02d..e74b9ccf6 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -29,7 +29,7 @@ :replies="getReplies(status.id)" :in-profile="inProfile" :profile-user-id="profileUserId" - :virtualHidden="virtualHidden" + :virtual-hidden="virtualHidden" class="status-fadein panel-body" @goto="setHighlight" @toggleExpanded="toggleExpanded" diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index a17ef0d91..34d20e42f 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -76,9 +76,9 @@
  • {{ $t('settings.useStreamingApi') }} -
    +
    - {{ $t('settings.useStreamingApiWarning') }} + {{ $t('settings.useStreamingApiWarning') }}
    • diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js index e48fef47f..cc9880801 100644 --- a/src/components/still-image/still-image.js +++ b/src/components/still-image/still-image.js @@ -18,14 +18,16 @@ const StillImage = { }, methods: { onLoad () { - this.imageLoadHandler && this.imageLoadHandler(this.$refs.src) + const image = this.$refs.src + if (!image) return + this.imageLoadHandler && this.imageLoadHandler(image) const canvas = this.$refs.canvas if (!canvas) return - const width = this.$refs.src.naturalWidth - const height = this.$refs.src.naturalHeight + const width = image.naturalWidth + const height = image.naturalHeight canvas.width = width canvas.height = height - canvas.getContext('2d').drawImage(this.$refs.src, 0, 0, width, height) + canvas.getContext('2d').drawImage(image, 0, 0, width, height) }, onError () { this.imageLoadError && this.imageLoadError() diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index d75fb27c0..ef3bb4c86 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -34,7 +34,10 @@
    -
    +
    From bbd964753ee807d5f0af93ab2d0726dda25d8d79 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 15 Jan 2020 18:47:14 +0200 Subject: [PATCH 6/7] fix data property being called the wrong name in conversation --- src/components/conversation/conversation.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 15c82de9a..9ef8acfc9 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -36,7 +36,8 @@ const conversation = { return { highlight: null, expanded: false, - height: '115px' + // Approximate minimum height of a status, gets overwritten with real one + virtualHeight: '120px' } }, props: [ From f73e107a766207953dbfdd89fdc3c052ed253f48 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 15 Jan 2020 19:21:11 +0200 Subject: [PATCH 7/7] whoops --- src/components/conversation/conversation.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 9ef8acfc9..ff99300a6 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -118,7 +118,7 @@ const conversation = { const newConversationId = this.getConversationId(newVal) const oldConversationId = this.getConversationId(oldVal) if (newConversationId && oldConversationId && newConversationId === oldConversationId) { - this.setHighheightlight(this.originalStatusId) + this.setHighlight(this.originalStatusId) } else { this.fetchConversation() }