21.12.20(월) js성능 최적화

초록귤·2021년 12월 20일

멋사1기

목록 보기

19/19

성능 측정의 척도
시간

초기 구동 시간 : 초기에 애플리케이션이 로드되는 시간
계산 시간 : 동일한 계산을 얼마나 빠르게 수행하는가
반응 시간 : 사용자의 행동에 얼마나 빠르게 반응하는가

초기구동시간
pinterest는 대기시간 40%줄여서 검색엔진 트래픽과 가입수를 15%늘렸다.
사이트 로드에 1초가 추가될 때마다 사용자의 10%가 추가로 손실된다는 사실을 발견했다.

번역해서 올려보자.

왜 스피드가 중요한가?

-다운로드해야하는 파일 갯수와 용량은 작게 유지해야한다.(이미지 스프라이트 기법, 이미지 용량 최적화, 최적화된 폰트 사용)
하나의 이미지 판에 여러개 올리기.
이미지 용량 최적화 사이트
이미지 크라켄 kraken.io/web-interface
크라켄

세밀한 이미지는 svg적당하지 않음 (벡터기반 이미지라서-용량이 큼- 마크업코드로 만듬 =이미지가 복잡할 수록 코드가 길어지기에 용량이 늘어난다)

이미지 중에 용량 적은것 jpeg, jpg

투명처리 불가, 움직이는 이미지 불가
구글폰트 용량 적은 편

제이쿼리 다운받아 사용한다면? 다운로드 눌러서 사용하면 됨!

최적화 - 용량줄어듬
vs 파일 우클릭 minify file
네이버 똑같은 제이쿼리 다운받고 있음 ( 왜? 많은 사용자에게 작동하도록,)
lazyload.
프레임워크는 필요한 것만 사용해애ㅑ한다.
계산시간 - 알고리즘의 영역

window.requestAnimationFrame(callback);
브라우저에서 프레임단위처리 (프레임을 쪼갠다하면...
[mdn 애니메이션
](https://developer.mozilla.org/ko/docs

Web/API/Window/requestAnimationFrame)

이벤트객체는 이벤트에 대한 것 들어있다.

 <script>
        const target = document.querySelector(".target");
        //  이동할 거리
        let pos = 0;
        // 키의 상태
        let keys = {}; 
        // key눌렀을 때 move함수
        document.addEventListener('keydown', move);
        // key 안누를 때 stop함수
        document.addEventListener('keyup', stop);


        function move(event) {
            keys[event.key] = true;
        }
        function stop(event) {
            keys[event.key] = false;
        }

        function play() {
            if (keys.ArrowRight) {
                pos += 5;
                target.style.transform = `translateX(${pos}px)`;

            }
            if (keys.ArrowLeft) {
                pos -= 5;
                target.style.transform = `translateX(${pos}px)`;
            }
            // 자연스럽게 동작되도록 
            windew.requestAnimationFrame(play); 
        }
        // 계속 상태체크하는 함수 있다. 게임에서. 콘솔도 성능저하 일으키기 때문에 다 빼주는게 좋다. 
        // 재귀적으로 사용할 수 있도록 
        window.requestAnimationFrame(play);
        // function move(event) {
        //     const keyName = event.key;
        //     if (keyName === 'ArrowRight') {
        //         pos += 5;
        //         target.style.transform = `translateX(${pos}px)`;
        //     }
        //     if (keyName === 'ArrowLeft') {
        //         pos -= 5;
        //         target.style.transform = `translateX(${pos}px)`;
        //     }
        // }
    </script>

js의 메모리 관리

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

'use strict'

변수 타입 선언 반드시 해줘야 에러안남
(strict모드 아닐때, 자동 var 전역변수로 )
말도 안되는건 그냥 무시 =조용한 에러처리
읽기 전용 객체에 값을 할당하면 에러발생
함수 파라미터에 중복이름 사용할 수 없다.

면접질문

pixel ratio 픽셀비율

CSS 에서 말하는 1px 에 실 기기에는 몇 개의 pixel이 들어가있는지를 나타낸 비율.
디바이스별 픽셀비율이 다르기 때문에 이를 고려하여 em, rem %등의 단위를 사용하거나 해상도를 고려하여 이미지를 불러오는 등의 방법으로 화면을 구현하여야 합니다.
화면을 이루는 단위는 화소 pixel인데,
이 픽셀비가 얼마나 작냐에 따라 고화질로 표현이 가능합니다.
레티나 디스플레이는 작은 픽셀도 표현가능하기 떄문에 고화질을 표현가능하고, 이미지를 크게 사용해야 깨짐없이 볼 수 있습니다.
-> css에서 1px에 실기기에는 몇개의 pixel이 들어가있는지 나타내는
webkit-min-device-pixel-ratio >console에서 바로 보여줌

다음 이미지 포맷에 대해 각 특징에 대해 설명 해 주세요. (JPG, GIF, PNG, SVG)

JPG: 이미지 포맷, 용량이 작다. 이미지의 투명이 필요없을때 사용.
GIF: 동영상 포맷 
PNG: 이미지 포맷, JPG보다 용량이 크다. 배경 투명 가능으로 영상처리 분야에 사용
SVG: 벡터기반 이미지 포맷, html코드로 이루어져 있어, 이미지가 복잡할수록 용량이 커진다.

 JPG는 압축률이 높고 화질이 좋아 일반적으로 많이 사용합니다. 다만 투명 처리가 불가능하다는 단점이 있습니다.
GIF는 움직이는 이미지를 나타낼 수 있고, 투명 처리도 가능합니다. 다만 화질이 좋지 않습니다.
PNG는 화질도 좋고 투명 처리도 가능한 포맷으로 알고 있습니다.
SVG는 벡터들을 조합해 만든 이미지로 크기를 아무리 줄이거나 늘여도 화질이 깨지지 않습니다. 그러나 복잡한 이미지라면 용량을 많이 차지하게 됩니다. 
GIF는 256가지의 색상을 이용하기 때문에 화질이 JPG, PNG에 비해 좋은 편은 아닙니다만, 가볍다는 장점이 있습니다.

jpeg(제이팩)

웹 상에서 사진 등의 화상을 보관하고 전송하는 데 가장 널리 사용되는 파일 형식이다. 하지만 이 압축 방법은 문자, 선, 세밀한 격자 등 고주파 성분이 많은 이미지의 변환에서는 GIF나 PNG에 비해 불리하다.

webp : 용량 30%줄일 수 있는 이미지 포맷이다.그러나 IE에서는 사용할 수 없다.

margin collapsing 현상

margin이 겹칠때, 작은 margin이 무시되고, 제일 큰 margin 크기를 가진 블럭 기준으로 결합되는 현상
단, floating요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않는다.

일어나는 상황
1. 인접형제
인접형제 요소간의 바깥 여백은 서로 상쇄 ( 단 뒤쪽 형제가 floating 해제하는 경우 예외)
2. 부모와 자손 분리하는 콘텐츠가 없을때
부모와 자식 여백이 상쇄된다.
3. 빈 블럭
테두리, 안쪽 여백, 인라인 콘텐츠, height, min-height, max-height가 없으면 블록의 margin-top과 margin-bottom이 서로 상쇄된다.

(세 개 이상의 여백 사이의) 더 복잡한 여백 상쇄는 위의 기본 상황이 서로 결합되어 발생합니다.
위의 규칙은 바깥 여백이 0이어도 적용되므로, 두 번째 규칙을 만족하는 경우 부모의 바깥 여백이 0이건 아니건 자손의 바깥 여백은 부모 밖으로 나오게 됩니다.
음수 값을 가진 바깥 여백을 포함할 경우, 상쇄된 여백의 크기는 제일 큰 양수 여백과 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 합이 됩니다.
모든 바깥 여백이 음수 값을 가질 경우, 상쇄된 여백의 크기는 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 크기가 됩니다. 인접 요소와 중첩 요소 모두에 적용됩니다.
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

margin collapsing 현상은 마진 겹침 현상이라고도 합니다. 요소 둘이 붙어있을 경우, 마진을 서로의 방향으로 각각 적용하면 더 큰 마진만 적용되는 현상입니다. 예를 들어 div 두 요소가 위아래로 나란히 있을 경우, 위의 div에 margin-bottom: 30px, 아래의 div에 margin-top: 50px을 주면 두 div의 간격은 50px가 됩니다.

블록 요소의 상하단의 마진이 병합되는 현상으로, 마진의 크기는 마진 중 더 큰 값의 가진 값으로 병합된다. 해결 방법은 공간을 가진 요소를 사이에 넣거나, 자식 요소를 inline-block을 넣거나 부모 요소에 overflow hidden 주면 해결된다.

event delegation (이벤트 위임)에 관해 설명해주세요.

버블링을 이용해서 제어하는 방식

이벤트 위임은 부모 요소에 이벤트 핸들러를 등록하여 자손 요소 각각에 이벤트 핸들러를 등록하지 않고 한 번의 이벤트 핸들러 등록으로 자식 요소에서 일어난 이벤트를 처리할 수 있는 방법입니다.

부모 요소의 이벤트 핸들러 내에서 이벤트 객체의 target 프로퍼티가 실제로 이벤트가 일어난 요소를 가리키므로, 이를 통해 이벤트 위임을 구현할 수 있습니다.

하지만 target 프로퍼티는 부모 요소 자신 또는 이벤트를 감지하기 원하지 않는 다른 자손 요소들도 가리킬 수 있기 때문에 target 요소의 nodeName 프로퍼티를 비교하거나, 특정 클래스의 유무를 classList.contains를 통해 확인하여 이벤트를 감지할 요소를 특정해주어야 합니다.

이벤트가 발생했을 경우, 이벤트가 발생한 곳으로 하위계층으로 찾아들어가는 이벤트 캡처링 과 이벤트가 발생한곳에서 이벤트 리스너가 있는곳으로 상위계층으로 찾아가는 이벤트 버블링이 있습니다. 이런 전파를 통해 이벤트가 발생된 곳의 정보를 캡처링이나 버블링을 통해 리스너에게 전달하여 조작할 수 있게 하는 것이 이벤트 위임입니다.

클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요

클로져는 함수의 실행이 끝난 뒤에도 함수에 선언된 변수의 값을 접근할 수 있도록 만든 함수를 말합니다
함수는 블럭으로 둘러싸여 있고 하나의 스코프를 형성합니다. 함수 안에 선언된 변수는 함수 바깥에서 참조할 수 없으며, 함수가 실행된 후에는 더 이상 사용할 수 없습니다.
하지만 자바스크립트에서는 함수 리턴값을 통해 함수 안에 선언된 변수를 노출시킴으로서 클로져를 형성할 수 있지요.

클로저는 중첩 함수가 외부 함수보다 더 긴 생명 주기로 살아남아서 외부 함수 스코프 내의 변수를 참조하고 있는 함수를 말합니다. - 함수를 중첩하고 내부에 있는 중첩 함수가 외부 함수의 스코프에 있는 변수를 참조하도록 하고, 그리고 외부 함수에서 중첩 함수를 반환하도록 하면 외부 함수는 한 번 실행되고 생명 주기를 다 하지만, 중첩 함수는 반환값으로 다른 변수에 할당되어 계속 참조됩니다.

이 때 이 중첩 함수 내부에서 참조하고 있는 외부 함수의 변수는 계속 참조되기 때문에 가비지 컬렉터에 의해 제거되지 않습니다.

이 외부 함수의 변수는 오로지 중첩 함수 내부에서만 참조할 수 있으며, 외부에서는 절대 접근할 수 없습니다.

그래서 클로저를 사용하면 값을 안전하게 은닉할 수 있습니다.
왜 사용?

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

정보의 은닉화(encapsulation) , 전역변수의 사용을 억제 용도로 사용합니다.

스코프를 이용해서 변수의 접근 범위를 닫음으로서 사용 할 수 있습니다.

getter / setter함수 만들어서

다음 코드 중 1번과 2번의 차이점을 설명해주세요.

function Car(){};
1. var car = Car();
2. var car = new Car();
생성자 함수 new 이용한 것과 일반 생성의 차이는

1번은 Car 함수가 일반 함수로 호출이 되었고, 2번에서는 Car 함수가 생성자 함수로서 호출이 되었습니다. 일반 함수로 호출된 함수는 해당 함수 내부의 return 값을 반환하여 1번의 car 변수에는 undefined가 할당되고, 생성자 함수로서 호출된 함수는 인스턴스를 반환하여 2번의 car 변수에는 Car 객체가 할당됩니다.

new연산자를 사용하면 생성자 함수로, 객체타입 또는 내장 객체타입의 인스턴스를 생성합니다. 생성자 함수로 호출되면 함수 내부의 return문은 무시됩니다. 따라서 호출시 객체형식으로 출력됩니다. 하지만 일반함수는 객체가 아니므로 리턴에 아무런 값이 없기에undefined로 나오게 됩니다.

초록귤

초록색 귤이 노랑색으로 익어가듯, 실력이 익어가기 위해 노력하는 개발자 lahee입니다. 프론트엔드 개발자를 목표로 성장하고 있습니다.

이전 포스트