fps-detector 1.0.2 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +65 -17
- package/dist/fps-detector.d.ts +31 -0
- package/dist/fps-detector.esm.js +111 -0
- package/dist/fps-detector.js +5 -2
- package/package.json +31 -6
- package/dist/fps-detector.js.map +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 cenfun
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,17 +1,65 @@
|
|
|
1
|
-
# fps-detector
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
```sh
|
|
6
|
-
npm i fps-detector
|
|
7
|
-
```
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
# fps-detector
|
|
2
|
+
> A tool to display FPS in real time for detecting JS performance.
|
|
3
|
+
|
|
4
|
+
## Install
|
|
5
|
+
```sh
|
|
6
|
+
npm i fps-detector
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Online Demo
|
|
10
|
+
[https://cenfun.github.io/fps-detector](https://cenfun.github.io/fps-detector)
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
### ESM
|
|
15
|
+
```js
|
|
16
|
+
import FPSDetector from 'fps-detector';
|
|
17
|
+
// or named import
|
|
18
|
+
// import { FPSDetector } from 'fps-detector';
|
|
19
|
+
|
|
20
|
+
new FPSDetector('.fps-detector', {
|
|
21
|
+
width: 120,
|
|
22
|
+
height: 30
|
|
23
|
+
});
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### CDN
|
|
27
|
+
```html
|
|
28
|
+
<script src="https://cdn.jsdelivr.net/npm/fps-detector@latest/dist/fps-detector.js"></script>
|
|
29
|
+
|
|
30
|
+
<div class="fps-detector"></div>
|
|
31
|
+
<script>
|
|
32
|
+
const FPSDetector = window['fps-detector'].FPSDetector;
|
|
33
|
+
new FPSDetector('.fps-detector');
|
|
34
|
+
</script>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Options
|
|
38
|
+
|
|
39
|
+
| Option | Type | Default | Description |
|
|
40
|
+
|--------|------|---------|-------------|
|
|
41
|
+
| `width` | `number` | `85` | Canvas width |
|
|
42
|
+
| `height` | `number` | `30` | Canvas height |
|
|
43
|
+
| `fpsLevels` | `number[]` | `[10, 30]` | FPS thresholds (ascending), values below threshold use corresponding color |
|
|
44
|
+
| `memLevels` | `number[]` | `[200, 100]` | Memory thresholds in MB (descending), values above threshold use corresponding color |
|
|
45
|
+
| `colors` | `string[]` | `['red', 'orange', 'green']` | Colors for each level (low to high performance) |
|
|
46
|
+
| `bgColor` | `string` | `'#fff'` | Background color |
|
|
47
|
+
| `fgColor` | `string` | `'#ddd'` | Foreground (chart area) color |
|
|
48
|
+
| `padding` | `number` | `1` | Canvas padding |
|
|
49
|
+
|
|
50
|
+
## Methods
|
|
51
|
+
|
|
52
|
+
| Method | Description |
|
|
53
|
+
|--------|-------------|
|
|
54
|
+
| `start()` | Start/resume FPS monitoring |
|
|
55
|
+
| `stop()` | Stop FPS monitoring |
|
|
56
|
+
| `render()` | Manually trigger a re-render |
|
|
57
|
+
|
|
58
|
+
## Features
|
|
59
|
+
|
|
60
|
+
- **Click to toggle**: Click the detector to switch between FPS and Memory display mode
|
|
61
|
+
- **Memory display**: Shows used JS heap size in MB (Chrome only, requires `window.performance.memory`)
|
|
62
|
+
- **Color-coded levels**: FPS and memory values are color-coded based on configured thresholds
|
|
63
|
+
- **Real-time bar chart**: Visualizes FPS history as a scrolling bar chart
|
|
64
|
+
|
|
65
|
+
see [index.html](index.html) for a complete example.
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export interface FPSDetectorOption {
|
|
2
|
+
width?: number;
|
|
3
|
+
height?: number;
|
|
4
|
+
fpsLevels?: number[];
|
|
5
|
+
memLevels?: number[];
|
|
6
|
+
colors?: string[];
|
|
7
|
+
bgColor?: string;
|
|
8
|
+
fgColor?: string;
|
|
9
|
+
padding?: number;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export declare class FPSDetector {
|
|
13
|
+
constructor($container: string | HTMLElement, option?: FPSDetectorOption);
|
|
14
|
+
|
|
15
|
+
showMemory: boolean;
|
|
16
|
+
list: number[];
|
|
17
|
+
frames: number;
|
|
18
|
+
startTime: number;
|
|
19
|
+
stopped: boolean;
|
|
20
|
+
|
|
21
|
+
render(): void;
|
|
22
|
+
getFPSColor(v: number): string;
|
|
23
|
+
getMEMColor(v: number): string;
|
|
24
|
+
getImg(n: string, color: string): HTMLImageElement | undefined;
|
|
25
|
+
start(): void;
|
|
26
|
+
update(): void;
|
|
27
|
+
count(): void;
|
|
28
|
+
stop(): void;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export default FPSDetector;
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
//#region src/index.js
|
|
2
|
+
var e = class {
|
|
3
|
+
constructor(e, t) {
|
|
4
|
+
typeof e == "string" && (e = document.querySelector(e)), this.option = {
|
|
5
|
+
width: 85,
|
|
6
|
+
height: 30,
|
|
7
|
+
fpsLevels: [10, 30],
|
|
8
|
+
memLevels: [200, 100],
|
|
9
|
+
colors: [
|
|
10
|
+
"red",
|
|
11
|
+
"orange",
|
|
12
|
+
"green"
|
|
13
|
+
],
|
|
14
|
+
bgColor: "#fff",
|
|
15
|
+
fgColor: "#ddd",
|
|
16
|
+
padding: 1,
|
|
17
|
+
...t
|
|
18
|
+
};
|
|
19
|
+
let n = document.createElement("canvas");
|
|
20
|
+
n.style.display = "block", n.setAttribute("width", this.option.width), n.setAttribute("height", this.option.height), e.appendChild(n), e.title = "FPS Detector", e.onclick = (e) => {
|
|
21
|
+
this.showMemory = !this.showMemory, this.render();
|
|
22
|
+
}, this.numbers = {
|
|
23
|
+
"-": { d: "m2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z" },
|
|
24
|
+
0: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z" },
|
|
25
|
+
1: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z" },
|
|
26
|
+
2: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z" },
|
|
27
|
+
3: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z" },
|
|
28
|
+
4: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z" },
|
|
29
|
+
5: { d: "m1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z" },
|
|
30
|
+
6: { d: "m1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z" },
|
|
31
|
+
7: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z" },
|
|
32
|
+
8: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z" },
|
|
33
|
+
9: { d: "M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z" }
|
|
34
|
+
}, this.initNumbers(n), this.ctx = n.getContext("2d"), this.start();
|
|
35
|
+
}
|
|
36
|
+
render() {
|
|
37
|
+
let e = this.option.width, t = this.option.height, n = this.ctx, r = this.list, i = this.option.padding, a = i, o = i, s = e - (22 + i * 3), c = t - i * 2, l = i;
|
|
38
|
+
if (r.length > s ? r.length = s : l = i + (s - r.length), n.fillStyle = this.option.bgColor, n.fillRect(0, 0, e, t), this.showMemory) {
|
|
39
|
+
let r = window.performance.memory;
|
|
40
|
+
if (!r) return;
|
|
41
|
+
let i = r.usedJSHeapSize / 1048576;
|
|
42
|
+
n.font = "Bold 16px", n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = this.getMEMColor(i), n.fillText(`MEM ${i.toFixed(1)} MB`, e / 2, Math.ceil(t / 2) + 1);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
n.fillStyle = this.option.fgColor, n.fillRect(a, o, s, c);
|
|
46
|
+
let u = [].concat(r).reverse(), d, f;
|
|
47
|
+
u.forEach((e, t) => {
|
|
48
|
+
d = e;
|
|
49
|
+
let r = this.getFPSColor(e);
|
|
50
|
+
f = r, n.fillStyle = r;
|
|
51
|
+
let i = Math.max(Math.floor(e / 60 * c), 1);
|
|
52
|
+
n.fillRect(l + t, c + o - i, 1, i);
|
|
53
|
+
});
|
|
54
|
+
let p = `${d}`.padStart(2, "0"), m = Math.floor(a + s + i), h = Math.ceil((t - 16) / 2);
|
|
55
|
+
p.split("").forEach((e, t) => {
|
|
56
|
+
let r = this.getImg(e, f);
|
|
57
|
+
r && n.drawImage(r, m + t * 11, h);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
getFPSColor(e) {
|
|
61
|
+
let t = this.option.colors, n = this.option.fpsLevels, r;
|
|
62
|
+
for (r = 0; r < n.length; r++) if (e < n[r]) return t[r];
|
|
63
|
+
return t[r];
|
|
64
|
+
}
|
|
65
|
+
getMEMColor(e) {
|
|
66
|
+
let t = this.option.colors, n = this.option.memLevels, r;
|
|
67
|
+
for (r = 0; r < n.length; r++) if (e > n[r]) return t[r];
|
|
68
|
+
return t[r];
|
|
69
|
+
}
|
|
70
|
+
initNumbers(e) {
|
|
71
|
+
let t = this.numbers, n = this.option.colors;
|
|
72
|
+
Object.keys(t).forEach((r) => {
|
|
73
|
+
let i = t[r];
|
|
74
|
+
n.forEach((t) => {
|
|
75
|
+
if (i[t]) return;
|
|
76
|
+
let n = `
|
|
77
|
+
<svg viewBox="0 0 11 16" width="11" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
78
|
+
<path fill="${t}" d="${i.d}" />
|
|
79
|
+
</svg>
|
|
80
|
+
`, r = document.createElement("img");
|
|
81
|
+
r.src = `data:image/svg+xml;base64,${btoa(n)}`, e.appendChild(r), i[t] = r;
|
|
82
|
+
});
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
getImg(e, t) {
|
|
86
|
+
let n = this.numbers[e];
|
|
87
|
+
if (n) return n[t];
|
|
88
|
+
}
|
|
89
|
+
start() {
|
|
90
|
+
this.stopped = !1, this.list = [], this.frames = 0, this.startTime = window.performance.now(), this.update();
|
|
91
|
+
}
|
|
92
|
+
update() {
|
|
93
|
+
this.stopped || window.requestAnimationFrame(() => {
|
|
94
|
+
this.count();
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
count() {
|
|
98
|
+
let e = this.list, t = window.performance.now(), n = t - this.startTime;
|
|
99
|
+
if (n < 1e3) this.frames += 1;
|
|
100
|
+
else {
|
|
101
|
+
for (n -= 1e3; n > 1e3;) e.unshift(0), n -= 1e3;
|
|
102
|
+
e.unshift(this.frames), this.render(), this.frames = 1, this.startTime = t - n;
|
|
103
|
+
}
|
|
104
|
+
this.update();
|
|
105
|
+
}
|
|
106
|
+
stop() {
|
|
107
|
+
this.stopped = !0;
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
//#endregion
|
|
111
|
+
export { e as FPSDetector, e as default };
|
package/dist/fps-detector.js
CHANGED
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`fps-detector`]={}))})(this,function(e){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var t=class{constructor(e,t){typeof e==`string`&&(e=document.querySelector(e)),this.option={width:85,height:30,fpsLevels:[10,30],memLevels:[200,100],colors:[`red`,`orange`,`green`],bgColor:`#fff`,fgColor:`#ddd`,padding:1,...t};let n=document.createElement(`canvas`);n.style.display=`block`,n.setAttribute(`width`,this.option.width),n.setAttribute(`height`,this.option.height),e.appendChild(n),e.title=`FPS Detector`,e.onclick=e=>{this.showMemory=!this.showMemory,this.render()},this.numbers={"-":{d:`m2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z`},0:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z`},1:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z`},2:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z`},3:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z`},4:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z`},5:{d:`m1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z`},6:{d:`m1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z`},7:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z`},8:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z`},9:{d:`M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z`}},this.initNumbers(n),this.ctx=n.getContext(`2d`),this.start()}render(){let e=this.option.width,t=this.option.height,n=this.ctx,r=this.list,i=this.option.padding,a=i,o=i,s=e-(22+i*3),c=t-i*2,l=i;if(r.length>s?r.length=s:l=i+(s-r.length),n.fillStyle=this.option.bgColor,n.fillRect(0,0,e,t),this.showMemory){let r=window.performance.memory;if(!r)return;let i=r.usedJSHeapSize/1048576;n.font=`Bold 16px`,n.textAlign=`center`,n.textBaseline=`middle`,n.fillStyle=this.getMEMColor(i),n.fillText(`MEM ${i.toFixed(1)} MB`,e/2,Math.ceil(t/2)+1);return}n.fillStyle=this.option.fgColor,n.fillRect(a,o,s,c);let u=[].concat(r).reverse(),d,f;u.forEach((e,t)=>{d=e;let r=this.getFPSColor(e);f=r,n.fillStyle=r;let i=Math.max(Math.floor(e/60*c),1);n.fillRect(l+t,c+o-i,1,i)});let p=`${d}`.padStart(2,`0`),m=Math.floor(a+s+i),h=Math.ceil((t-16)/2);p.split(``).forEach((e,t)=>{let r=this.getImg(e,f);r&&n.drawImage(r,m+t*11,h)})}getFPSColor(e){let t=this.option.colors,n=this.option.fpsLevels,r;for(r=0;r<n.length;r++)if(e<n[r])return t[r];return t[r]}getMEMColor(e){let t=this.option.colors,n=this.option.memLevels,r;for(r=0;r<n.length;r++)if(e>n[r])return t[r];return t[r]}initNumbers(e){let t=this.numbers,n=this.option.colors;Object.keys(t).forEach(r=>{let i=t[r];n.forEach(t=>{if(i[t])return;let n=`
|
|
2
|
+
<svg viewBox="0 0 11 16" width="11" height="16" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill="${t}" d="${i.d}" />
|
|
4
|
+
</svg>
|
|
5
|
+
`,r=document.createElement(`img`);r.src=`data:image/svg+xml;base64,${btoa(n)}`,e.appendChild(r),i[t]=r})})}getImg(e,t){let n=this.numbers[e];if(n)return n[t]}start(){this.stopped=!1,this.list=[],this.frames=0,this.startTime=window.performance.now(),this.update()}update(){this.stopped||window.requestAnimationFrame(()=>{this.count()})}count(){let e=this.list,t=window.performance.now(),n=t-this.startTime;if(n<1e3)this.frames+=1;else{for(n-=1e3;n>1e3;)e.unshift(0),n-=1e3;e.unshift(this.frames),this.render(),this.frames=1,this.startTime=t-n}this.update()}stop(){this.stopped=!0}};e.FPSDetector=t,e.default=t});
|
package/package.json
CHANGED
|
@@ -1,19 +1,44 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fps-detector",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "A tool to display FPS in real time for detecting JS performance",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"fps",
|
|
8
|
+
"performance",
|
|
9
|
+
"detector",
|
|
10
|
+
"monitor"
|
|
11
|
+
],
|
|
5
12
|
"main": "dist/fps-detector.js",
|
|
6
|
-
"
|
|
13
|
+
"module": "dist/fps-detector.esm.js",
|
|
14
|
+
"types": "dist/fps-detector.d.ts",
|
|
15
|
+
"exports": {
|
|
16
|
+
".": {
|
|
17
|
+
"types": "./dist/fps-detector.d.ts",
|
|
18
|
+
"import": "./dist/fps-detector.esm.js",
|
|
19
|
+
"require": "./dist/fps-detector.js",
|
|
20
|
+
"default": "./dist/fps-detector.js"
|
|
21
|
+
},
|
|
22
|
+
"./package.json": "./package.json"
|
|
23
|
+
},
|
|
24
|
+
"scripts": {
|
|
25
|
+
"build": "vite build",
|
|
26
|
+
"build:docs": "vite build --mode docs",
|
|
27
|
+
"dev": "vite",
|
|
28
|
+
"preview": "vite preview"
|
|
29
|
+
},
|
|
7
30
|
"files": [
|
|
8
31
|
"dist"
|
|
9
32
|
],
|
|
33
|
+
"license": "MIT",
|
|
10
34
|
"repository": {
|
|
11
35
|
"type": "git",
|
|
12
36
|
"url": "git+https://github.com/cenfun/fps-detector.git"
|
|
13
37
|
},
|
|
14
38
|
"devDependencies": {
|
|
15
|
-
"eslint": "^
|
|
16
|
-
"eslint-
|
|
39
|
+
"eslint": "^10.5.0",
|
|
40
|
+
"eslint-config-plus": "^2.0.4",
|
|
41
|
+
"vite": "^8.0.16"
|
|
17
42
|
},
|
|
18
43
|
"dependencies": {}
|
|
19
|
-
}
|
|
44
|
+
}
|
package/dist/fps-detector.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fps-detector.js","mappings":"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","sources":["webpack://fps-detector/webpack/universalModuleDefinition","webpack://fps-detector/webpack/bootstrap","webpack://fps-detector/webpack/runtime/define property getters","webpack://fps-detector/webpack/runtime/hasOwnProperty shorthand","webpack://fps-detector/webpack/runtime/make namespace object","webpack://fps-detector/./src/index.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"fps-detector\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"fps-detector\"] = factory();\n\telse\n\t\troot[\"fps-detector\"] = factory();\n})(self, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","class FPSDetector {\r\n constructor($container, option) {\r\n if (typeof $container === 'string') {\r\n $container = document.querySelector($container);\r\n }\r\n\r\n this.option = Object.assign({\r\n width: 85,\r\n height: 30,\r\n\r\n fpsLevels: [10, 30],\r\n memLevels: [200, 100],\r\n colors: ['red', 'orange', 'green'],\r\n\r\n bgColor: '#fff',\r\n fgColor: '#ddd',\r\n padding: 1\r\n }, option);\r\n\r\n const $canvas = document.createElement('canvas');\r\n $canvas.style.display = 'block';\r\n $canvas.setAttribute('width', this.option.width);\r\n $canvas.setAttribute('height', this.option.height);\r\n\r\n $container.appendChild($canvas);\r\n $container.title = 'FPS Detector';\r\n $container.onclick = (e) => {\r\n this.showMemory = !this.showMemory;\r\n this.render();\r\n };\r\n\r\n this.numbers = {\r\n '-': {\r\n 'd': 'm2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z'\r\n },\r\n '0': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '1': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '2': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '3': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '4': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '5': {\r\n 'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '6': {\r\n 'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '7': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n },\r\n '8': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n },\r\n '9': {\r\n 'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n }\r\n };\r\n this.initNumbers($canvas);\r\n\r\n this.ctx = $canvas.getContext('2d');\r\n \r\n this.start();\r\n\r\n }\r\n\r\n render() {\r\n\r\n const w = this.option.width;\r\n const h = this.option.height;\r\n const ctx = this.ctx;\r\n const list = this.list;\r\n\r\n const iw = 11;\r\n const ih = 16;\r\n\r\n const padding = this.option.padding;\r\n\r\n const lx = padding;\r\n const ly = padding;\r\n const lw = w - (iw * 2 + padding * 3);\r\n const lh = h - padding * 2;\r\n\r\n let startIndex = padding;\r\n if (list.length > lw) {\r\n list.length = lw;\r\n } else {\r\n startIndex = padding + (lw - list.length);\r\n }\r\n\r\n //console.log(list);\r\n\r\n ctx.fillStyle = this.option.bgColor;\r\n ctx.fillRect(0, 0, w, h);\r\n\r\n if (this.showMemory) {\r\n\r\n const memory = window.performance.memory;\r\n const mem = memory.usedJSHeapSize / 1048576;\r\n //const memTotal = memory.jsHeapSizeLimit / 1048576;\r\n //const per = (mem / memTotal * 100).toFixed(2);\r\n \r\n //console.log(mem, per);\r\n ctx.font = 'Bold 16px';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillStyle = this.getMEMColor(mem);\r\n ctx.fillText(`MEM ${mem.toFixed(1)} MB`, w / 2, h / 2);\r\n\r\n return;\r\n }\r\n\r\n ctx.fillStyle = this.option.fgColor;\r\n ctx.fillRect(lx, ly, lw, lh);\r\n\r\n const ls = [].concat(list).reverse();\r\n\r\n let lastItem;\r\n let lastColor;\r\n ls.forEach((item, i) => {\r\n lastItem = item;\r\n const color = this.getFPSColor(item);\r\n lastColor = color;\r\n ctx.fillStyle = color;\r\n const ch = Math.max(Math.floor(item / 60 * lh), 1);\r\n ctx.fillRect(startIndex + i, lh + ly - ch, 1, ch);\r\n });\r\n\r\n const str = `${lastItem}`.padStart(2, '0');\r\n \r\n const x = Math.floor(lx + lw + padding);\r\n const y = Math.ceil((h - ih) / 2);\r\n\r\n str.split('').forEach((s, i) => {\r\n const img = this.getImg(s, lastColor);\r\n if (img) {\r\n ctx.drawImage(img, x + i * iw, y);\r\n }\r\n });\r\n\r\n }\r\n\r\n //asc\r\n getFPSColor(v) {\r\n const colors = this.option.colors;\r\n const fpsLevels = this.option.fpsLevels;\r\n let i;\r\n for (i = 0; i < fpsLevels.length; i++) {\r\n const item = fpsLevels[i];\r\n if (v < item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\r\n }\r\n\r\n //desc\r\n getMEMColor(v) {\r\n const colors = this.option.colors;\r\n const memLevels = this.option.memLevels;\r\n let i;\r\n for (i = 0; i < memLevels.length; i++) {\r\n const item = memLevels[i];\r\n if (v > item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\r\n }\r\n\r\n initNumbers($container) {\r\n const numbers = this.numbers;\r\n const colors = this.option.colors;\r\n Object.keys(numbers).forEach(key => {\r\n const item = numbers[key];\r\n colors.forEach(color => {\r\n if (item[color]) {\r\n return;\r\n }\r\n const svg = `\r\n <svg viewBox=\"0 0 11 16\" width=\"11\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill=\"${color}\" d=\"${item.d}\" />\r\n </svg>\r\n `;\r\n const $img = document.createElement('img');\r\n $img.src = `data:image/svg+xml;base64,${btoa(svg)}`;\r\n $container.appendChild($img);\r\n item[color] = $img;\r\n });\r\n });\r\n }\r\n\r\n getImg(n, color) {\r\n const item = this.numbers[n];\r\n if (item) {\r\n return item[color];\r\n }\r\n }\r\n\r\n start() {\r\n this.stopped = false;\r\n this.list = [];\r\n this.frames = 0;\r\n this.startTime = window.performance.now();\r\n this.update();\r\n }\r\n\r\n update() {\r\n if (this.stopped) {\r\n return;\r\n }\r\n window.requestAnimationFrame(() => {\r\n this.count();\r\n });\r\n }\r\n\r\n count() {\r\n\r\n const list = this.list;\r\n\r\n const now = window.performance.now();\r\n let d = now - this.startTime;\r\n //count each 1s\r\n if (d < 1000) {\r\n this.frames += 1;\r\n } else {\r\n\r\n d -= 1000;\r\n while (d > 1000) {\r\n list.unshift(0);\r\n d -= 1000;\r\n }\r\n\r\n //1s\r\n list.unshift(this.frames);\r\n this.render();\r\n //next\r\n this.frames = 1;\r\n this.startTime = now - d;\r\n }\r\n \r\n this.update();\r\n }\r\n\r\n stop() {\r\n this.stopped = true;\r\n }\r\n\r\n}\r\n\r\nexport { FPSDetector };\r\n\r\nexport default FPSDetector;"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","FPSDetector","$container","option","document","querySelector","this","assign","width","height","fpsLevels","memLevels","colors","bgColor","fgColor","padding","$canvas","createElement","style","display","setAttribute","appendChild","title","onclick","e","showMemory","render","numbers","initNumbers","ctx","getContext","start","lastItem","lastColor","w","h","list","lx","ly","lw","iw","lh","startIndex","length","fillStyle","fillRect","mem","window","performance","memory","usedJSHeapSize","font","textAlign","textBaseline","getMEMColor","fillText","toFixed","concat","reverse","forEach","item","i","color","getFPSColor","ch","Math","max","floor","str","padStart","x","y","ceil","split","s","img","getImg","drawImage","v","keys","svg","d","$img","src","btoa","n","stopped","frames","startTime","now","update","requestAnimationFrame","count","unshift"],"sourceRoot":""}
|