JavaScript 코드를 최적화하는 방법

JS를 작성하는 사람들은 모두 동일한 효과를 작성하는 방법이 여러 가지가 있다는 것을 알고 있습니다. 결과는 동일할 수 있지만 단계는 다를 수 있습니다. 그러나 효과를 작성했지만 오늘날의 개발 성능은 크게 저하되었습니다. , 스크립트 성능 향상이 점점 더 중요해지고 있습니다. JavaScript 코드를 최적화하는 방법은 무엇입니까? 두 점 사이에 가장 짧은 직선을 어떻게 그릴 수 있습니까? 오늘은 JavaScript 코드를 최적으로 작성하는 방법에 대한 요약을 제공하겠습니다.

전통적인 웹 페이지에는 많은 스크립트가 포함되어 있지 않으며 적어도 웹 페이지의 성능에 큰 영향을 미치지 않습니다. 그러나 웹 페이지가 점점 더 애플리케이션과 유사해짐에 따라 스크립트가 웹 페이지에 미치는 영향도 점점 더 커지고 있습니다. 웹 기술을 사용하여 점점 더 많은 애플리케이션이 개발됨에 따라 스크립트 성능 향상이 점점 더 중요해지고 있습니다. 데스크탑 애플리케이션은 일반적으로 컴파일러를 사용하여 소스 코드를 최종 바이너리로 변환합니다. 컴파일러는 최종 애플리케이션을 생성할 때 가능한 한 많은 성능을 최적화하는 데 시간을 보낼 수 있습니다. 웹 애플리케이션에는 그런 사치가 없습니다. 여러 브라우저, 플랫폼 및 아키텍처에서 실행해야 하기 때문에 완전히 사전 컴파일될 수 없습니다. 브라우저는 한 번에 하나씩 스크립트를 가져와 해석하고 컴파일하지만 최종 애플리케이션은 데스크톱 애플리케이션만큼 빠르게 로드되고 원활하게 실행되어야 합니다. 일반 데스크톱 컴퓨터부터 휴대폰까지 다양한 기기에서 실행될 것으로 예상된다.

브라우저는 이를 달성하는 데 꽤 능숙하며 Opera는 현재 브라우저에서 가장 빠른 스크립팅 엔진 중 하나를 보유하고 있습니다. 그러나 브라우저에는 웹 개발자가 주의해야 할 몇 가지 제한 사항도 있습니다. 웹 애플리케이션이 최대한 빠르게 실행되도록 하려면 루프를 교체하거나, 병합된 스타일을 세 개 대신 하나로 변경하거나, 실제로 실행되는 스크립트만 추가하는 것만큼 간단할 수 있습니다.

이 기사에서는 JavaScript, DOM 및 파일 로딩의 핵심 언어인 ECMAScript를 포함하여 웹 애플리케이션의 성능을 향상할 수 있는 몇 가지 변경 사항을 보여줍니다.

팁

ECMAScript

eval 또는 함수 생성자 사용을 피하세요

eval 다시 작성

함수가 필요하면 함수를 사용하세요

with를 사용하지 마세요

필요한 함수에서는 try-catch-finally를 사용하지 마세요 성능

eval 및 with 사용을 분리

전역 변수를 사용하지 마세요

객체의 암시적 교환에 주의하세요

성능이 필요한 함수에서는 for-in 사용을 피하세요

누적 형식을 사용하여 문자열 연결

기본 작업이 함수 호출보다 더 빠릅니다.

setTimeout() 및 setInterval()에 문자열 대신 함수 전달

DOM

다시 그리기 및 리플로우

리플로우 수 최소화

최소 리플로우

문서 트리 수정

보이지 않는 요소 수정

측정

한 번에 여러 스타일 변경

속도를 위한 부드러움

많은 수의 노드 검색 방지

XPath를 통해 속도 향상

DOM을 탐색하는 동안 수정 방지

스크립트에서 변수 사용 DOM 캐싱 값

문서 로딩

여러 문서에서 동일한 참조를 유지하지 마세요

빠른 기록 탐색

XMLHttpRequest를 사용하세요

동적으로