페이지로드 시간을 1000 밀리 초 미만으로 제어해야합니다. 이 시간이 지나면 사용자가 참을성이 없다고 느끼기 시작합니다. 이것은 페이지를 화면에 그려서 스크롤 할 수있는 것이 아니라 대화식이되기위한 다소 어려운 목표입니다. 실제로, 시간은 짧습니다 :
기본적으로 빠른 빠른
현대적인 모범 사례 (2017 Chrome Dev Summit)
실제로 목표는 5 초의 상호 작용 시간입니다. 이것은 Chrome이 등대 감사에서 사용하는 메트릭입니다.
우리는 지표를 알고 있기 때문에 몇 가지 통계를 살펴 보겠습니다.
모바일 웹 사이트가 3 초 이상로드되면 53%의 방문이 버려집니다. -
두 사람 중 하나는 페이지가 2 초 안에로드되기를 희망합니다.
3G 네트워크에서 모바일 웹 사이트의 77%가 10 초에 걸쳐로드됩니다. -
3G 네트워크에서 모바일 웹 사이트의 평균 로딩 시간은 19 초입니다.
-
Addy Osmani가 제공 한 추가 정보 :
데스크탑 (케이블 사용)에서 상호 작용하는 데 8 초가 걸리고 모바일 장치 (3G를 통해 Moto G4)에서 16 초가 걸립니다. -
중앙값의 경우, 개발자는 410KB의 GZIP 압축 JS 코드를 그의 페이지에 제공했습니다.
당신은 충분히 우울하다고 느끼십니까? 매우 좋은. 시작하고 웹을 수정합시다. ✊ <.>
컨텍스트는 중요합니다
주요 병목 현상은 웹 사이트를로드하는 데 걸리는 시간임을 알 수 있습니다. 특히 JavaScript 다운로드, 구문 분석, 컴파일 및 실행 시간입니다. JavaScript 코드가 적고 지능적으로로드하는 것 외에는 할 일이 없습니다.
그러나 웹 사이트를 시작하는 것 외에 코드가 실제로 수행하는 작업은 어떻습니까? 성능 개선이 있어야합니다.
코드를 파헤 치기 전에 건축중인 것을 고려하십시오. 프레임 워크 또는 vdom 라이브러리를 구축하고 있습니까? 코드가 초당 수천 개의 작업이 필요합니까? 사용자 입력 및/또는 애니메이션을 처리하기위한 시간 약화 라이브러리를 작성하고 있습니까? 그렇지 않은 경우 시간과 에너지를보다 효과적인 장소로 전환해야 할 수도 있습니다. -
이것은 고성능 코드를 작성하는 것이 중요하지 않다고 말하는 것이 아니라, 특히 미세 최적화에 대해 이야기 할 때 전반적인 상황에 거의 영향을 미치지 않는다고 말하는 것이 아닙니다. 따라서 스택 오버 플로우의 루프에 대한 .map 대 .foreach vs에 대한 논쟁을 시작하고 jsperf.com의 결과를 비교하기 전에 나무뿐만 아니라 숲을 볼 수 있는지 확인하십시오. 종이에서 50K OPS/S는 1K OPS/S보다 50 배 더 잘 들릴 수 있지만 대부분의 경우에는 아무런 차이가 없습니다.
- 분석, 컴파일 및 실행
기본적으로, 대부분의 비 높은 성능 JS의 문제는 실행중인 코드 자체가 아니라 코드가 실행되기 전에 수행 해야하는 모든 단계입니다.
우리는 여기에서 추상화 수준에 대해 이야기하고 있습니다. 컴퓨터의 CPU는 기계 코드를 실행합니다. 컴퓨터에서 실행되는 대부분의 코드는 컴파일 된 이진 형식입니다. (오늘날 모든 전자 응용 분야에 대해 생각하면서, 나는 코드 프로그램이 아닌
에 대해 이야기하고 있습니다.) 이것은 모든 OS 수준의 추상화를 제외하고는 하드웨어에서 기본적으로 실행된다는 것을 의미합니다. 준비없이.
JavaScript는 사전 컴파일되지 않았습니다. 읽기 가능한 코드 형식으로 브라우저에 도착하며 모든 의도와 목적을 위해 JS 프로그램의 "운영 체제"입니다.
코드는 먼저 구문 분석해야합니다. 즉, 컴퓨터가 컴퓨터에 의해 색인화 될 수있는 구조로 읽고 변환해야합니다. 그런 다음 장치/브라우저에서 실행하기 전에 바이트 코드로 컴파일하고 마지막으로 기계 코드로 컴파일하십시오. 언급해야 할 또 다른 중요한 것은 JavaScript가 단일 스레드이며 브라우저의 기본 스레드에서 실행된다는 것입니다. 이것은 한 번에 하나의 프로세스 만 실행할 수 있음을 의미합니다. DevTools 성능 타임 라인이 CPU를 100%로 유지하는 노란색 피크로 가득 차면, 긴/떨어진 프레임, 말더듬 스크롤 및 모든 종류의 다른 성가신 것들에 빠지게됩니다.
Paul Lewis : 모든 것이 중요 할 때 아무것도 중요하지 않습니다! .
따라서 JS가 작동하기 전에이 모든 작업을 수행해야합니다. Chrome의 V8 엔진에서 구문 분석 및 컴파일은 총 JS 실행 시간의 최대 50%를 차지합니다.
Addy Osmani : JavaScript 시작 성능. 
이 섹션에서 기억해야 할 두 가지 사항 :
반드시 선형은 아니지만 JS 파싱 시간은 패킷 크기에 비례합니다. JS 코드의 양이 작을수록 좋습니다.
당신이 사용하는 모든 JS 프레임 워크 (반응, vue, angular, preact ...)는 또 다른 추상화 계층입니다 (예 : svelte와 같이 사전 컴파일되지 않는 한). 패키지 크기를 증가시킬뿐만 아니라 브라우저와 직접 대화하지 않기 때문에 코드가 느려집니다.
는 서비스 작업자 스레드를 사용하여 백그라운드에서 작업을 실행하여 다른 스레드에서 ASM.JS를 사용하여 컴퓨터 지침으로 컴파일하기 쉬운 코드를 작성하는 등이를 완화하는 방법이 있습니다. 그러나 이것은 또 다른 주제입니다.
그러나 당신이 할 수있는 일은 모든 것에 JS 애니메이션 프레임 워크를 사용하지 않고 드로잉과 레이아웃을 유발하는 것을 이해하는 것입니다. 이러한 라이브러리는 일반 CSS 전환 및 애니메이션이 애니메이션을 구현하는 데 절대적으로 불가능한 경우에만 사용됩니다.
CSS 전환, 합성 특성 및 requestAnimationFrame ()을 사용할 수 있더라도 메인 스레드에서 여전히 JS에서 실행 중입니다. 그들은 기본적으로 16 밀리 초마다 인라인 스타일로 DOM을 때리게합니다. 애니메이션을 부드럽게 유지하려면 모든 JS를 프레임 당 8 밀리 초 이내에 실행할 수 있는지 확인해야합니다.
반면에 CSS 애니메이션 및 전환은 기본 스레드 밖으로 실행됩니다. 효율적으로 구현되면 릴레이/리판을 유발하지 않고 GPU에서 실행됩니다.
로드 또는 사용자 상호 작용 중에 대부분의 애니메이션이 실행되면 웹 애플리케이션에 필요한 호흡 공간을 제공 할 수 있습니다.
웹 애니메이션 API는 다가오는 기능 세트로, 메인 스레드 외부에서 고성능 JS 애니메이션을 수행 할 수 있지만 현재 CSS 전환 및 플립과 같은 기술을 고수하십시오. -
뒷면 크기는 중요합니다
이제 포장에 관한 것입니다. 바우어와 끝에
- 마크의 시대가 지나간 마크 전에 수십 개의 마크.
이제 NPM에서 볼 수있는 반짝이는 새 장난감을 설치하고 웹 팩을 사용하여 거대한 1MB JS 파일로 번들링하고 데이터 요금제를 제한하면서 사용자 브라우저에서 속도가 느려집니다.
JS 코드의 양을 줄이려고 노력하십시오. 프로젝트에는 전체 Lodash 라이브러리가 필요하지 않을 수 있습니다. JS 프레임 워크를 절대적으로 사용해야합니까? 그렇다면 반응의 1/20 미만인 preact 또는 hyperhtml과 같은 React 이외의 다른 프레임 워크 사용을 고려 했습니까? Tweenmax가 최고 애니메이션으로 스크롤을 구현하려면 Tweenmax가 필요합니까? NPM 및 프레임 워크에서 구성 요소를 분리하는 편의성은 단점을 가져옵니다. 개발자가 문제를 해결하는 첫 번째 방법은 더 많은 JavaScript 코드를 추가하는 것입니다. 망치 만있을 때 모든 것이 못처럼 보입니다.
잡초를 가지 치기 잡초를 마치고 JS 코드의 양을 줄인 후에는 더 를 더 똑똑하게 전달하십시오. 필요할 때 필요한 것을 전달하십시오.
Webpack 3에는 코드 세그먼트 화 및 동적 가져 오기라는 Amazing
기능이 있습니다. 모든 JS 모듈을 단일 app.js 패키지로 번들링하는 대신 import () 구문을 사용하여 코드를 자동으로 분할하여 비동기로로드 할 수 있습니다.
또한 혜택을 얻기 위해 프레임 워크, 구성 요소 및 클라이언트 라우팅을 사용할 필요가 없습니다. 모든 페이지에 위치 할 수있는 .mega-widget을 지원하는 복잡한 코드가 있다고 가정합니다. 메인 JS 파일에 다음을 작성하면됩니다.
앱이 페이지에서 위젯을 찾으면 필요한 보조 코드를 동적으로로드합니다. 그렇지 않으면 모든 것이 정상입니다.
또한 WebPack은 자체 런타임이 작동해야하며 생성하는 모든 .js 파일에 주입합니다. CommonChunks 플러그인을 사용하는 경우 다음 방법을 사용하여 런타임을 자체 블록으로 추출 할 수 있습니다.
는 런타임을 다른 모든 블록에서 자체 파일로 제거합니다.이 경우 runtime.js라고합니다. 메인 JS 패키지 앞에로드되어 있는지 확인하십시오. 예를 들면 :
그러면 코드와 폴리 필드를 번역하는 주제가 있습니다. Modern (ES6) JavaScript를 작성하는 경우 Babel을 사용하여 ES5 호환 코드로 변환 할 수 있습니다. 번역은 모든 중복성으로 인해 파일 크기를 증가시킬뿐만 아니라 복잡성을 증가시키고 기본 ES6 코드에 비해 성능을 줄입니다.
그 외에도 Babel-Polyfill 패키지와 Whatwg-fetch를 사용하여 이전 브라우저에서 누락 된 기능을 패치 할 수도 있습니다. 그런 다음 Async/Await을 사용하여 코드를 작성하는 경우 발전기를 사용하여 재생기 러티 타임을 포함하도록 변환해야합니다.…
키는 JS 패키지에 거의 100 킬로바이트의 데이터를 추가한다는 것입니다.이 패키지는 파일 크기가 엄청날뿐만 아니라 구식 브라우저를 지원하기 위해 구문 분석 및 실행 비용이 크다는 것입니다.
그러나 최신 브라우저를 사용하는 사용자를 처벌하는 것은 의미가 없습니다. 내가 사용하는 한 가지 방법과 Philip Walton 이이 게시물에서 소개 한 방법은 두 개의 별도 패키지를 만들어 조건부로로드하는 것입니다. Babel은 Babel-Preset-Env를 사용하여 쉽게 수행합니다. 예를 들어, IE 11을 지원하는 패키지 하나와 최신 버전의 최신 브라우저 용 PolyFill이 포함되지 않은 다른 패키지가 있습니다.
비효율적이지만 효과적인 방법은 다음을 인라인 스크립트에 넣는 것입니다.
브라우저가 비동기 기능을 평가할 수없는 경우 이전 브라우저라고 가정하고 Polyfill이 포함 된 패키지 만 제공합니다. 그렇지 않으면 사용자는 간단하고 현대적인 버전을 얻게됩니다.
결론
if (document.querySelector('.mega-widget')) {
import('./mega-widget');
}로그인 후 복사
저가형 장치 및 실제 네트워크 환경에서 웹 사이트 성능을 테스트해야합니다. 귀하의 웹 사이트는 최대한 빨리로드하고 상호 작용해야합니다. 이는 JS 코드의 양을 줄이고 최대한 빨리로드 속도를 높이는 것을 의미합니다. 코드는 항상 압축되고, 더 작고, 패키지를 쉽게 관리하기 쉽고, 가능한 경우 비동기 적으로로드해야합니다. 서버 측에서는 더 빠른 병렬 전송을 위해 HTTP/2가 활성화되어 있는지 확인하고 GZIP/Brotli 압축을 사용하여 JS 전송 크기를 크게 줄입니다.
이것에 대해 말하면, 나는 다음 트윗으로 끝내고 싶습니다 :
나는 이것을 달성하기 위해 많은 노력을 기울여야합니다. 그러나 진지하게, 친구들, 이제 프레임 워크를 버리고 브라우저가 얼마나 빨리있을 수 있는지 알아야합니다.
- Alex Russell (@slightlylate) 2016 년 9 월 15 일
JavaScript 성능 최적화에 대한 FAQS
어떤 일반적인 JavaScript 성능 트랩을 피해야합니까?
JavaScript 성능 문제는 종종 비효율적 인 코딩 관행에서 비롯됩니다. 여기에는 과도한 DOM 작업, 메모리 누출 및 불필요한 계산이 포함될 수 있습니다. 이러한 문제를 피하려면 JavaScript가 어떻게 작동하는지 이해하고 효율적인 코딩 관행을 사용하는 것이 중요합니다. 예를 들어, 글로벌 변수의 사용을 제한하고 이벤트 대의원을 사용하여 이벤트를 효율적으로 처리하고 () 및 Eval ()와 함께 사용하지 않으므로 성능 문제를 일으킬 수 있습니다.
성능을 향상시키기 위해 JavaScript 루프를 최적화하는 방법은 무엇입니까?
루프는 JavaScript의 일반적인 기능이지만 올바르게 최적화되지 않으면 성능 문제의 원인이 될 수도 있습니다. 루프를 최적화하는 한 가지 방법은 루프 내에서 수행 된 작업을 최소화하는 것입니다. 예를 들어, 각 반복에서 배열의 길이를 계산하는 대신 루프가 시작되기 전에 한 번 계산하십시오. 또 다른 방법은 필요에 따라 가장 효율적인 루프를 사용하는 것입니다. 예를 들어, foreach () 메소드는 루프의 전통적인 것보다 느릴 수 있습니다.
JavaScript 향상은 성능에 어떤 영향을 미칩니 까?
JavaScript에서 메모리 누출을 방지하는 방법은 무엇입니까?
더 이상 필요하지 않은 메모리가 해제되지 않으면 메모리 누출이 발생하여 시간이 지남에 따라 성능이 떨어집니다. JavaScript에서 메모리 누출의 일반적인 원인에는 잊혀진 타이머 또는 콜백, 별도의 DOM 요소 및 글로벌 변수가 포함됩니다. 메모리 누출을 방지하려면 간격 및 시간 초과를 제거하고 더 이상 필요하지 않은 경우 이벤트 리스너를 삭제하고 가능하면 전역 변수를 피하십시오.
JavaScript의 내장 성능 도구를 사용하여 코드를 최적화하는 방법은 무엇입니까?
JavaScript는 성능 분석 및 최적화를위한 다양한 내장 도구를 제공합니다. Performance API를 사용하면 코드의 다른 부분에 소요 된 시간을 측정하고 병목 현상을 식별 할 수 있습니다. 메모리 API는 메모리 사용량을 추적하고 잠재적 누출을 식별하는 데 도움이됩니다. 또한 브라우저 개발자 도구는 종종 코드를 최적화하는 데 도움이되는 성능 분석 기능을 제공합니다.
JavaScript의 비동기 프로그래밍은 성능에 어떤 영향을 미칩니 까?
비동기 프로그래밍을 사용하면 JavaScript가 비 블로킹 작업을 수행 할 수있어 비동기 작업이 완료되기를 기다리는 동안 다른 코드가 실행될 수있어 성능을 향상시킵니다. 그러나 비동기 프로그래밍을 잘못 사용하면 성능 문제가 발생할 수 있습니다. 예를 들어, 너무 많은 약속이나 콜백을 사용하면 "콜백 지옥"및 성능 저하로 이어질 수 있습니다. Async/Await, Promise 및 Callbacks를 올바르게 사용하는 방법을 배우면 비동기 코드를 최적화하는 데 도움이 될 수 있습니다.
모바일 장치의 JavaScript를 최적화하는 방법은 무엇입니까?
모바일 장치의 JavaScript 최적화에는 제한된 CPU 기능 및 네트워크 대기 시간과 같은 요소를 고려해야합니다. 모바일 최적화 기술에는 네트워크를 통해 전송 된 JavaScript 코드의 양을 최소화하고 효율적인 코딩 관행을 사용하여 CPU 사용을 줄이고, 저전력 장치에서도 웹 사이트가 올바르게 작동하도록하기 위해 점진적인 향상을 사용합니다.
JavaScript 압축 및 압축은 성능을 어떻게 향상 시킵니까?
압축 및 압축은 JavaScript 파일의 크기를 줄여서 다운로드 속도를 높이고 성능을 향상시킵니다. 압축에는 공간 및 주석과 같은 불필요한 문자를 삭제하는 것이 포함되며 압축에는 데이터를보다 효율적인 형식으로 인코딩하는 것이 포함됩니다. 두 기술 모두 웹 사이트로드 속도, 특히 느린 네트워크를 가진 사용자의 경우 크게 향상 될 수 있습니다.
JavaScript의 requestAnimationFrame을 사용하여 성능을 최적화하는 방법은 무엇입니까?
requestAnimationFrame 메소드를 사용하면 브라우저를 다음으로 다시 Repaint 전에 애니메이션 기능을 호출하여 부드러운 애니메이션을 만듭니다. 이로 인해 브라우저가 현재 장치 및로드 조건에 따라 애니메이션을 최적화 할 수 있으므로 SetInterval 또는 Settimeout을 사용하는 것보다보다 효율적인 애니메이션으로 이어질 수 있습니다. JavaScript에서 웹 작업자를 사용하여 성능을 최적화하는 방법은 무엇입니까?
웹 작업자를 사용하면 기본 스레드를 차단하지 않고 배경의 별도 스레드에서 JavaScript를 실행할 수 있습니다. 이는 사용자 인터페이스를 늦추지 않고 컴퓨팅 집약적 작업을 수행하는 데 유용합니다. 그러나 웹 작업자는 새 작업자 스레드를 시작하는 오버 헤드 및 DOM을 직접 작동하는 기능과 같은 몇 가지 제한 사항과 비용이있어주의해서 사용해야합니다.
이 기사는 끊임없이 변화하는 JavaScript 생태계에서 JavaScript 성능을 최적화하는 방법의 여러 측면을 탐구합니다. 우리는 "규칙이 아닌 도구"의 원칙을 따르고 너무 많은 JavaScript 전문 용어를 사용하지 않도록 노력할 것입니다. 공간이 제한되어 있기 때문에 JavaScript 성능 최적화의 모든 측면을 다룰 수 없습니다. 참조 링크를 읽고 직접 탐구하십시오. 
이 섹션에서 기억해야 할 두 가지 사항 :
그러나 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
