타이머가 gpu 가속 속성을 사용하도록 개선

[23YUJIN]

✅ 주요 작업

• 타이머가 width 대신 transform을 통해 변하도록 수정
• puppeteer 성능 측정 프로세스 프론트엔드 구조 변경에 따라 오류가 발생하지 않도록 수정

개선 결과

개선 이전

개선 이후

성능 개선 전후 비교

작업 단계	개선 전	개선 후	변화량	비율 변화 (%)
Rendering	1,121 ms	872 ms	-249 ms	-22.21%
Scripting	579 ms	551 ms	-28 ms	-4.84%
System	596 ms	510 ms	-86 ms	-14.43%
Painting	241 ms	149 ms	-92 ms	-38.17%

📚 학습 키워드

GPU 가속 속성

💭 고민과 해결과정

타이머 개선

width를 사용해 타이머가 움직이도록 할 경우, 매번 레이아웃부터 렌더링 작업이 실행되므로 비효율적이고 CPU에 부담을 주게 됩니다. 반면 GPU 가속 속성을 사용할 경우 CPU와 메인 스레드에 주어지는 부담을 줄일 수 있습니다. 많은 렌더링 작업이 필요한 서비스이므로, CPU에 주는 부담을 줄이기 위해 GPU 가속 속성을 이용하도록 개선했습니다.

puppeteer 버그 수정

이유는 명확히 알 수는 없으나, 프론트엔드 구조를 라우터로 개선한 이후 포커싱을 한 번씩 주지 않으면 input 탭을 찾아 기다리는 함수가 정상 작동하지 않는 문제가 발생했습니다. 찾기 전 각 탭에 포커싱을 주도록 변경해 버그를 수정했습니다.

📌 이슈 사항

X