최적화(Optimization)

최적화란?

• 자원을 효율적으로 관리하여 홈페이지 화면을 더 빠르게 표현

tip

최적화를 하는 이유는?

• 사용자(이용자)에게 향상된 UX제공
• 수익 증가

성능 측정의 척도

• 메모리, 네트워크 트래픽, 백엔드 자원을 효과적으로 사용
• 빠르게 동작(시간)

시간

초기 구동 시간

• 초기 어플리케이션이 구동되는 시간

info

초기 구동 시간을 빠르게 하는 방법

• 다운로드하는 파일의 개수와 용량을 작게 유지
  • 이미지 Sprite 기법 이용
  • 최신 포맷의 이미지(WebP)나 폰트를 사용
  • 폰트 사용 빈도가 적을 경우 이미지 폰트를 사용
• minify를 이용하여 CSS,JS 파일 용량을 줄인다.
• 필요한 라이브러리, 프레임워크만 사용
• 우선 순위가 떨어지는 컨텐츠라면 레이지 로딩을 고려
• 구동시간을 자주 측정

tip

minify란?

프로그래밍 코드나 웹 리소스를 작게 만들기 위해 공백, 주석, 줄바꿈 등의 불필요한 요소를 제거하거나 줄이는 과정
파일 크기를 최소화, 어플리케이션의 로딩 속도를 향상, 코드 전송 시 필요한 대역폭을 줄이는 이점이 있다.
Vscode Extension에 minify를 이용하여 쉽게 사용가능

레이지 로딩이란?

<img> 태그의 loading 속성 중 lazy 값을 사용한다.
이미지가 (Viewport)내에 보이기 시작하기 전까지 이미지를 로드하지 않는다.
Viewport영역 내에 들어오는 순간에 이미지가 로드된다.
초기 페이지 로딩 시간을 단축, 사용자가 스크롤을 내리면서 필요한 이미지만 로드하여 네트워크 대역폭을 절약.

계산 시간

• 효율적이고 빠르게 동작할 수 있는 코드를 작성(알고리즘)

반응 시간

• 사용자의 행동에 얼마나 빠르게 반응하는 시간

info

반응 시간을 향상 시키기 위한 방법

• JS에서의 애니메이션 작업보단 CSS 애니메이션 작업을 권장
• Transform 속성을 사용
• repaint, reflow를 유발하는 속성을 사용자제
• requestAnimationFrame을 사용
• DOM 접근의 횟수, 업데이트를 줄이기 => DocumentFragment 사용

requestAnimationFrame

requestAnimationFrame이란?

브라우저가 애니메이션을 최적화하고, 비활성화된 탭 애니메이션에서는 동작을 하지 않는다.

note

방향키를 누르면 박스가 움직이는 코드

div {
  width: 50px;
  height: 50px;
  background-color: slateblue;
}

<div></div>

const move = document.querySelector("div");
let position_X = 0; //현재 x축의 위치
let position_Y = 0; //현재 y축의 위치
let direction = ""; //방향을 알기위해 받는 변수

document.addEventListener("keydown", (e) => {
  direction = e.key; //키를 눌렀을 때, 방향정보
});
document.addEventListener("keyup", (e) => {
  direction = ""; //멈췄을때, 입력값 초기화
});

function moving() {
  if (direction === "ArrowRight") position_X += 10;
  else if (direction === "ArrowLeft") position_X -= 10;
  else if (direction === "ArrowUp")
    position_Y -= 10; // 브라우저에서 Y축으로 올라가려면 부호가 반대
  else if (direction === "ArrowDown") position_Y += 10;
  move.style.transform = `translate(${position_X}px, ${position_Y}px)`; // div 태그에 transform 속성을 적용
  requestAnimationFrame(moving);
}
requestAnimationFrame(moving);

키보드 방향키를 위, 오른쪽, 아래, 왼쪽 눌렀을 때, 나오는 값은 e.key값이다.

document.addEventListener("keydown", (e) => {});
document.addEventListener("keyup", (e) => {});

document에 대한 이벤트 처리를 한 이유는 키보드 입력 이벤트의 처리는 HTML문서 요소에 등록해야 동작이 가능하기 때문이다.
window를 사용해도 똑같은 결과값이 나온다.

DocumentFragment

DocumentFragment란?

• 메모리상에서만 존재하는 DOM트리
• 휘발성(1회용) DOM트리

<main></main>

DocumentFragment없이 구현

const main = document.querySelector("main");

for (var i = 0; i < 10; i++) {
  let article = document.createElement("article");
  article.innerHTML = `<figure>
            <img
                src="https://cdn.pixabay.com/photo/2023/08/18/19/44/dog-8199216_1280.jpg"
                alt="">
            <figcaption>
                개가 방긋 웃고있다.
            </figcaption>
        </figure>`;
  main.appendChild(article);
}

DocumentFragment 구현

const main = document.querySelector("main");
const fragment = new DocumentFragment();

for (var i = 0; i < 10; i++) {
  let article = document.createElement("article");
  article.innerHTML = `<figure>
            <img
                src="https://cdn.pixabay.com/photo/2023/08/18/19/44/dog-8199216_1280.jpg"
                alt="">
            <figcaption>
                개가 방긋 웃고있다.
            </figcaption>
        </figure>`;
  fragment.appendChild(article);
}
main.appendChild(fragment);

위의 JS코드 결과는 똑같다. 어떤 차이가 있을까?

info

렌더링 성능 & DOM 조작 횟수

• DocumentFragment없이 구현
  • main.appendChild(article); 코드에서 반복문 마다 DOM조작이 하기 때문에 렌더링성능 떨어진다.
• DocumentFragment 구현
  • DocumentFragment를 생성해서 임시적으로 메모리를 생성해서 반복문 동작 후, 마지막 실제 DOM트리에 노드를 추가
  • 이로인해 DOM영역의 접근을 최소화하여 렌더링 성능이 향상

메모리

메모리 생명 주기

• 메모리 생명 주기 순서 메모리 할당(Allocate Memory) -> 메모리 사용(UseMemory) -> 메모리 해제(Release Memory)
• 메모리 할당: 프로그램이 사용할 수 있도록 운영체제가 메모리 할당
• 메모리 사용: 개발자가 코드 상에서 할당된 변수를 사용함으로써 읽기와 쓰기 작업으로 구성
• 메모리 해체: 프로그램에서 필요하지 않은 메모리 전체를 되돌려주어 다시 사용가능하게 만드는 단계

메모리 누수와 Garbage Collection

메모리 누수

• 프로그램이 필요하지 않은 메모리 공간을 계속해서 점유하는 현상의 의미

Garbage Collection

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

참조 카운팅(reference counting)

• 메모리에 존재하는 값을 몇개의 변수와 함수가 참조하고 있는지 살펴본다.
• 참조가 0이 되면 값을 메모리에서 삭제.

let me = { name: "JJamVa" }; // reference counting: 1
let you = me; //reference counting: 2

me = null; //reference counting: 1
you = null; //reference counting: 0

최적화 코딩 방법

배열, 객체

• 배열이나 객체의 데이터를 수정 작업이 필요할 경우, 원본의 데이터는 유지하고 새로운 데이터를 생성하여 변경

엄격모드(strict mode) 사용

• 엄격모드를 통해 많은 에러를 줄일 수 있다.

tip

엄격모드(strict mode)의 특징

• 선언하지 않은 변수에 값을 할당 불가능
• 읽기 전용 객체에 값을 할당하면 에러가 발생
• 지울수 없는 값을 지우려고 하면 에러가 발생
• 함수 Parameter에 중복된 이름을 사용 불가능

일치연산자 사용

• JavaScript에서는 ==와 ===가 존재
• 더 완벽한 값비교를 하기위해 === 사용을 권장

info

==와 ===의 차이점

• ==(느슨한 비교): 값을 비교할 경우 자동으로 형변환이 이루어진다.
• ===(엄격한 비교): 값과 데이터 타입을 모두 비교

console.log(1 == "1"); //true
console.log(2 == "02"); //true
console.log("" == false); //true 빈문자열은 false다.
console.log([] == false); //true 빈배열은 false다.
console.log(null == undefined); //true