비단결처럼 부드러운 사이트를 만들기 위해

 안녕하세요. 이번에는 부드러운 사이트를 만들기 위해 도움되는 아티클들을 소개하려고 합니다.

 최근 웹에 복잡하고 화려한 UI가 많아지고 있습니다. 이러한 UI들을 잘못 구현하게 되면 사이트가 뚝뚝 끊기는 현상이 일어나 사용자들에게 불편함을 줄 수 있습니다.

 최근의 브라우저들은 모니터 혹은 기기의 스크린의 화면 갱신속도에 맞춰서 웹 컨텐츠들을 리프레시하도록 설계가 되어있습니다. 최근의 거의 모든 기기들은 1초에 60번 화면을 갱신하고 있어, 브라우저들도 그 횟수에 맞춰 컨텐츠를 갱신하게 됩니다. 반대로 말하면 브라우저상에서 스크롤, 애니메이션, 트랜지션이 일어나게 되면 브라우저는 1초에 60개의 프래임을 만들어야만 합니다.

 하지만 그 과정에서 과도한 자바스크립트, 과도한 리페인트등이 일어나게 되면 1개의 프레임을 만드는데 시간이 오래 걸리게 되고 1초에 60개 이하의 프레임을 만들게 됩니다. 개인차가 있지만 인간의 눈으로는 1초에 30개 이하의 프레임을 보는 경우 화면이 끊기는걸로 인식합니다. 

 베스트 케이스는 1초에 60개의 프레임을 만드는걸로, 모든 프론트엔드 개발자가 목표로 하고 있습니다. 1초에 60개의 프레임을 만드려면 각 프레임당 자바스크립트 + 렌더링 + 페인팅을 합쳐서 0.016초안에 처리를 해야 합니다. 60프레임을 채우지 못해도 최소 30프레임 이상이면 문제가 없습니다. 저희 웹포넌트 그리드도 대용량 데이터를 스크롤 할 시 최소 30프레임이상을 보장하도록 구현 되어있습니다.

 1초에 60개의 프레임을 찍어내기위해 많은 개발자들이 노력을 하고 있고, 그에 대한 아티클들도 상당히 많이 있습니다. 그럼 제일 도움이 될만한 아티클들을 링크 시키는 걸로 글을 마무리 짓겠습니다.

60 FPS layout and rendring

A developer's guide to rendering perfomance

Mobile Web performance auditing