Merge pull request #4057 from NativeScript/perf-test-pages

Perf test pages

apps/app/ui-tests-app/mainPage.ts

@@ -38,6 +38,8 @@ export function pageLoaded(args: EventData) {
     examples.set("issues", "issues/main-page");
     examples.set("page", "page/main-page");
 
+    examples.set("perf", "perf/main-page");
+
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");
 

apps/app/ui-tests-app/perf/main-page.ts

@@ -0,0 +1,24 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { MainPageViewModel } from "../mainPage";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { Page } from "tns-core-modules/ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("properties", "perf/properties/main-page");
+    examples.set("memory-leaks", "perf/memory-leaks/main-page");
+
+    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMainPageViewModel extends MainPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/perf/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/perf/memory-leaks/background-image.css

@@ -0,0 +1,15 @@
+/*.bg-main-page{
+    background-image: url('~/ui-tests-app/image-view/gravatar.png');
+}*/
+
+/*.image {
+width:100;
+height:100;
+ background-image: url('~/ui-tests-app/image-view/gravatar.png');
+clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
+}*/
+
+
+.info {
+    font-size: 20;
+}

apps/app/ui-tests-app/perf/memory-leaks/background-image.ts

@@ -0,0 +1,46 @@
+import * as frame from "tns-core-modules/ui/frame";
+import { EventData } from "tns-core-modules/data/observable";
+import { Page } from "tns-core-modules/ui/page";
+import { Label } from "tns-core-modules/ui/label";
+import * as application from "tns-core-modules/application";
+
+var indexCounter = 0;
+var navCounter = 0;
+var images = ["gravatar", "gravatar2", "red"];
+
+export function onLoad(args: EventData) {
+    let index = indexCounter++ % 3;
+    let page = <Page>args.object;
+    page.backgroundImage = '~/ui-tests-app/image-view/' + images[index] + '.png';
+    setLabelText(page, navCounter, "countInfo");
+    getMemoryUsage(args);
+}
+
+export function navigate(args: EventData) {
+    navCounter++;
+    frame.topmost().navigate("ui-tests-app/perf/memory-leaks/background-image");
+}
+
+export function navigateBack(args: EventData) {
+    navCounter--;
+    frame.topmost().goBack();
+}
+
+function setLabelText(page: Page, text: number, id: string) {
+    let label = <Label>page.getViewById(id);
+    label.text = text + '';
+}
+
+function getMemoryUsage(args: EventData) {
+    var mi = new android.app.ActivityManager.MemoryInfo();
+    var activityManager = application.android.context.getSystemService(android.content.Context.ACTIVITY_SERVICE);
+    activityManager.getMemoryInfo(mi);
+    let usedMemory = mi.totalMem - mi.availMem;
+    
+    setLabelText(<Page>args.object, usedMemory, "usedMemory");
+
+    console.log("availMem in bytes: " + mi.availMem);
+    console.log("Percentage usage: " + (mi.availMem / mi.totalMem));
+    console.log("Available memory (megabytes): " + mi.availMem);
+    console.log("Used memory (megabytes): " + usedMemory);
+}

apps/app/ui-tests-app/perf/memory-leaks/background-image.xml

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page navigatingTo="onLoad" class="bg-main-page">
+  <Page.actionBar>
+    <ActionBar title="">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="back" tap="navigateBack"/>
+        <ActionItem text="forward" tap="navigate"/>
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <GridLayout rows="*, *, *" columns="*, *" class="info">
+    <!--<Image class="image" />-->
+    <Button tap="getMemoryUsage" text="Get memory info" height="60" colSpan="2"/>
+    <Label text="navigation counter" row="1" />
+    <Label text="navigation counter" id="countInfo" row="1" col="1" />
+    <Label text="used memory" row="2" />
+    <Label text="" id="usedMemory" row="2" col="1" />
+  </GridLayout>
+</Page>

apps/app/ui-tests-app/perf/memory-leaks/main-page.ts

@@ -0,0 +1,23 @@
+import { EventData } from "tns-core-modules/data/observable";
+import { MainPageViewModel } from "../../mainPage";
+import { WrapLayout } from "tns-core-modules/ui/layouts/wrap-layout";
+import { Page } from "tns-core-modules/ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+    examples.set("background-image", "perf/memory-leaks/background-image");
+
+    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMainPageViewModel extends MainPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}

apps/app/ui-tests-app/perf/memory-leaks/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>

apps/app/ui-tests-app/perf/properties/main-page.ts

@@ -0,0 +1,76 @@
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { TextView } from "tns-core-modules/ui/text-view";
+import { Button } from "tns-core-modules/ui/button";
+
+import * as tests from "./tests";
+
+const c = [10, 100, 1000, 10000, 100000];
+
+function getStack(stack: StackLayout): StackLayout {
+    let p = new StackLayout();
+    stack.removeChildren();
+    stack.addChild(p);
+    return p;
+}
+
+let runner;
+
+export function onNavigatingFrom() {
+    clearInterval(runner);
+}
+
+export function onTap3(args) {
+    let btn = <Button>args.object;
+    const p = btn.page.getViewById<StackLayout>("placeholder");
+    btn.text = "Start tests...";
+
+    let result = btn.page.getViewById<TextView>("result");
+
+    result.text = "";
+
+    function track(line: string) {
+        console.log(line);
+        result.fontSize = 10;
+        result.text += line + "\n";
+    }
+
+    let text = "Count";
+    c.forEach(e => {
+        text += `\t${e}`;
+    });
+    track(text);
+
+    let tasks = [
+        () => track(tests.setBackgroundColor(c)),
+        () => track(tests.setBackgroundColor(c, getStack(p))),
+        () => track(tests.setBindingContext(c)),
+        () => track(tests.setBindingContext(c, getStack(p))),
+        () => track(tests.setBindingContextWithParents(c, getStack(p))),
+        () => track(tests.setBindingContextWithParentsBound(c, getStack(p))),
+        () => track(tests.setBorderWidths(c)),
+        () => track(tests.setBorderWidths(c, getStack(p))),
+        () => track(tests.setFontSize(c)),
+        () => track(tests.setFontSize(c, getStack(p))),
+        () => track(tests.setFontSizeWithParents(c, getStack(p))),
+        () => track(tests.setFontWeight(c)),
+        () => track(tests.setFontWeight(c, getStack(p))),
+        () => track(tests.setFontWeightWithParents(c, getStack(p))),
+        () => track(tests.setColor(c)),
+        () => track(tests.setColor(c, getStack(p))),
+        () => track(tests.setColorWithParents(c, getStack(p))),
+        () => track(tests.setText(c)),
+        () => track(tests.setText(c, getStack(p))),
+        () => track(tests.addRemove(c, getStack(p))),
+        () => track("Complete!")
+    ];
+    let i = 0;
+    runner = setInterval(nextTask, 1);
+    function nextTask() {
+        if (i < tasks.length) {
+            tasks[i]();
+            i++;
+        } else {
+            clearInterval(runner);
+        }
+    }
+}

apps/app/ui-tests-app/perf/properties/main-page.xml

@@ -0,0 +1,7 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingFrom="onNavigatingFrom">
+    <GridLayout rows="30,100,*">
+        <Button text="Start test..." tap="onTap3" style="font-size:8" />
+        <StackLayout id="placeholder" row="1"/>
+        <TextView id="result" row="2" />
+    </GridLayout>
+</Page>

apps/app/ui-tests-app/perf/properties/tests.ts

@@ -0,0 +1,305 @@
+import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
+import { StackLayout } from "tns-core-modules/ui/layouts/stack-layout";
+import { Label } from "tns-core-modules/ui/label";
+
+const average = 3;
+
+const colors = ['red', 'green'];
+
+export function addRemove(counts: Array<number>, parent: LayoutBase): string {
+    let result = `addRemove`;
+    counts.forEach((count) => {
+        if (count > 10000) {
+            return;
+        }
+
+        const lbl = new Label();
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                parent.addChild(lbl);
+                parent.removeChild(lbl);
+            }
+        });
+
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setText(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setText ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                lbl.text = colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setBackgroundColor(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setBackgroundColor ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        if (parent && count > 10000) {
+            return;
+        }
+
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.backgroundColor = <any>colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+const borders = [1, 2, 3];
+export function setBorderWidths(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setBorderWidths ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        if (count > 10000 && parent) {
+            return;
+        }
+
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.borderLeftWidth = borders[i % 3];
+                style.borderTopWidth = borders[i % 3];
+                style.borderRightWidth = borders[i % 3];
+                style.borderBottomWidth = borders[i % 3];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setColor(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setColor ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.color = <any>colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setColorWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setColorWithParents`;
+    const style = parent.style;
+    counts.forEach((count) => {
+        if (count > 10000) {
+            return;
+        }
+
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.color = <any>colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+const fontSizes = [10, 20];
+export function setFontSize(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setFontSize ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontSize = fontSizes[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setFontSizeWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setFontSizeWithParents`;
+    const style = parent.style;
+    counts.forEach((count) => {
+        if (count > 1000) {
+            return;
+        }
+
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontSize = fontSizes[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setFontWeight(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setFontWeight ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const style = lbl.style;
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontWeight = i % 2 === 0 ? 'bold' : 'normal';
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setFontWeightWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setFontWeightWithParents`;
+    const style = parent.style;
+    counts.forEach((count) => {
+        if (count > 1000) {
+            return;
+        }
+
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                style.fontWeight = i % 2 === 0 ? 'bold' : 'normal'
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setBindingContext(counts: Array<number>, parent?: LayoutBase): string {
+    let result = `setBindingContext ${parent ? 'with nativeView' : ''}`;
+    counts.forEach((count) => {
+        const lbl = setup(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                lbl.bindingContext = colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setBindingContextWithParents(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setBindingContextWithParents`;
+    counts.forEach((count) => {
+        if (count > 10000) {
+            return;
+        }
+        setupParents(parent);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                parent.bindingContext = colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+export function setBindingContextWithParentsBound(counts: Array<number>, parent: LayoutBase): string {
+    let result = `setBindingContextWithParentsBound`;
+    counts.forEach((count) => {
+        if (count > 1000) {
+            return;
+        }
+
+        setupParents(parent, true);
+        const time = executeTest(() => {
+            for (let i = 0; i < count; i++) {
+                parent.bindingContext = colors[i % 2];
+            }
+        });
+        result += setResultTime(time);
+    });
+
+    return result;
+}
+
+function setupParents(parent: LayoutBase, bindToContext: boolean = false): void {
+    for (let i = 0; i < 3; i++) {
+        let stack = new StackLayout();
+        parent.addChild(stack)
+        for (let j = 0; j < 3; j++) {
+            let innerStack = new StackLayout();
+            stack.addChild(innerStack);
+            for (let k = 0; k < 3; k++) {
+                const lbl = new Label();
+                if (bindToContext) {
+                    lbl.bind({ sourceProperty: "$value", targetProperty: "text" });
+                }
+
+                innerStack.addChild(lbl);
+            }
+        }
+    }
+}
+
+function setup(parent?: LayoutBase): Label {
+    let lbl = new Label();
+    if (parent) {
+        parent.addChild(lbl);
+    } else {
+        (<any>lbl)._ios = (<any>lbl).nativeView = undefined;
+    }
+
+    return lbl;
+}
+
+function time(): number {
+    if (global.android) {
+        return (<any>global).java.lang.System.nanoTime() / 1000000;
+    } else {
+        return (<any>global).CACurrentMediaTime() * 1000;
+    }
+}
+
+function executeTest(func: Function): string {
+    let total = 0;
+    for (let i = 0; i < average; i++) {
+        const start = time();
+        func();
+        const end = time();
+        const duration = end - start;
+        total += duration;
+    }
+
+    const avg = total / average;
+    const res = `${avg.toFixed(2)}`;
+    return res;
+}
+
+function setResultTime(time: string) {
+    return ' ' + `\t${time}` + ' ';
+}