Frontend Note (2) 썸네일형 리스트형 [FE] 스크롤 한번에 4초 멈춤 대참사..?! 소개페이지 성능 최적화를 해보자 #Layout Thrashing #Forced Reflow #브라우저 렌더링 파이프라인 나름 3D 스크롤 애니메이션을 구현했는데, 마우스 내릴 때 갑자기? 누적되서 화면이 뚝... 뚝 ... 끊기면서 버벅인 경험 한번씩 있으신가요?제가 그랬습니다. 웹 기능 구현은 했지만, 특정 구간에 프레임 드랍이 있어서.. 원인 파악후 고쳐야겠다는 결심을 했습니다. 기존에 짜뒀던 로직을 개선해서 반복적으로 소모되는 불필요한 연산이나 흐름을 줄이며 CPU 사용량을 최적화할수도 있고, 프레임 드랍이나 버벅임이 발생하는 렌더링 병목 구간의 원인을 프로파일링해 해결하는 것도 성능 최적화가 아닐까.. 생각합니다. 우리가 부드럽다고 느끼는 화면 일반적으로 60fps를 만들기 위해서, 브라우저는 16.6ms 안에 대부분의 렌더링 과정을 끝내야 합니다. JavaScript 실행, 스타일 계산, 레이아웃, 페인트, .. [FE] 트래픽 100만이 몰려도 서버비 0원?! "html2canvas"로 이미지 만들어보자긔 React, Html.. 웹 서비스에서 '내 결과물 공유하기', '영수증 이미지 다운로드', '포토 카드 저장' 같은 기능을 구현해야 할 때가 있습니다. 보통은 서버에서 이미지를 생성(렌더링)해서 클라이언트에게 내려주는 방식을 생각하기 쉽습니다. 하지만 이 방식은 치명적인 단점이 있는데,서버 부하: 이미지 렌더링은 CPU와 메모리를 크게 소모함,,비용 증가: 트래픽이 몰린다면? 서버 비용과 데이터 전송 비용이 기하급수적으로 늘어남"이 작업을 서버가 아니라 사용자 브라우저에서 직접 하게 만들면 어떨까?" 이때 떠올려볼수있는 라이브러리는 html2canvas!입니다. 사용자의 기기 자원을 활용하여 화면의 DOM 요소(HTML/CSS)를 캔버스(Canvas)로 캡처해 줍니다. 즉, 트래픽이 100만이 몰려도 이미지 생성에 드는 서버 .. 이전 1 다음
