OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 The Chromium Authors. All rights reserved. |
3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
5 --> | 5 --> |
6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | 6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
7 | 7 |
8 <sky-element name="fps-counter" attributes="showHistory:boolean"> | 8 <sky-element name="fps-counter" attributes="showHistory:boolean"> |
9 <template> | 9 <template> |
10 <template if="{{ showHistory }}"> | 10 <template if="{{ showHistory }}"> |
11 <template repeat="{{ history }}"> | 11 <template repeat="{{ deltas }}"> |
12 <div>{{ }} ms</div> | 12 <div>{{ roundedValue }} ms</div> |
13 </template> | 13 </template> |
14 <div>max = {{ max }} ms</div> | 14 <div>max = {{ max }} ms</div> |
15 </template> | 15 </template> |
16 <div>fps = {{ framerate }} Hz</div> | 16 <div>fps = {{ frameRate }} Hz</div> |
17 </template> | 17 </template> |
18 <script> | 18 <script> |
19 var kMaxDeltaLength = 10; | 19 const kMaxDeltaLength = 10; |
| 20 |
| 21 class Delta { |
| 22 constructor(value) { |
| 23 this.value = value; |
| 24 this.roundedValue = value.toFixed(2); |
| 25 Object.preventExtensions(this); |
| 26 } |
| 27 } |
20 | 28 |
21 module.exports = class extends SkyElement { | 29 module.exports = class extends SkyElement { |
22 created() { | 30 created() { |
23 this.framerate = "..."; | 31 this.frameRate = "..."; |
24 this.max = 0; | 32 this.max = 0; |
| 33 this.sum = 0; |
25 this.lastTimeStamp = 0; | 34 this.lastTimeStamp = 0; |
26 this.rafId = 0; | 35 this.rafId = 0; |
27 this.currentDeltaIndex = 0; | 36 this.deltas = []; |
28 this.deltas = new Array(kMaxDeltaLength); | 37 for (var i = 0; i < kMaxDeltaLength; ++i) |
29 this.deltas.fill(0); | 38 this.deltas[i] = new Delta(0); |
30 this.history = new Array(kMaxDeltaLength); | |
31 this.history.fill(0); | |
32 } | 39 } |
33 attached() { | 40 attached() { |
34 this.scheduleTick(); | 41 this.scheduleTick(); |
35 } | 42 } |
36 detached() { | 43 detached() { |
37 cancelAnimationFrame(this.rafId); | 44 cancelAnimationFrame(this.rafId); |
38 this.rafId = 0; | 45 this.rafId = 0; |
39 } | 46 } |
40 scheduleTick() { | 47 scheduleTick() { |
41 this.rafId = requestAnimationFrame(this.tick.bind(this)); | 48 this.rafId = requestAnimationFrame(this.tick.bind(this)); |
42 } | 49 } |
43 tick(timeStamp) { | 50 tick(timeStamp) { |
44 this.scheduleTick(); | 51 this.scheduleTick(); |
45 var lastTimeStamp = this.lastTimeStamp; | 52 var lastTimeStamp = this.lastTimeStamp; |
46 this.lastTimeStamp = timeStamp; | 53 this.lastTimeStamp = timeStamp; |
47 if (!lastTimeStamp) | 54 if (!lastTimeStamp) |
48 return; | 55 return; |
49 var delta = timeStamp - lastTimeStamp; | 56 var delta = new Delta(timeStamp - lastTimeStamp); |
50 this.deltas[this.currentDeltaIndex++ % kMaxDeltaLength] = delta; | 57 var removedDelta = this.deltas.shift(); |
51 for (var i = 0; i < kMaxDeltaLength; ++i) { | 58 this.deltas.push(delta); |
52 var value = this.deltas[(i + this.currentDeltaIndex) % kMaxDeltaLength]; | 59 this.sum -= removedDelta.value; |
53 this.history[i] = value.toFixed(2); | 60 this.sum += delta.value; |
54 } | 61 var avg = this.sum / this.deltas.length; |
55 var sum = this.deltas.reduce(function(a, b) { return a + b }, 0); | 62 this.frameRate = (1000 / avg).toFixed(2); |
56 var avg = sum / kMaxDeltaLength; | 63 this.max = Math.max(delta.value, this.max).toFixed(2); |
57 this.framerate = (1000 / avg).toFixed(2); | |
58 this.max = Math.max(delta, this.max).toFixed(2); | |
59 } | 64 } |
60 }.register(); | 65 }.register(); |
61 </script> | 66 </script> |
62 </sky-element> | 67 </sky-element> |
OLD | NEW |