search

FE-StudyWithMe / FE-without-framework

프레임워크 없는 프론트엔드 개발을 위한 레포지토리🔥
28 stars 0 forks source link

[2장] FPS가 랜더링 엔진에서 중요한 지표인 이유는 뭘까? #4

Closed horang-e closed 1 month ago

horang-e commented 1 month ago

🧐 Question

FPS가 랜더링 엔진에서 중요한 지표인 이유는 뭘까?

💡Description

2장의 초반에 FPS측정하는 방법을 세가지나 알려주고 그 세가지 방법이 랜더링 엔진 성능 모니터링하는 방법이라고 설명했는데요..! 제가 docs에 적기로는 성능 모니터링할때 fps 즉 frame per second를 중요하게 보는 이유는 렌더링 파이프라인의 모든 단계(JavaScript 실행, 스타일 계산, 레이아웃, 페인트 등)가 FPS에 영향을 주기 때문이다. 라고 써두긴 했지만 사실 명확하게 FPS를 확인하는 이유가 뭔지는 잘 모르겠어요 🥲

보통 모니터들은 fps 제한이 있어서 아무리 성능이 좋아도 최대 fps일테고.. 약간 기본은 된다(?) 요런 느낌일까요?

📝 Reference

렌더링 성능

jasongoose commented 1 month ago

브라우저가 처리하는 작업들(렌더링을 포함해서)은 각자 우선순위를 가져서 개별 Queue에 쌓여있다가 이벤트 루프에 의해 처리되므로 부드러운 렌더링을 구현하려면 렌더링 이전에 수행할 작업들을 처리하는데 시간이 많이 걸리지 않도록 고려해야 한다는 점을 의미한게 아닐까 싶어요.

렌더링 최적화가 제대로 구현되어 있지 않다면 FPS는 자연스럽게 떨어질테니 이 부분에서 성능을 확인하는데 도움을 준다고 말하는 것 같아요!

이벤트 루프 관련 영상 하나 공유드립니다~ https://www.youtube.com/watch?v=cCOL7MC4Pl0

chhw130 commented 1 month ago

FPS(Frames Per Second)는 단순하게 사용자 경험에 직접적인 영향을 미치는 중요한 요소라서 그런거 같아요.