프로그래밍 「 자바스크립트 편」JavaScript 최적화: 더 빠른 코드를 위한 10가지 입증된 기술

님이 촬영 한 사진 NASA on Unsplash

JavaScript는 웹 개발의 초석이므로 성능은 웹 사이트의 전반적인 속도와 사용자 경험에 큰 영향을 미칩니다. 이 게시물에서는 JavaScript 성능을 최적화하기 위한 10가지 중요한 기술에 대해 자세히 알아보고 기본 및 고급 사례를 모두 다룹니다.

1. 지역 변수 사용

전역 변수의 사용을 줄이면 응용 프로그램의 수명 주기 동안 메모리에 남아 있는 JavaScript 성능이 향상될 수 있습니다. 함수 내에서 지역 변수를 사용하면 함수 실행이 완료되는 즉시 메모리를 확보할 수 있습니다.

// Instead of using global variables
var globalVar = 'I am Global';

// Use local variables inside functions
function useLocalVar() {
  var localVar = 'I am Local';
}

2. 애니메이션에 대한 RequestAnimationFrame

JavaScript 애니메이션은 더 매끄럽고 동기화된 애니메이션을 보장하는 대신 또는 를 사용하여 최적화할 수 있습니다.requestAnimationFramesetIntervalsetTimeout

function animate() {
  // Your animation logic
  requestAnimationFrame(animate);
}
animate();

3. 루프 최적화

루프의 각 반복에서 배열의 길이를 계산하지 마십시오. 대신 루프가 시작되기 전의 길이를 계산합니다.

var arr = [1, 2, 3, 4, 5];

// Cache the length first
var len = arr.length;
for (let i = 0; i < len; i++) {}

4. 조회를 위해 Map 또는 Set 사용

큰 데이터 세트의 경우 배열의 메서드를 사용하여 항목의 존재 여부를 확인하는 속도가 느려질 수 있습니다. 또는 조회 작업의 속도를 크게 높일 수 있습니다.indexOfMapSet

let mySet = new Set(['a', 'b', 'c']);

// Fast lookup
console.log(mySet.has('a'));  // true

5. 지연 로딩 사용

지연 로드는 페이지 로드 시 중요하지 않은 리소스의 로드를 지연시키는 기술입니다. 대신 이러한 리소스는 필요할 때 로드되어 초기 로드 시간을 줄입니다.

// Example of lazy loading an image
<img data-src="image.png" class="lazyload">

6. 사용을 피하십시오 eval()

JavaScript의 함수는 임의의 코드를 실행할 수 있으므로 심각한 보안 위험이 있습니다. 또한 JavaScript 컴파일러가 코드를 최적화할 수 없기 때문에 속도가 느립니다.eval()

// Avoid using eval()
// var result = eval('2 + 2');

// Do this instead
var result = 2 + 2;

7. 긴 작업에 웹 작업자 사용

웹 작업자는 격리된 스레드에서 실행됩니다. 결과적으로 '메인 스레드'가 차단되지 않고 실행될 수 있으므로 사이트의 응답성이 유지됩니다.

let worker = new Worker('worker.js');

8. 사용 이상 constletvar

const ES6에 도입 된 는 블록 범위이며 종종 보다 예측 가능합니다. 또한 JavaScript 엔진이 코드를 최적화할 수 있도록 하여 성능을 향상시킬 수 있습니다.letvarconst

// Instead of var
// var x = 1;

// Use let or const
let x = 1;

9. DOM 조작 줄이기

DOM에 액세스하고 변경하는 속도가 느릴 수 있습니다. DOM 참조를 캐싱하고 변경 내용을 일괄 업데이트하여 DOM 조작을 최소화합니다.

// Cache DOM reference
let myElement = document.getElementById('myElement');

// Now use myElement without querying the DOM again

10. JavaScript 파일 압축 및 축소

JavaScript 파일을 압축하고 축소하면 크기가 크게 줄어들어 로드 시간이 빨라질 수 있습니다.

# Example using UglifyJS
uglifyjs script.js -o script.min.js