178 프론트엔드 최적화

source: categories/study/vue-experiance/vue-experiance_9-99_79.md

178 프론트엔드 최적화

  • img 최적화 (imagemin)

  • font 최적화

  • requestAnimationFrame // event loop에서 reflow를 발생 // transform, opacity css 속성만 변화시키자 (layout 관련없는 css)
  • aws s3 cloudFont

  • http 1.0 hol // http 2.0 차이점 조사 (대기열 queue)

  • vue component 태그 / 무한 스크롤링 / prefetch
  • react : useCallback / useMemo / React.Memo
  • vue keep-alive / react에선 keep-alive 같은게 React.Memo인거 같다.

  • vue에서도 useCallback / useMemo같은게 있나? 조사해봐야된다.

  • 무엇을 어떻게 캐싱할지, 그때그때 잘 정해야된다.
  • vue에서도 useCallback / useMemo 같은 것들이 있는지 조사하자
  • 추가적인 최적화 방법이 있는지 조사하자
  • SSR
  • react 18 // batch

CORS 이슈

  • 실제 배포시 프론트엔드 소스 서버 도메인과 서버 도메인이 달라 생긴 오류

해결방법

.env 파일

VUE_APP_BASE_URL=https://~~~~~/2nd/~~~~

nginx pc.conf 파일

location /2nd {
    proxy_pass https://~~
}

위와 같이 설정하면 2nd를 감지해 nginx가 앞에 도메인을 갈아끼워넣어준다.

모달 컴포넌트 개발 방식

  • portal

강제 동기 레이아웃(layout browser rendering performance)

용어

  • 강제 동기식 레이아웃 (forced synchronous layout)
  • layout = reflow (firefox에서 쓰는말)
  • paint = repaint
  • Element의 Geometric한 CSS style을 변경하면 layout이 invalidated된다.
  • 보통의 경우라면, javascript의 call stack에 있는 함수를 실행하고 event loop가 돌면서 render를 해준다.
    render tree -> layout(reflow) -> paint (repaint)
  • 그러나 call stack에 있는 함수를 실행중일지라도, invalidated layout에 접근하게되면 layout(reflow)이 발생한다. 이는 성능에 좋지않다.
  • invalidated된 layout에 반복적으로 접근하지 말고, 한번에 style을 변경하고 한번에 접근하는 것이 좋다.
  • 모양, 크기, 위치를 바꾸면 레이아웃(랜더링 과정 중 일부)을 다시 계산해야된다.
  • 함수실행 -> 랜더링 -> 함수실행 -> 랜더링 이 반복된다.
  • 그런데, 함수실행 중간에 우리가 모양, 크기, 위치 데이터에 접근하게되면 브라우저는 함수실행 중간에 바뀐 값을 얻어야하기 때문에 layout(reflow)이 발생한다.
  • 즉, 함수실행 중간에 layout(reflow)이 발생하니까 오버헤드도 있을 것이고, layout(reflow)이 불필요하게 많이 발생하게된다.
  • style 변경과 style 접근을 덩어리 단위로 해주면 해소된다.

나쁜코드 (이게 진짠지 모르겠음.. 조금 의문이드는건 사실)

var box1Height = document.getElementById('box1').clientHeight; // 이렇게 접근하기 때문에, 이때 reflow가 발생한다.
document.getElementById('box1').style.height = box1Height + 10 + 'px'; // 서로서로 sibling이니까. 서로의 layout에 영향을 주게 되는 것이다.

var box2Height = document.getElementById('box2').clientHeight; // layout(reflow) 발생. sibling한테 영향받아서 forced synchronous layout 발생
document.getElementById('box2').style.height = box2Height + 10 + 'px';

var box3Height = document.getElementById('box3').clientHeight; // layout(reflow) 발생. sibling한테 영향받아서 forced synchronous layout 발생
document.getElementById('box3').style.height = box3Height + 10 + 'px';

var box4Height = document.getElementById('box4').clientHeight; // layout(reflow) 발생. sibling한테 영향받아서 forced synchronous layout 발생
document.getElementById('box4').style.height = box4Height + 10 + 'px';

var box5Height = document.getElementById('box5').clientHeight; // layout(reflow) 발생. sibling한테 영향받아서 forced synchronous layout 발생
document.getElementById('box5').style.height = box5Height + 10 + 'px';

var box6Height = document.getElementById('box6').clientHeight; // layout(reflow) 발생. sibling한테 영향받아서 forced synchronous layout 발생
document.getElementById('box6').style.height = box6Height + 10 + 'px';

좋은코드

var box1Height = document.getElementById('box1').clientHeight; 
var box2Height = document.getElementById('box2').clientHeight; 
var box3Height = document.getElementById('box3').clientHeight; 
var box4Height = document.getElementById('box4').clientHeight; 
var box5Height = document.getElementById('box5').clientHeight; 
var box6Height = document.getElementById('box6').clientHeight;
document.getElementById('box1').style.height = box1Height + 10 + 'px';
document.getElementById('box2').style.height = box2Height + 10 + 'px';
document.getElementById('box3').style.height = box3Height + 10 + 'px';
document.getElementById('box4').style.height = box4Height + 10 + 'px';
document.getElementById('box5').style.height = box5Height + 10 + 'px';
document.getElementById('box6').style.height = box6Height + 10 + 'px';