JS Performance

어떻게 하면 나의 JS code 실행 속도를 향상 시킬 수 있을까?

Reduce Activity in Loops

루프는 프로그래밍에서 자주 사용된다.

for 문을 포함하여 루프의 각 문은 루프가 반복될 때마다 실행다.

루프 외부에 배치할 수 있는 명령문 또는 할당은 루프 실행을 더 빠르게 만든다.

Bad:

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

Better Code:

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

저 Bad 코드는 루프가 반복될 때마다 배열의 길이 속성에 액세스한다.

저 Better 코드는 루프 외부의 length 속성에 액세스하고 루프를 더 빠르게 실행한다.

Reduce DOM Access

HTML DOM에 액세스하는 것은 다른 JavaScript 문에 비해 매우 느리다.

DOM 요소에 여러 번 액세스할 것으로 예상되는 경우 한 번 액세스하고 로컬 변수로 사용 해야한다.

Example

const obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Reduce DOM Size

HTML DOM의 요소 수를 작게 유지 해야한다.

이렇게 하면 특히 작은 장치에서 페이지 로딩이 항상 향상되고 렌더링(페이지 표시) 속도가 빨라진다.

DOM을 검색하려는 모든 시도(예: getElementsByTagName)는 더 작은 DOM의 이점을 얻을 것이다.

Avoid Unnecessary Variables

값을 저장할 계획이 아니라면 새 변수를 생성하지 말자.

종종 아래와 같이 코드를 바꿀 수 있다.

let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

document.getElementById("demo").innerHTML = firstName + " " + lastName;

Delay JavaScript Loading

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

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

HTTP 사양은 브라우저가 두 개 이상의 구성 요소를 병렬로 다운로드해서는 안 된다고 정의한다.

대안은 스크립트 태그에서 defer="true"를 사용하는 것이다. defer 속성은 페이지 구문 분석이 완료된 후 스크립트를 실행해야 하지만 외부 스크립트에서만 작동하도록 지정한다.

가능하면 페이지가 로드된 후 코드로 페이지에 스크립트를 추가할 수 있다.

Example

<script>
window.onload = function() {
  const element = document.createElement("script");
  element.src = "myScript.js";
  document.body.appendChild(element);
};
</script>

Avoid Using with

with 키워드를 사용하지 말자. 속도에 부정적인 영향을 미친다. 또한 JavaScript 범위를 복잡하게 만든다.

with 키워드는 strict mode에서 허용되지 않는다.