javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(virtual-scroll): reduce DOM writes

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-09 17:22:37 +01:00
parent a47d087135
commit 9226684826
7 changed files with 332 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/core/src/components/virtual-scroll/virtual-scroll-utils.tsx
View File

@ -102,7 +102,11 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
}
export function doRender(el: HTMLElement, itemRender: ItemRenderFn, dom: VirtualNode[], updateCellHeight: Function, total: number) {
export function doRender(
el: HTMLElement,
itemRender: ItemRenderFn,
dom: VirtualNode[],
updateCellHeight: Function) {
const children = el.children;
let child: HTMLElement;
for (let i = 0; i < dom.length; i++) {
@ -137,7 +141,6 @@ export function doRender(el: HTMLElement, itemRender: ItemRenderFn, dom: Virtual
updateCellHeight(cell, child);
}
}
el.style.height = total + 'px';
}
export function getViewport(scrollTop: number, vierportHeight: number, margin: number): Viewport {

2
packages/core/src/components/virtual-scroll/virtual-scroll.scss
View File

@ -6,7 +6,7 @@ ion-virtual-scroll {
width: 100%;
contain: content;
contain: strict;
}
.virtual-loading {

13
packages/core/src/components/virtual-scroll/virtual-scroll.tsx
View File

@ -23,6 +23,7 @@ export class VirtualScroll {
private currentScrollTop = 0;
private indexDirty = 0;
private totalHeight = 0;
private heightChanged = false;
@Element() el: HTMLElement;
@ -196,7 +197,11 @@ export class VirtualScroll {
// write DOM
if (this.itemRender) {
doRender(this.el, this.itemRender, this.virtualDom, this.updateCellHeight.bind(this), this.totalHeight);
doRender(this.el, this.itemRender, this.virtualDom, this.updateCellHeight.bind(this));
if (this.heightChanged) {
this.el.style.height = this.totalHeight + 'px';
this.heightChanged = false;
}
} else if (this.domRender) {
this.domRender(this.virtualDom, this.totalHeight);
}
@ -273,7 +278,11 @@ export class VirtualScroll {
private calcHeightIndex(index = 0) {
this.heightIndex = resizeBuffer(this.heightIndex, this.cells.length);
this.totalHeight = calcHeightIndex(this.heightIndex, this.cells, index);
const totalHeight = calcHeightIndex(this.heightIndex, this.cells, index);
if (totalHeight !== this.totalHeight) {
this.totalHeight = totalHeight;
this.heightChanged = true;
}
this.indexDirty = Infinity;
}