JS：ブラウザFPS表示

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>ブラウザFPS値</title>
	<style>*{margin: 0; padding:0;}</style>
	<script src="main.js"></script>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

main.js

// キャンバス
let canvas = null;
let g = null;
// FPS表示用
let fps = 0;
let frame = 0;
let startTime, endTime;
// フレーム数表示用
let totalFrame = 0;

// ゲームループ
function gameLoop(){
	frame ++;
	totalFrame ++;
	// 描画をクリア
	g.fillStyle = "#ddd";
	g.fillRect(0, 0, canvas.width, canvas.height);
	// 表示タイトル
	g.font = "32pt Impact";
	g.fillStyle = "#aaa";
	g.fillText("ブラウザFPS値", 110, 50);
	// FPS表示
	g.fillStyle = "#555";
	g.fillText(fps + " FPS", 190, 250);
	// トータルフレーム数表示
	g.fillText("frame = " + totalFrame, 150, 320);
	// 計測（1秒間にframe値をどれだけカウントしたか？をFPSとする）
	endTime = new Date().getTime();
	if(endTime - startTime >= 1000){
		fps = frame;
		frame = 0;
		startTime = new Date().getTime();
	}
	// requestAnimationFrame呼び出し
	requestAnimationFrame(gameLoop);
}

// 起動時の処理
window.addEventListener("load", ()=>{
	// キャンバス取得
	canvas = document.getElementById("canvas");
	g = canvas.getContext("2d");
	// 計測スタート
	startTime = new Date().getTime();
	gameLoop();
});