자바스크립트는 웹 개발에 필수적입니다. 이 언어는 웹사이트에서 볼 수 있는 대부분의 인터랙티브 기능과 애니메이션의 기반이 됩니다. 하지만 자바스크립트 코드가 잘못 작성되면 웹사이트 속도가 느려질 수도 있습니다. 비효율적인 코드로 인해 로딩 시간이 느려지고 렌더링 속도가 느려질 수 있습니다.
웹사이트의 속도와 성능을 개선하려면 다음 방법을 채택하세요.
로컬에서 변수 정의하기
프로그래머는 스코핑이 어떻게 작동하는지 알아야 합니다. 자바스크립트에는 로컬 변수와 전역 변수의 두 가지 유형의 변수가 있습니다.
로컬 변수는 함수 블록 내에서 선언된 변수입니다. 범위는 선언된 함수 내에서만 유지됩니다. 전역 변수는 스크립트 전체에서 액세스할 수 있는 변수입니다. 전역 변수의 경우 범위는 프로그램 전체에 걸쳐 유지됩니다.
변수에 액세스하려고 할 때마다 브라우저는 범위 조회라는 작업을 수행합니다. 브라우저는 변수에 대한 가장 가까운 범위를 확인하고 변수를 찾을 때까지 계속 조회합니다. 따라서 프로그램에 스코프 체인이 많을수록 현재 스코프를 넘어 변수에 액세스하는 데 시간이 오래 걸립니다.
따라서 항상 실행 컨텍스트에 가깝게 변수를 정의하는 것이 가장 좋습니다. 전역 변수는 스크립트 전체에서 사용되는 데이터를 저장하려는 경우와 같이 드문 경우에만 사용하세요. 이렇게 하면 프로그램의 범위 수가 줄어들어 성능이 향상됩니다.
자바스크립트 비동기 로드
자바스크립트는 단일 스레드 프로그래밍 언어입니다. 즉, 한 함수가 실행되면 다른 함수가 실행되기 전에 끝까지 실행되어야 합니다. 이러한 아키텍처로 인해 코드가 스레드를 차단하여 앱이 멈출 수 있는 상황이 발생할 수 있습니다.
스레드의 성능을 원활하게 유지하려면 시간을 낭비하는 특정 작업을 비동기적으로 실행해야 합니다. 작업이 비동기식으로 실행되면 스레드의 처리 능력을 모두 차지하지 않습니다. 대신 함수는 이벤트 대기열에 합류하여 다른 모든 코드가 실행된 후에 실행됩니다.
API 호출은 해결하는 데 시간이 걸리기 때문에 비동기 패턴에 적합합니다. 따라서 스레드를 보류하는 대신 fetch API와 같은 프로미스 기반 라이브러리를 사용하여 데이터를 비동기적으로 가져올 수 있습니다. 이렇게 하면 브라우저가 API에서 데이터를 검색하는 동안 다른 코드를 실행할 수 있습니다.
비동기 프로그래밍의 복잡성을 이해하면 애플리케이션의 성능을 향상시킬 수 있습니다.
불필요한 루프 피하기
자바스크립트에서 루프를 사용하면 주의하지 않으면 비용이 많이 들 수 있습니다. 항목 모음을 순환하면 브라우저에 많은 부담을 줄 수 있습니다.
코드에서 루프를 피할 수는 없지만, 가능한 한 루프를 적게 사용해야 합니다. 컬렉션을 반복할 필요가 없는 다른 기술을 사용할 수 있습니다.
예를 들어, 루프를 반복할 때마다 배열의 길이를 읽는 대신 다른 변수에 배열의 길이를 저장할 수 있습니다. 루프에서 원하는 결과를 얻으면 즉시 루프에서 벗어나세요.
자바스크립트 코드 축소
축소는 자바스크립트 코드를 최적화하는 데 효과적인 방법입니다. 최소화 도구는 원시 소스 코드를 더 작은 크기의 프로덕션 파일로 변환합니다. 주석을 제거하고, 불필요한 구문을 다듬고, 긴 변수 이름을 줄입니다. 또한 사용하지 않는 코드를 제거하고 기존 함수를 최적화하여 더 적은 줄을 차지하도록 합니다.
최소화 도구의 예로는 Google 클로저 컴파일러, UglifyJS, Microsoft AJAX 최소화 도구가 있습니다. 코드를 검사하고 최적화할 방법을 찾아 수동으로 코드를 축소할 수도 있습니다. 예를 들어 코드의 if 문을 단순화할 수 있습니다.
Gzip으로 대용량 파일 압축
대부분의 클라이언트는 대용량 JavaScript 파일을 압축 및 압축 해제할 때 Gzip을 사용합니다. 브라우저가 리소스를 요청하면 서버는 이를 압축하여 응답으로 더 작은 파일을 반환할 수 있습니다. 클라이언트가 파일을 받으면 압축을 해제합니다. 전반적으로 이 접근 방식은 대역폭을 절약하고 지연 시간을 줄여 애플리케이션 성능을 향상시킵니다.
DOM 액세스 최소화
DOM을 업데이트할 때마다 브라우저가 새로 고쳐야 하므로 DOM에 액세스하면 애플리케이션 성능에 영향을 미칠 수 있습니다. DOM 액세스를 가능한 최소 빈도로 제한하는 것이 가장 좋습니다. 이를 위한 한 가지 방법은 브라우저 객체에 대한 참조를 저장하는 것입니다.
실제 DOM에 푸시하기 전에 가상 DOM을 변경하는 React와 같은 라이브러리를 사용할 수도 있습니다. 그 결과 브라우저는 전체 페이지를 새로 고치는 대신 업데이트가 필요한 애플리케이션의 일부만 업데이트합니다.
불필요한 자바스크립트 로드 지연
페이지가 제시간에 로드되는 것이 중요하지만 모든 기능이 초기 로드에서 작동할 필요는 없습니다. 클릭 가능한 버튼과 자바스크립트 코드를 참조하는 탭 메뉴가 있다고 가정하면 페이지가 로드될 때까지 두 기능을 모두 지연시킬 수 있습니다.
이 방법을 사용하면 처리 능력을 확보하여 필요한 페이지 요소를 제시간에 렌더링할 수 있습니다. 페이지의 초기 표시를 지연시킬 수 있는 코드 컴파일을 지연시킵니다. 그런 다음 페이지 로딩이 완료되면 기능 로딩을 시작할 수 있습니다. 이렇게 하면 사용자가 빠른 로딩 시간을 즐기고 제시간에 요소와 상호 작용을 시작할 수 있습니다.
헤드 요소에 최소한의 CSS와 JavaScript를 포함하면 즉시 로드할 수 있습니다. 그런 다음 보조 코드는 별도의 .css 및 .js 파일에 저장할 수 있습니다. 이 기법을 사용하려면 DOM의 작동 원리에 대한 적절한 지식이 필요합니다.
CDN을 사용하여 자바스크립트 로드
콘텐츠 전송 네트워크를 사용하면 페이지 로드 시간을 단축하는 데 도움이 되지만 항상 효과적인 것은 아닙니다. 예를 들어 방문자의 국가에 로컬 서버가 없는 CDN을 선택하면 이점을 누릴 수 없습니다.
이 문제를 해결하려면 도구를 사용하여 여러 CDN을 비교하고 사용 사례에 가장 적합한 성능을 제공하는 CDN을 결정할 수 있습니다. 라이브러리에 가장 적합한 CDN을 알아보려면 cdnjs 웹사이트를 확인하세요.
메모리 누수 제거
메모리 누수는 애플리케이션의 성능에 부정적인 영향을 미칠 수 있습니다. 메모리 누수는 로드된 페이지가 점점 더 많은 메모리를 차지할 때 발생합니다.
메모리 누수의 예로는 애플리케이션을 오래 사용한 후 브라우저 속도가 느려지기 시작하는 경우를 들 수 있습니다.
Chrome 개발자 도구를 사용하여 애플리케이션의 메모리 누수를 감지할 수 있습니다. 이 도구는 성능 탭에 타임라인을 기록합니다. 많은 메모리 누수는 DOM 요소 제거로 인해 발생합니다. 가비지 수집기는 이러한 요소를 참조하는 모든 변수가 범위를 벗어난 경우에만 메모리를 해제합니다.
문제 감지 도구 사용
라이트하우스, 구글 페이지스피드 인사이트, 크롬과 같은 도구를 사용하면 문제를 감지하는 데 도움이 될 수 있습니다. Lighthouse는 접근성, 성능 및 SEO 문제를 확인합니다. 구글 페이지스피드는 자바스크립트를 최적화하여 애플리케이션의 성능을 향상시키는 데 도움을 줄 수 있습니다.
Chrome 브라우저는 키워드에서 F12를 클릭하여 전환할 수 있는 개발자 도구 기능을 제공합니다. 성능 분석을 사용하여 네트워크를 켜고 끄고 CPU 사용량을 확인할 수 있습니다. 또한 다른 메트릭을 확인하여 웹사이트에 영향을 미치는 문제를 발견할 수도 있습니다.
Google 개발자 도구로 문제 해결 방법 알아보기
웹 개발자는 웹 브라우저에서 많은 작업을 하게 될 것입니다. 대부분의 브라우저에는 웹사이트 문제 해결에 도움이 되는 개발자 도구 모음이 함께 제공됩니다. 구글 크롬 개발자 도구 기능에는 여러분을 도와줄 다양한 기능이 있습니다.