perf(virtual-scroll): improve virtual-scroll performance

ionic-team · Dec 5, 2016 · b70d13d · b70d13d
1 parent c377236
commit b70d13d
Show file tree

Hide file tree

Showing 9 changed files with 470 additions and 309 deletions.
diff --git a/src/components/content/content.ts b/src/components/content/content.ts
@@ -500,10 +500,6 @@ export class Content extends Ion implements AfterViewInit, OnDestroy {
     removeArrayItem(this._imgs, img);
   }
 
-  /**
-   * @private
-   */
-
   /**
    * @private
    * DOM WRITE

diff --git a/src/components/img/test/basic/app-module.ts b/src/components/img/test/basic/app-module.ts
@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/virtual-scroll/test/list/app-module.ts b/src/components/virtual-scroll/test/list/app-module.ts
@@ -6,28 +6,47 @@ import { IonicApp, IonicModule } from '../../../..';
   templateUrl: 'main.html'
 })
 export class E2EPage {
-  items: Array<{title: string; id: number}>;
+  items: Array<{id: number, url: string, gif: string}> = [];
+  imgDomain = 'http://localhost:8900';
+  responseDelay = 1500;
+  itemCount = 15;
+  showGifs = false;
 
   constructor() {
-    this.fillList();
+    // take a look at the gulp task: test.imageserver
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', `${this.imgDomain}/reset`, true);
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        this.fillList();
+      }
+    };
+    xhr.send();
   }
 
   fillList() {
-    this.items = [];
-    for (let i = 0; i < 500; i++) {
+    this.items.length = 0;
+    let gifIndex = Math.ceil(Math.random() * gifs.length) - 1;
+
+    for (let i = 0; i < this.itemCount; i++) {
       this.items.push({
-        title: 'Item ' + i,
-        id: i
+        id: i,
+        url: `${this.imgDomain}/?d=${this.responseDelay}&id=${i}`,
+        gif: gifs[gifIndex]
       });
+      gifIndex++;
+      if (gifIndex >= gifs.length) {
+        gifIndex = 0;
+      }
     }
   }
 
   emptyList() {
-    this.items = [];
+    this.items.length = 0;
   }
 
-  itemTapped(ev: any, item: {title: string, date: string}) {
-    console.log(`itemTapped: ${item.title}`);
+  toggleGifs() {
+    this.showGifs = !this.showGifs;
   }
 
   reload() {
@@ -36,6 +55,52 @@ export class E2EPage {
 
 }
 
+const gifs = [
+  'https://media.giphy.com/media/cFdHXXm5GhJsc/giphy.gif',
+  'https://media.giphy.com/media/5JjLO6t0lNvLq/giphy.gif',
+  'https://media.giphy.com/media/ZmdIZ8K4fKEEM/giphy.gif',
+  'https://media.giphy.com/media/lKXEBR8m1jWso/giphy.gif',
+  'https://media.giphy.com/media/PjplWH49v1FS0/giphy.gif',
+  'https://media.giphy.com/media/SyVyFtBTTVb5m/giphy.gif',
+  'https://media.giphy.com/media/LWqQ5glpSMjny/giphy.gif',
+  'https://media.giphy.com/media/l396Dat26yQOdfWgw/giphy.gif',
+  'https://media.giphy.com/media/zetsDd1oSNd96/giphy.gif',
+  'https://media.giphy.com/media/F6PFPjc3K0CPe/giphy.gif',
+  'https://media.giphy.com/media/L0GJP0ZxdnVbW/giphy.gif',
+  'https://media.giphy.com/media/26ufbLWPFHkhwXcpW/giphy.gif',
+  'https://media.giphy.com/media/r3jTnU6iEwpbO/giphy.gif',
+  'https://media.giphy.com/media/6Xbr4pVmJW4wM/giphy.gif',
+  'https://media.giphy.com/media/FPmzkXGFVhp2U/giphy.gif',
+  'https://media.giphy.com/media/p3yU7Rno2PvvW/giphy.gif',
+  'https://media.giphy.com/media/vbBmb51klyyB2/giphy.gif',
+  'https://media.giphy.com/media/ZAfpXz6fGrlYY/giphy.gif',
+  'https://media.giphy.com/media/3oGRFvVyUdGBZeQiAw/giphy.gif',
+  'https://media.giphy.com/media/NJbeypFZCHj2g/giphy.gif',
+  'https://media.giphy.com/media/WpNO2ZXjhJ85y/giphy.gif',
+  'https://media.giphy.com/media/xaw15bdmMEkgg/giphy.gif',
+  'https://media.giphy.com/media/tLwQSHQo6hjTa/giphy.gif',
+  'https://media.giphy.com/media/3dcoLqDDjd9pC/giphy.gif',
+  'https://media.giphy.com/media/QFfs8ubyDkluo/giphy.gif',
+  'https://media.giphy.com/media/10hYVVSPrSpZS0/giphy.gif',
+  'https://media.giphy.com/media/EYJz9cfMa7WAU/giphy.gif',
+  'https://media.giphy.com/media/Q21vzIHyTtmaQ/giphy.gif',
+  'https://media.giphy.com/media/pzmUOeqhzJTck/giphy.gif',
+  'https://media.giphy.com/media/G6kt1Gb4Luxy0/giphy.gif',
+  'https://media.giphy.com/media/13wjHxAz6B6E9i/giphy.gif',
+  'https://media.giphy.com/media/ANbbM3IzH9Tna/giphy.gif',
+  'https://media.giphy.com/media/EQ5I7NF4BDYA/giphy.gif',
+  'https://media.giphy.com/media/L7gHewOS8GOWY/giphy.gif',
+  'https://media.giphy.com/media/nO16UrmQh7khW/giphy.gif',
+  'https://media.giphy.com/media/eGuk6gQM3Q29W/giphy.gif',
+  'https://media.giphy.com/media/8dpPMMlxmDEJO/giphy.gif',
+  'https://media.giphy.com/media/5ox090BjCB8ME/giphy.gif',
+  'https://media.giphy.com/media/Hzm8c1eMSq3CM/giphy.gif',
+  'https://media.giphy.com/media/2APlzZshLu3LO/giphy.gif',
+  'https://media.giphy.com/media/dgygjvNe7jckw/giphy.gif',
+  'https://media.giphy.com/media/5g0mypSSPupO0/giphy.gif',
+  'https://media.giphy.com/media/10JmxORlA6dEFW/giphy.gif',
+];
+
 
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'

diff --git a/src/components/virtual-scroll/test/list/main.html b/src/components/virtual-scroll/test/list/main.html
@@ -15,16 +15,25 @@
   <div padding>
     <button ion-button (click)="fillList()">Fill List</button>
     <button ion-button (click)="emptyList()">Empty List</button>
+    <button ion-button (click)="toggleGifs()">Gifs</button>
+  </div>
+
+  <div padding>
+    <code>gulp test.imageserve</code>
   </div>
 
   <ion-list [virtualScroll]="items">
 
-    <ion-item class="item-text-wrap" *virtualItem="let item" (click)="itemTapped(item)">
+    <ion-item class="item-text-wrap" *virtualItem="let item; let itemBounds = bounds;">
       <ion-thumbnail item-left>
-        <ion-img src="http://loremflickr.com/80/80/dog?{{item.id}}"></ion-img>
+        <ion-img src="{{item.url}}" [bounds]="itemBounds"></ion-img>
       </ion-thumbnail>
 
-      <h2 class="text-wrap">{{item.title}}</h2>
+      <h2 class="text-wrap">{{item.id}}, top: {{itemBounds.top}}, bottom: {{itemBounds.bottom}}, height: {{itemBounds.height}}</h2>
+
+      <!--<ion-thumbnail item-right>
+        <ion-img src="{{item.gif}}" [bounds]="itemBounds"></ion-img>
+      </ion-thumbnail>-->
     </ion-item>
 
   </ion-list>

diff --git a/src/components/virtual-scroll/test/virtual-scroll.spec.ts b/src/components/virtual-scroll/test/virtual-scroll.spec.ts
@@ -289,7 +289,7 @@ describe('VirtualScroll', () => {
                        cells, records, nodes, viewContainer,
                        itmTmp, hdrTmp, ftrTmp, true);
 
-      expect(nodes.length).toBe(6);
+      expect(nodes.length).toBe(3);
 
       expect(nodes[0].cell).toBe(2);
       expect(nodes[1].cell).toBe(3);

diff --git a/src/components/virtual-scroll/virtual-item.ts b/src/components/virtual-scroll/virtual-item.ts
@@ -1,12 +1,13 @@
 import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
+import { VirtualContext } from './virtual-util';
 
 
 /**
  * @private
  */
 @Directive({selector: '[virtualHeader]'})
 export class VirtualHeader {
-  constructor(public templateRef: TemplateRef<Object>) {}
+  constructor(public templateRef: TemplateRef<VirtualContext>) {}
 }
 
 
@@ -15,7 +16,7 @@ export class VirtualHeader {
  */
 @Directive({selector: '[virtualFooter]'})
 export class VirtualFooter {
-  constructor(public templateRef: TemplateRef<Object>) {}
+  constructor(public templateRef: TemplateRef<VirtualContext>) {}
 }
 
 
@@ -24,5 +25,5 @@ export class VirtualFooter {
  */
 @Directive({selector: '[virtualItem]'})
 export class VirtualItem {
-  constructor(public templateRef: TemplateRef<Object>, public viewContainer: ViewContainerRef) {}
+  constructor(public templateRef: TemplateRef<VirtualContext>, public viewContainer: ViewContainerRef) {}
 }
diff --git a/src/components/virtual-scroll/virtual-scroll.scss b/src/components/virtual-scroll/virtual-scroll.scss
@@ -2,6 +2,10 @@
 // Virtual Scroll
 // --------------------------------------------------
 
+.virtual-loading {
+  opacity: 0;
+}
+
 .virtual-scroll {
   position: relative;
 
@@ -20,6 +24,6 @@
   contain: content;
 }
 
-.virtual-scroll .virtual-hidden {
+.virtual-scroll .virtual-last {
   display: none;
 }