구글 크롬 이용 퍼포먼스 체크 방법
사용자가 조금 더 원활하고 부드럽고 완만한 경험을 하기위해서는, 1초당 60개의 프레임이 계속해서 보여져야 한다. 그렇게 하려면 한 프레임이 보여질때 16.67ms 동안 이뤄져야한다.
화면이 업데이트 되는게 16ms이 넘어가기 시작했을때, 유저가 화면이 깜빡거리거나 화면이 이상함을 느낀다.
즉, 처음부터 무언가 이벤트를 처리하고 다시 브라우저에 표기될때 16ms동안 끝내야한다.
mousemove 시에 top,left 속성을 이용하여 계속해서 위치를 변화시켰을때
그림과 같이 Experience 탭에 layout과정이 계속해서 일어남을 알 수있다.
mousemove 시에 transform을 이용하여 계속해서 위치를 변화시켰을때
더 자세히 어디서 layout 과정이 일어나는지 체크하는 방법
구글 개발자툴에서 command + shift + p, ‘layout’ 검색
‘layout shift regions’ 클릭하여 이벤트별로 어디서 레이아웃 과정이 일어나는지 확인한다.
레이아웃 과정이 일어나고 있는 경우, 화면에 다음과 같이 박스가 생긴다.
