개요
리소스 중에 용량이 큰 gif 포멧을 효율적인 압축 방식을 제공하는 mp4 비디오 포멧으로 변경해서 리소스 수신 용량을 줄이고 로딩 속도를 개선하기 위해서 해당 기능을 서비스에 적용을 위한 성능개선 작업을 진행하였습니다.
요구사항 분석
- 변환 형식
- img > gif → video > mp4
- 동일한 파일명이 있는 mp4 파일이 있는 경우 gif 보다는 mp4 로딩되도록 처리
- placeholder 적용
- dataset에서 저장된 이미지 너비, 높이값을 바탕으로 placeholder 높이값 지정
- 사이즈 재 계산
- 브라우저 리사이즈 발생 시 너비/높이 사이즈를 재계산
- 뷰포트 기준 mp4 로딩/재생/일시중지 작업
- viewport 기준 영역에 도달했을 때 mp4 로딩 되도록 수정
- gif 동작과 동일한 기능 제공
- autoplay, mute, loop, playinline
gif 이미지 파일과 동일한 파일명에 mp4 파일 존재 유무 판단
초기 로딩 시 layout shift 방지를 위한 mp4 placeholder 지정
사용자 viewport 최초 진입/재진입/벗어날 경우에 대한 mp4 처리