perf(virtual-list): relaxed restrictions for fast path

Author: manucorporat

src/components/virtual-scroll/test/basic/app.module.ts

@@ -11,19 +11,7 @@ export class E2EPage {
   webview: string = '';
   counter: number = 0;
 
-  constructor(plt: Platform, public navCtrl: NavController) {
-    if (plt.is('ios')) {
-      if (plt.testUserAgent('Safari')) {
-        this.webview = ': iOS Safari';
-
-      } else if (!!(window as any)['webkit']) {
-        this.webview = ': iOS WKWebView';
-
-      } else {
-        this.webview = ': iOS UIWebView';
-      }
-    }
-  }
+  constructor(plt: Platform, public navCtrl: NavController) {}
 
   addItems() {
     if (this.items.length === 0) {
@@ -54,8 +42,20 @@ export class E2EPage {
     this.counter++;
   }
 
-  reload() {
-    window.location.reload(true);
+  addRandomItem() {
+    const index = Math.floor(Math.random() * this.items.length);
+    this.items.splice( index, 0, {
+      value: Math.floor(Math.random() * 10000),
+      someMethod: function() {
+        return '!!';
+      }
+    }
+    );
+  }
+
+  changeItem() {
+    const index = Math.floor(Math.random() * this.items.length);
+    this.items[index].value = Math.floor(Math.random() * 10000);
   }
 
   trackByFn(index: number, item: any) {

src/components/virtual-scroll/test/basic/main.html

@@ -1,12 +1,14 @@
 <ion-header>
   <ion-navbar>
-    <ion-title>Virtual Scroll{{webview}}</ion-title>
     <ion-buttons end>
-      <button ion-button (click)="reload()">
-        Reload
+      <button ion-button icon-only (click)="changeItem()">
+        Change random
+      </button>
+      <button ion-button icon-only (click)="addRandomItem()">
+        Add random
       </button>
       <button ion-button icon-only (click)="addItem()">
-        <ion-icon name="add"></ion-icon>
+        Append
       </button>
     </ion-buttons>
   </ion-navbar>

src/components/virtual-scroll/virtual-scroll.ts

@@ -379,7 +379,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     return this._virtualTrackBy;
   }
 
-
   constructor(
     private _iterableDiffers: IterableDiffers,
     private _elementRef: ElementRef,
@@ -412,6 +411,28 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     });
   }
 
+  /**
+   * @hidden
+   */
+  firstRecord(): number {
+    const cells = this._cells;
+    if (cells.length > 0) {
+      return cells[0].record;
+    }
+    return 0;
+  }
+
+  /**
+   * @hidden
+   */
+  lastRecord(): number {
+    const cells = this._cells;
+    if (cells.length > 0) {
+      return cells[cells.length - 1].record;
+    }
+    return 0;
+  }
+
   /**
    * @hidden
    */
@@ -429,8 +450,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
 
     let needClean = false;
     if (changes) {
+      var lastRecord = this.lastRecord() + 1;
       changes.forEachOperation((item, _, cindex) => {
-        if (item.previousIndex != null || (cindex < this._recordSize)) {
+        if (item.previousIndex != null || (cindex < lastRecord)) {
           needClean = true;
         }
       });
@@ -443,10 +465,13 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     this.writeUpdate(needClean);
   }
 
+  /**
+   * @hidden
+   */
   readUpdate(needClean: boolean) {
     if (needClean) {
       // reset everything
-      console.debug(`virtual-scroll, readUpdate: slow path`);
+      console.debug('virtual-scroll, readUpdate: slow path');
       this._cells.length = 0;
       this._nodes.length = 0;
       this._itmTmp.viewContainer.clear();
@@ -458,8 +483,11 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     }
   }
 
+  /**
+   * @hidden
+   */
   writeUpdate(needClean: boolean) {
-    console.debug(`virtual-scroll, writeUpdate`);
+    console.debug('virtual-scroll, writeUpdate need clean:', needClean);
     const data = this._data;
     const stopAtHeight = (data.scrollTop + data.renderHeight);
     data.scrollDiff = SCROLL_DIFFERENCE_MINIMUM + 1;
@@ -475,6 +503,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     this.renderVirtual(needClean);
   }
 
+  /**
+   * @hidden
+   */
   private calcDimensions() {
     calcDimensions(this._data, this._elementRef.nativeElement,
       this.approxItemWidth, this.approxItemHeight,
@@ -571,7 +602,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   }
 
   /**
-   * @private
+   * @hidden
    */
   resize() {
     // only continue if we've already initialized
@@ -605,7 +636,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   }
 
   /**
-   * @private
+   * @hidden
    */
   private _stepChangeDetection() {
     // we need to do some change detection in this frame
@@ -624,7 +655,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   }
 
   /**
-   * @private
+   * @hidden
    */
   private _stepNoChanges() {
     const data = this._data;
@@ -675,7 +706,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   }
 
   /**
-   * @private
+   * @hidden
    */
   scrollUpdate(ev: ScrollEvent) {
     // set the scroll top from the scroll event
@@ -718,6 +749,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   }
 
   /**
+   * @hidden
    * NO DOM
    */
   private _listeners() {
@@ -738,6 +770,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
   }
 
   /**
+   * @hidden
    * DOM WRITE
    */
   private _setHeight(newVirtualHeight: number) {
@@ -762,6 +795,9 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
     }
   }
 
+  /**
+   * @hidden
+   */
   setElementClass(className: string, add: boolean) {
     this._renderer.setElementClass(this._elementRef.nativeElement, className, add);
   }