자바스크립트 성능
JavaScript 코드의 속도를 높이는 방법.
루프에서 활동 줄이기
루프는 프로그래밍에서 자주 사용됩니다.
for 문을 포함하여 루프의 각 문은 루프가 반복될 때마다 실행됩니다.
루프 외부에 배치할 수 있는 명령문 또는 할당은 루프 실행을 더 빠르게 만듭니다.
나쁜:
for (let i = 0; i < arr.length; i++) {
더 나은 코드:
let l = arr.length;
for (let i = 0; i < l; i++) {
잘못된 코드는 루프가 반복될 때마다 배열의 길이 속성에 액세스합니다.
더 나은 코드는 루프 외부의 length 속성에 액세스하고 루프를 더 빠르게 실행합니다.
DOM 액세스 줄이기
HTML DOM에 액세스하는 것은 다른 JavaScript 문에 비해 매우 느립니다.
DOM 요소에 여러 번 액세스할 것으로 예상되는 경우 한 번 액세스하고 로컬 변수로 사용합니다.
예시
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
DOM 크기 줄이기
HTML DOM의 요소 수를 작게 유지하십시오.
이렇게 하면 항상 페이지 로드가 향상되고 특히 작은 장치에서 렌더링(페이지 표시) 속도가 빨라집니다.
DOM을 검색하려는 모든 시도(예: getElementsByTagName)는 더 작은 DOM의 이점을 얻을 것입니다.
불필요한 변수 피하기
값을 저장할 계획이 아니라면 새 변수를 생성하지 마십시오.
종종 다음과 같이 코드를 바꿀 수 있습니다.
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
이것으로:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
자바스크립트 로딩 지연
스크립트를 페이지 본문 하단에 배치하면 브라우저가 페이지를 먼저 로드할 수 있습니다.
스크립트가 다운로드되는 동안 브라우저는 다른 다운로드를 시작하지 않습니다. 또한 모든 구문 분석 및 렌더링 활동이 차단될 수 있습니다.
HTTP 사양은 브라우저가 두 개 이상의 구성 요소를 병렬로 다운로드해서는 안 된다고 정의합니다.
대안은 defer="true"스크립트 태그에서 사용하는 것입니다. defer 속성은 페이지 구문 분석이 완료된 후 스크립트를 실행해야 하지만 외부 스크립트에서만 작동하도록 지정합니다.
가능하면 페이지가 로드된 후 코드로 페이지에 스크립트를 추가할 수 있습니다.
예시
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
와 함께 사용하지 마십시오
with키워드 를 사용하지 마십시오 . 속도에 부정적인 영향을 미칩니다. 또한 JavaScript 범위를 복잡하게 만듭니다.
with키워드는 엄격 모드에서 허용되지 않습니다 .