[js] JS - 자바스크립트 성능 향상 위한 코드 작성법 (= JavaScript Performance)

목차

1. 반복문 내 활동 줄이기
2. DOM요소 접근 줄이기
3. DOM요소 개수 줄이기
4. 불필요한 변수 생성 피하기
5. JavaScript 로딩 지연시키기
6. with 키워드 사용 피하기
7. 적절한 데이터 구조 사용하기

반복문 내 활동 줄이기

 

반복문 내부의 모든 구문은 반복 실행되는데, 반복문 외부에 둘 수 있는 것은 되도록 반복문 밖에 배치하는 게 좋음.

 

---

[예제]

 

// 나쁜코드

for (let i = 0; i < arr.length; i++) {

 

// 좋은코드

let l = arr.length;

for (let i = 0; i < l; i++) {

DOM요소 접근 줄이기

 

여러 번 DOM요소에 접근하는 것보다 변수에 담아두고 사용하는 게 좋음.

 

---

[예제]

 

<p id="demo"></p>

<script>

const hz = document.getElementById("demo");

hz.innerHTML = "홈짱닷컴 Homzzang.com";

</script>

 

DOM요소 개수 줄이기

 

DOM요소 개수를 줄이면, 소형기기에서의 렌더링에 큰 도움됨.

 

불필요한 변수 생성 피하기

 

값을 저장 안 하면 불필요하게 변수 생성 자제.

 

---

[예제]

 

// 나쁜코드

let hz = site + " " + host;

document.getElementById("demo").innerHTML = hz;

 

// 좋은코드

document.getElementById("demo").innerHTML = site + " " + host;

 

JavaScript 로딩 지연시키기

 

1.

페이지 본문 하단에 스크립트를 배치하면 브라우저가 페이지를 먼저 로드 가능함.

 

2.

스크립트 다운로드하는 동안엔 브라우저는 다른 다운로드를 시작 안 함. 또한, 모든 구문 분석 및 렌더링 활동이 차단될 수 있음.

 

3.

HTTP 사양은 브라우저가 두 개 이상의 구성요소를 병렬로 다운로드하지 않아야 한다고 정의함.

 

4.

대안은 defer="true"를 스크립트 태그에서 사용하는 것임. 

---

PS. 아래 방법으로도 페이지 로드 후 페이지에 스크립트 추가 가능.

 

<script>

window.onload = function() {

  const element = document.createElement("script");

  element.src = "myScript.js";

  document.body.appendChild(element);

};

</script>

 

with 키워드 사용 피하기

 

• with 키워드는 속도에도 부정적이고, 범위(Scope)도 복잡하게 함.
• 엄격모드 (Strict mode)에서는 with 키워드 사용 허용 X

 

적절한 데이터 구조 사용하기

 

구현 로직에 최적인 데이터 구조 사용하면 속도 빨라짐.

 

---

[예제]

 

// 나쁜코드 (∵ 배열 길이에 따라 성능 저하 야기)

const colors = ["red", "blue", "green", "yellow"];

function isColorPresent(color) {

  return colors.indexOf(color) !== -1;

}

// 좋은코드 (∵ Set은 중복 허용 않는 데이터구조라 빠름.)

const colorsSet = new Set(["red", "blue", "green", "yellow"]);

function isColorPresent(color) {

  return colorsSet.has(color);

}