자바스크립트에서 성능향상 및 메모리를 위한 방법들은?

자바스크립트에서 성능향상을 위한 방법으로 무엇이 있을까요? 아래는 필요한 성능 개선 방법들을 요약한 것입니다.


- 자바스크립트 엔진에서 마지막 위치를 찾지 않도록 모두 세미콜론(;)을 사용하여 종료할 것
- 전역 변수를 피할 것
- 메모리 leak를 피할 것

- 자식노드의 교체시 메모리 문제 발생할 수 있음
- 엘리먼트의 조작이 많은 경우 innerHTML을 사용하는 방법이 DOM 생성시 파싱되므로 더 효율적일 수 있음
- 텍스트 노드에 대한 변경일 경우 innerHTML, outerHTML이 아닌 innerText, outerText를 사용할 것
- DOM을 조회하는 코드는 가급적 변수를 사용하여 횟수를 줄일 것

- 이벤트 버블링, 캡쳐링을 활용하여 해당 요소보다는 부모 요소를 사용하여 호출할 것
- for문 switch문을 사용할 것
- for 등의 루프보다는 함수를 반복 호출할 것(호출 횟수가 제한적인 경우)
- DOM 파싱을 위해 innerHTML을 활용할 것
- 이벤트를 지연시키는 코드를 사용할 것


특히 배포할 시기에 필요한 작업들이 있습니다. 배포시점에 아래 과정을 통하여 성능 개선이 가능합니다.

# 배포 과정에 필요한 것
- 파일을 압축할 것
- 동일 타입의 파일을 하나로 묶어 호출하도록 할 것(Script, CSS)
- 주석을 제거할 것
- 유효성 검사(Linting)를 실시할 것