netlify[bot]
commented
1 year ago Deploy Preview for hipspot-webview ready!
| Name | Link |
|---|---|
| Latest commit | cbff5881dac496c64acb7cca947942e666459732 |
| Latest deploy log | https://app.netlify.com/sites/hipspot-webview/deploys/64469de7c947ac0008e028a4 |
| Deploy Preview | https://deploy-preview-82--hipspot-webview.netlify.app/ |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
yeoularu
성능 향상 결과
그래서 해당 문제는, handler 코드 내에 애니메이션을 종료하는 코드를 넣는것으로 해결했고.. 성능 개선은 추가로 진행해보기로 했습니다. ## popUpWindow 동작 방식 변경, 성능개선 ### move 이벤트 핸들러의 document.getElementId 메서드 제거 기존 코드의 경우 mouse,touch move 이벤트가 발생할때마다 getElementId 메서드가 작동하며, 바뀌지 않는 dom을 계속해서 찾는 과정으로 인한 오버헤드가 성능 저하를 일으켰습니다. 컴포넌트 로딩 시 useEffect 내의 getElementId 메서드를 통해 엘리먼트를 DOMTarget이라는 객체에 담아두었고, 이벤트 핸들러에서 해당 객체를 참조하는것으로 코드를 수정하여 성능을 개선했습니다. ### popUpWindow 위치 이동 기준을 CSS top 속성이 아닌 transform의 translateY 사용 기존코드의 경우 이벤트 핸들러와 smoothmove 함수에서 popUpWindow의 CSS top속성을 변경시키며 인포윈도우의 위치를 변경해왔는데요 top 속성 변화는 reflow가 일어나므로, repaint 과정만 일어나게 tranfrom 속성을 변화시키는 방식으로 코드를 수정했습니다 ### css var 사용 자제 코드를 구현하는 과정에서, imageSlider를 구현할 때 css var를 사용해서 하나의 변수로 여러 하위 컴포넌트들의 css 값을 수정해줄수 있는게 굉장히 편리했던 기억이 있어서 팝업윈도우의 높이를 결정하는 변수를 활용했습니다, 허나 getElementId 메서드, top->transform으로 변경 과정을 거쳤는데도 드라마틱한 성능 변화가 없었고, 랜더링 성능은 오히려 떨어진것을 확인할수 있었습니다. 그래서 css var을 사용하는게 아니라 직접 css 속성을 바꿔주는 작업을 진행한 결과 css var 사용에 따른 성능 차이가 발생한 것을 알 수 있었습니다.smoothMove와 mouseEventHandler 내에서 modifyInfoWindowTop 메서드 중복 실행
좌측 : css var 사용 x | 우측 :css var 사용 o
### To Reviewers 인포윈도우는,, 범인이 아니었습니다 cpu 6x 환경이 아니라 일반 웹에서는 정말 부드럽게 잘 움직이고, 모바일 환경에서도 크게 문제는 없긴한데 완전 부드럽지는 않아서 성능을 좀더 올렸으면 좋겠어요! 마커 클릭이후 맵에 3d효과가 일어날때 버벅거리는 현상이 있는걸로 봐서 맵박스쪽 코드를 살펴봐야 할거같습니다 마커에 쓰이는 이미지 크기 줄이기, 이미지 캐싱쪽으로 알아보려고합니다~