📖
엣지/크롬 성능을 비교 테스트할 수 있는 아주 간단한 HTML
페이지 정보
본문
**FPS(초당 프레임 수)**랑 애니메이션 부드러움을
눈으로 비교[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>브라우저 성능 테스트 (크롬 vs 엣지)</title>
<style>
html, body {
margin: 0;
padding: 0;
background: #222;
overflow: hidden;
height: 100%;
color: #0f0;
font-family: monospace;
}
#fpsCounter {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: #0ff;
box-shadow: 0 0 10px #0ff;
}
</style>
</head>
<body>
<div id="fpsCounter">FPS: 0</div>
<div id="ball"></div>
<script>
const ball = document.getElementById('ball');
const fpsCounter = document.getElementById('fpsCounter');
let lastTime = performance.now();
let frame = 0;
let fps = 0;
let x = 0;
let y = 0;
let dx = 3;
let dy = 2;
function animate() {
const now = performance.now();
const delta = now - lastTime;
frame++;
if (delta >= 1000) {
fps = frame;
frame = 0;
lastTime = now;
fpsCounter.textContent = `FPS: ${fps}`;
}
// 볼 움직이기
x += dx;
y += dy;
if (x < 0 || x > window.innerWidth - 50) dx *= -1;
if (y < 0 || y > window.innerHeight - 50) dy *= -1;
ball.style.left = x + 'px';
ball.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
[/code]html 파일로 저장해서 크롬이랑 엣지에서 열어보자!
FPS: xx 표시 → 초당 몇 프레임 나오는지 바로 볼 수 있음.
공(❄️형광색 동그라미)이 부드럽게 튀어다니는지 확인.
최소 55~60 FPS 꾸준히 나와야 "최적화 OK"
눈으로 비교[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>브라우저 성능 테스트 (크롬 vs 엣지)</title>
<style>
html, body {
margin: 0;
padding: 0;
background: #222;
overflow: hidden;
height: 100%;
color: #0f0;
font-family: monospace;
}
#fpsCounter {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
}
#ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: #0ff;
box-shadow: 0 0 10px #0ff;
}
</style>
</head>
<body>
<div id="fpsCounter">FPS: 0</div>
<div id="ball"></div>
<script>
const ball = document.getElementById('ball');
const fpsCounter = document.getElementById('fpsCounter');
let lastTime = performance.now();
let frame = 0;
let fps = 0;
let x = 0;
let y = 0;
let dx = 3;
let dy = 2;
function animate() {
const now = performance.now();
const delta = now - lastTime;
frame++;
if (delta >= 1000) {
fps = frame;
frame = 0;
lastTime = now;
fpsCounter.textContent = `FPS: ${fps}`;
}
// 볼 움직이기
x += dx;
y += dy;
if (x < 0 || x > window.innerWidth - 50) dx *= -1;
if (y < 0 || y > window.innerHeight - 50) dy *= -1;
ball.style.left = x + 'px';
ball.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
[/code]html 파일로 저장해서 크롬이랑 엣지에서 열어보자!
FPS: xx 표시 → 초당 몇 프레임 나오는지 바로 볼 수 있음.
공(❄️형광색 동그라미)이 부드럽게 튀어다니는지 확인.
최소 55~60 FPS 꾸준히 나와야 "최적화 OK"
댓글목록
등록된 댓글이 없습니다.
  |