Style perf improvements (#2342)

* Add css-perf app.

* Style properties now check only properties that are set.
Image utils module required on top (instead of in onMeasure) to improve performance.
Remove try/catch block when Style applies native property.

* fix tslint

* Fix broken merge
Update package.json version

* Failed miserably - if the try/catch around applyProperty method is removed - TextField fails big time.
TextField needs some good refactoring as well as calls to _updateTextDecoration & _updateTextTransform
utils - setTextTransform & setTextDecoration should be split, typing support should be added.
This commit is contained in:
Hristo Hristov
2016-07-08 14:39:43 +03:00
committed by GitHub
parent 81dc102031
commit 8d40782191
21 changed files with 611 additions and 99 deletions

12
apps/css-perf-test/app.ts Normal file
View File

@@ -0,0 +1,12 @@
import application = require("application");
global.time = function(): number {
if (global.android) {
return java.lang.System.nanoTime() / 1000000; // 1 ms = 1000000 ns
}
else {
return CACurrentMediaTime() * 1000;
}
}
application.start({ moduleName: "css-perf-test/root" });

View File

@@ -0,0 +1,29 @@
.title {
font-size: 20;
margin: 3;
}
.author {
font-size: 14;
horizontal-align: left;
vertical-align: bottom;
margin: 3;
}
.comments {
color: #10C2B0;
font-size: 14;
vertical-align: bottom;
margin: 3;
}
.thumbnail {
width: 72;
height: 72;
margin: 3;
vertical-align: top;
}
TabView {
background-color: white;
}

View File

@@ -0,0 +1,7 @@
import {EventData as ObservableEventData} from "data/observable";
export function navigatedTo(args: ObservableEventData) {
setTimeout(() => {
console.log(`Time: ${global.time() - global.startTime} ms`);
});
}

View File

@@ -0,0 +1,307 @@
<Page
xmlns="http://schemas.nativescript.org/tns.xsd" navigatedTo="navigatedTo">
<ScrollView>
<StackLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
<GridLayout columns="auto, *, auto" rows="auto, 25">
<Image src="~/css-perf-test/res/logo" class="thumbnail" rowSpan="2"/>
<Label text="Downloading..." textWrap="true" class="title" col="1" colSpan="2" minHeight="50" />
<Label text="author " class="author" col="1" row="1" />
<Label text="comments" class="comments" col="2" row="1" />
</GridLayout>
</StackLayout>
</ScrollView>
</Page>

View File

@@ -0,0 +1,29 @@
.title {
font-size: 20;
margin: 3;
}
.author {
font-size: 14;
horizontal-align: left;
vertical-align: bottom;
margin: 3;
}
.comments {
color: #10C2B0;
font-size: 14;
vertical-align: bottom;
margin: 3;
}
.thumbnail {
width: 72;
height: 72;
margin: 3;
vertical-align: top;
}
TabView {
background-color: white;
}

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@@ -0,0 +1,7 @@
import {Page} from "ui/page";
export function onTap(args: any) {
global.startTime = global.time();
let page = <Page>args.object.page;
page.frame.navigate("css-perf-test/main-page");
}

View File

@@ -0,0 +1,3 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<Button text="Start test" tap="onTap" />
</Page>