멋쟁이 사자처럼_1220

jojo·2021년 12월 20일

1기 TIL optimization 기록 멋쟁이사자처럼 자바스크립트 최적화 프론트엔드

수업

자바스크립트 최적화 (Optimization)

성능측정: 자원소모를 얼마나 적게하고, 빠르게 동작하는가.

시간

초기구동시간
사이트를 로드하는 시간이 오래 걸릴 수록 이탈하는 유저가 많다.

참고링크:
https://web.dev/why-speed-matters/

파일의 개수와 용량은 작게!(이미지 스프라이트, 이미지 용량 최적화(https://kraken.io/web-interface)
용량이작은 이미지(jpeg(투명처리, 움직이는 이미지 불가))
최적화된 폰트(구글폰트!)
최소화한 css, js (minify..)
프레임워크는 필요한 것만 사용

계산시간
빠르게 계산을 할 수 있도록 코드를 작성한다.(알고리즘)

반응시간

브라우저의 렌더링 방식에 대한 이해가 필요하다.

파싱(HTML을 파싱하여 DOM으로 변환한다.)

스타일 개선(CSS를 파싱하여 CSSOM으로 변환)

레이아웃

페인트

컴포지링

reflow, repaint를 유발하는 속성은 지양한다.

참고링크-css 속성 별 reflow & repaint:
https://csstriggers.com/

position말고 transform 사용한다.
transform은 cpu가 아니고 gpu가 연산을 한다.

requestAnimationFrame 을 사용

참고링크:
https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

부드러운 애니메이션 처리가 가능하다. 브라우저가 애니메이션을 최적화하도록 한다.

Document fragment

참고링크:
https://developer.mozilla.org/ko/docs/Web/API/DocumentFragment

Document의 경량화된 버전인 가상의 돔이다.
문서 구조의 일부를 저장한다.

실제 돔에 계속 정보를 업데이트하는 것보다 메모리에만 존재하는 가상돔에 업데이트하고 그걸 한번에 실제 돔에 업데이트 하는게 효율적이다.
(실제 돔에 업데이트 하면 가상 돔은 자동으로 사라지게 된다.)

메모리

참고링크:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management

메모리의 생명주기: 메모리할당 - 메모리사용 - 메모리해제

Garvage Collection
사용하지 않는 메모리를 자바스크립트 엔진이 '추정'하여 삭제

참조카운팅
: 메모리에 존재하는 값을 몇개의 변수와 함수가 참조하고 있는지 카운팅하는 것.
0이 되면 메모리에서 삭제한다.

    <script>
        //case 1.
        var me = {age: 30}; //참조 카운팅 1개
        var you = me;       //참조 카운팅 2개
        me = null;          //참조 카운팅 1개
        you = null;         //참조 카운팅 0개
       
       
        //case 2.
        var x = {
            y:{
                z: 1
            }
        };
        //x 참조 객체를 object1, y 참조 객체를 object2

        var a = x;     //object1 객체의 참조 카운트 : 2 (x, a)
        x = 1;         //object1 객체의 참조 카운트 : 1 (a)

        var b = a.y;  //object2 객체의 참조 카운트 : 2 (y, b)
        a = 2;        //object1 객체의 참조 카운트 : 0
       
        //b가 object1 안에 있는 a.y(object2)를 참조하고 있기 때문에 
        //object1이 해제되지 않는다.
       
        //이렇게 더이상 사용하지 않지만, 
        메모리에 불필요하게 남아 있는 객체가 있을 경우 메모리 누수(leak)가 발생했다고 한다.
    </script>

mark-sweep
예전에는 순환참조문제가 있었지만, 지금은 마크스위프(mark-sweep)알고리즘을 사용하여 이런 문제를 해결하고 있다.

참고링크:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management#mark-and-sweep_algorithm

전역변수는 따로 null이라고 선언하지 않으면, 프로그램이 종료되기 전까지 계속 메모리에 존재한다.

좋은 습관 기르기

배열 데이터에서 원본데이터는 그대로 두고, 새로 복사해서 사용하는 것이 좋다.

const aespa = ["카리나", "윈터", "지젤", "닝닝"];

// aespa.forEach((item, index) => {
//     aespa[index] = item + '💖';
// });

const aespa2 = aespa.map((item) => {
    return item + '💖'
});

console.log(aespa2);
console.log(aespa);

엄격모드로 사용하기
많은 에러를 사전에 예방할 수 있다.

일치연산자 사용

'' == false
-> true
[] == false
-> true
null == undefined
-> true

'' === false
-> false
[] === false
-> false
null === undefined
-> false

( falsy값 0, 빈문자열, undefined, null, NaN )

생각

지난주에 알고리즘 공부는 너무 어려웠다 그리고, 뭔가 많이 지쳤었다. 백신 때문에 몸이 지쳐서 그렇게 느껴졌던 것일수도 있지만, 목요일, 금요일은 너무 지쳐서 복습도 최소화하고 컨디션 회복에 집중했다. 공부는 장기전이기 때문에 물론 지금 몰입해서 해야하는 것도 맞지만, 빠르게 소진되고 의지를 잃는 일은 정말 최악의 경우라고 생각한다. 조금더 체력관리, 멘탈관리를 잘 해야겠다는 생각이 들었다.