firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reuse the DOM in the <fps-counter>.

Browse Source 
Instead of storing primitive values which makes the data
binding system throw away DOM each time we update each slot
lets just use objects and shift + pop. This means very little
data binding churn.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/802153004
This commit is contained in:
Elliott Sprehn 2015-01-15 22:02:35 -08:00
parent 42a7db75ec
commit 8c9486fc71
1 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
examples/fps-counter.sky
View File

@ -8,27 +8,34 @@
<sky-element name="fps-counter" attributes="showHistory:boolean"> <sky-element name="fps-counter" attributes="showHistory:boolean">
<template> <template>
<template if="{{ showHistory }}"> <template if="{{ showHistory }}">
<template repeat="{{ history }}"> <template repeat="{{ deltas }}">
<div>{{ }} ms</div> <div>{{ roundedValue }} ms</div>
</template> </template>
<div>max = {{ max }} ms</div> <div>max = {{ max }} ms</div>
</template> </template>
<div>fps = {{ framerate }} Hz</div> <div>fps = {{ frameRate }} Hz</div>
</template> </template>
<script> <script>
var kMaxDeltaLength = 10; const kMaxDeltaLength = 10;
class Delta {
constructor(value) {
this.value = value;
this.roundedValue = value.toFixed(2);
Object.preventExtensions(this);
}
}
module.exports = class extends SkyElement { module.exports = class extends SkyElement {
created() { created() {
this.framerate = "..."; this.frameRate = "...";
this.max = 0; this.max = 0;
this.sum = 0;
this.lastTimeStamp = 0; this.lastTimeStamp = 0;
this.rafId = 0; this.rafId = 0;
this.currentDeltaIndex = 0; this.deltas = [];
this.deltas = new Array(kMaxDeltaLength); for (var i = 0; i < kMaxDeltaLength; ++i)
this.deltas.fill(0); this.deltas[i] = new Delta(0);
this.history = new Array(kMaxDeltaLength);
this.history.fill(0);
} }
attached() { attached() {
this.scheduleTick(); this.scheduleTick();
@ -38,7 +45,7 @@ module.exports = class extends SkyElement {
this.rafId = 0; this.rafId = 0;
} }
scheduleTick() { scheduleTick() {
this.rafId = requestAnimationFrame(this.tick.bind(this)); this.rafId = requestAnimationFrame(this.tick.bind(this));
} }
tick(timeStamp) { tick(timeStamp) {
this.scheduleTick(); this.scheduleTick();
@ -46,16 +53,14 @@ module.exports = class extends SkyElement {
this.lastTimeStamp = timeStamp; this.lastTimeStamp = timeStamp;
if (!lastTimeStamp) if (!lastTimeStamp)
return; return;
var delta = timeStamp - lastTimeStamp; var delta = new Delta(timeStamp - lastTimeStamp);
this.deltas[this.currentDeltaIndex++ % kMaxDeltaLength] = delta; var removedDelta = this.deltas.shift();
for (var i = 0; i < kMaxDeltaLength; ++i) { this.deltas.push(delta);
var value = this.deltas[(i + this.currentDeltaIndex) % kMaxDeltaLength]; this.sum -= removedDelta.value;
this.history[i] = value.toFixed(2); this.sum += delta.value;
} var avg = this.sum / this.deltas.length;
var sum = this.deltas.reduce(function(a, b) { return a + b }, 0); this.frameRate = (1000 / avg).toFixed(2);
var avg = sum / kMaxDeltaLength; this.max = Math.max(delta.value, this.max).toFixed(2);
this.framerate = (1000 / avg).toFixed(2);
this.max = Math.max(delta, this.max).toFixed(2);
} }
}.register(); }.register();
</script> </script>