FunChat에서 메시지 검색 창이 오른쪽에서 왼쪽으로 나올때 버벅대는것을 발견하였다.
개발자 도구에서 fps(frame per second의 약자. cmd + shift + p 를 누르고 fps라고 검색하여 활성화)를 켜고 rendering - paint fleshing 도 활성화 시켜주었다.
보니깐 현재 아래와 같이 결과가 나왔다.
데스크톱일때 보니 최대 gpu memory 사용량이 120mb이었고
모바일 모드일때 ,28mb였다.
코드를 보자.
// SearchMessages.tsx
<div
className={`absolute duration-[500ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] ${
isSearchingMessages ? "!right-[0%]" : ""
} -right-[100dvw] top-0 z-10 h-[100dvh] w-[100dvw] bg-search-input-container-background md:-right-[35%] md:w-[35dvw] lg:-right-[25%] lg:w-[25dvw]`}
>
....
</div>
예상컨데 right를 써서 느려진것 같다. css trigger 를 보면 잘 알 수 있듯이 right는 critical rendering path에 layout단계를 트리거하는 css 속성이다. 따라서 랜더링을 거의 새로 해야하는 수준인것이다. gif를 보면 깜빡임이 많은 것을 보아하니 랜더링도 전체적으로 일어나는 것을 알 수 있다.
right의 좋은 대체제는 transform이다. transform은 composite 단계만 트리거 된다(다만, 사파리와 엣지는 여전히 layout부터 다시 시작한다. 남북통일도 통일이지만 , 브라우저 통일.. 시급하다..)
그래서 transform:translateX()를 이용하려고 했으나 적용이 되지 않는다.. 정확히 말하면 검색 상자가 도통 어디로 사라졌는지 보이지 않는다.
알고보니 chatbox밑에 깔려있는 것이었다!
부모를 flex로 변경하였다. 그리고 적용하니 시야에 보이기 시작🫣
<div
className={`duration-[500ms] ease-[cubic-bezier(0.25,0.46,0.45,0.94)] max-md:absolute ${
isSearchingMessages ? "max-md:!translate-x-[0px]" : ""
} top-0 z-10 h-[100dvh] w-[100dvw] bg-search-input-container-background max-md:translate-x-[100%] md:w-[35dvw] lg:w-[25dvw] `}
>
...
</div>max-md는 768px까지만 적용되는 media query 속성이다.
그러고 gpu를 측정해보았다.
데스크톱일때 보니 최대 gpu memory 사용량이 87mb이었고
모바일 모드일때 ,21mb였다.
모바일일때 보면 flesh도 줄었다.
그리고 핸드폰에서 실제 확인해보니 훨씬 스무스 하게 동작하더이다...!
버벅거린다면 api나 critical rendering path를 잘 고려해보자.
