JavaScript 성능

웹 성능은 로드 시간과 실행 중 사용자가 느끼는 경험 및 경험을 객관적으로 측정합니다.

웹 성능은 웹사이트 로드, 상호작용 및 응답에 필요한 시간, 그리고 사용자 상호작용 과정에서 내용의 원활성입니다.

지연, 애플리케이션 크기, DOM 노드 수, 보내는 리소스 요청 수, JavaScript 성능, CPU 부하 등 포함하여 많은 기능이 성능에 영향을 미칩니다.

웹 성능을 어떻게 높일 수 있을까요?

루프 활동을 줄이기

루프 밖에 두거나 할당하는 문장은 루프가 더 빠르게 실행되도록 합니다.

다음 예제에서, 각 루프마다 배열의 length 속성에 접근합니다:

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

다음 예제에서, 우리는 루프 밖에서 length 속성에 접근하고 루프가 더 빠르게 실행되도록 합니다:

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

DOM 접근 효율성을 높이기

다른 JavaScript 문장에 비해, HTML DOM에 접근하는 속도가 매우 느립니다.

DOM 요소를 여러 번 접근할 필요가 있으면, 한 번 접근하고 지역 변수로 사용하세요.

JavaScript를 페이지 끝에 배치하여

스크립트를 페이지 본문의 끝에 배치하여 브라우저가 먼저 페이지를 로드할 수 있도록 합니다.

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

스크립트 태그에서 사용할 수 있는 다른 방법은defer="true". 이지연이 스크립트가 페이지 후에 실행된 경우, 특정 속성이 이미 분석되었지만 외부 스크립트에만 적용됩니다.

with 키워드를 사용하지 마세요

with 키워드는 많은 점을 제한하기 때문에 "부정적인 키워드"로 간주됩니다.

with를 사용하면 로컬 속성 처리 과정을 간소화하지만, with를 사용하면 다른 범위에서 변수를 찾는 데 비용이 발생합니다.

strict 모드에서는 키워드를 사용할 수 없습니다.

최소한의 HTTP 요청

외부 파일을 조합하고 HTML 페이지에 직접 JavaScript를 포함하여 페이지 표시의 HTTP 요청을 최소화합니다.

각각의 유일한 HTTP 접속마다 많은 지연이 발생합니다.

같은 스크립트를 두 번 사용하지 마세요

반복된 스크립트는 성능에的重大한 영향을 미칩니다. 반복된 스크립트는 HTTP에서 불필요한 요청을 생성하며, 특히 IE 브라우저에서 더욱 그렇습니다.

eval()를 사용하지 마세요

이러한 경우eval()함수는 어떤 코드를 실행하는 데 좋은 방법이지만 eval 함수에 전달되는 각 문자열은 반드시 즉시 해석하고 실행해야 합니다. eval 함수 호출에 도달할 때마다 비용이 발생합니다.