JavaScript 성능

JavaScript 코드를 가속화하는 방법

루프 내의 활동을 줄이세요

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

루프가 반복할 때마다, 루프 내의 모든 문장, 포함하여 for 모두 실행됩니다.

루프 밖에 위치할 수 있는 문장이나 할당은 루프가 더 빨리 실행되도록 합니다.

나쁜 코드:

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

좋은 코드:

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

루프의 각 반복에서, 나쁜 코드는 배열의 length 속성.

좋은 코드는 루프 밖에서 접근합니다 length 속성을 사용하여 루프가 더 빨리 실행됩니다.

DOM 접근을 줄이세요

JavaScript와 비교했을 때, HTML DOM에 접근하는 것은 매우 느리습니다.

DOM 요소에 여러 번 접근할 예정이라면, 한 번만 접근하고 그것을 로컬 변수로 사용하세요:

예제

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

직접 시험해 보세요

DOM 규모 축소

가능한 한 HTML DOM에서의 요소 수를 최소화하십시오.

이렇게 하면 항상 페이지 로드가 증가하고, 렌더링(페이지 표시)이 빨라집니다. 특히 작은 장치에서 더욱 그렇습니다.

DOM을 검색하려는 모든 시도(예: getElementsByTagName소형 DOM에 이익을 받습니다.

불필요한 변수를 피하십시오

저장할 계획이 없는 값을 저장하지 않는 새로운 변수를 생성하지 마세요.

보통 다음과 같은 코드를 대체할 수 있습니다:

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

이 코드를 사용하세요:

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

JavaScript 로드 지연

페이지 하단에 스크립트를 배치하여 브라우저가 먼저 페이지를 로드하도록 합니다.

스크립트가 다운로드될 때, 브라우저는 다른 다운로드를 시작하지 않습니다. 또한 모든 분석 및 렌더링 활동이 블록될 수 있습니다.

HTTP 규범은 브라우저가 최대 두 가지 요소를 병행으로 다운로드하지 않도록 정의합니다.

스크립트 태그에서 defer="true".defer 속성은 스크립트가 페이지가 분석되고 후에 실행되도록 정의합니다. 하지만 이는 외부 스크립트에만 적용됩니다.

가능하다면, 페이지가 로드되면 코드를 통해 페이지에 스크립트를 추가할 수 있습니다:

예제

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

with 사용을 피해 주세요

사용을 피해 주세요 with 키워드. 이는 속도에 부정적인 영향을 미칩니다. 또한 JavaScript 스코프를 혼란스럽게 만들 수 있습니다.

strict 모드에서허용되지 않음 with 키워드.