모든 개발자가 알아야 할 JavaScript 성능 해킹

JavaScript는 최신 웹 응용 프로그램의 초석으로, 응용 프로그램에 동적 사용자 인터페이스, 부드러운 상호 작용 및 실시간 기능을 제공합니다. 그러나 응용 프로그램 복잡성이 증가함에 따라 성능 문제가 점차 나타날 수있어 사용자 경험에 영향을 미칩니다. 효율적인 코딩 실습을 사용하면 JavaScript 코드를 최적화하여 모든 장치 및 브라우저에서 응용 프로그램이 원활하게 실행될 수 있습니다. 이 기사는 코드 최적화 기술에서 현대식 브라우저 기능 사용에 이르기까지 JavaScript의 성능을 향상시키기위한 주요 전략을 탐구합니다.

JavaScript 성능이 매우 중요한 이유는 무엇입니까?

javaScript는 최적화되지 않았으며 아마도 아마도 원인이 될 수 있습니다 :

로딩 시간은

---

가 느려져 점프 속도가 증가합니다.

UI 응답은 느리게

이므로 사용자가 좌절합니다.

자원 소비를 증가시켜 모바일 장치에 특히 중요합니다.

javaScript를 최적화하여 응용 프로그램이 빠르고 매혹적이며 신뢰할 수있는 경험을 제공하는지 확인하십시오.
• 효율적인 JavaScript 인코딩 연습 <.> 1. DOM 작동을 최소화하십시오
• Operation Dom은 JavaScript에서 가장 많은 시간이 소요되는 작업 중 하나입니다. DOM 업데이트가 너무 많으면 응용 프로그램 속도가 줄어 듭니다. 모범 사례 :
• 배치 DOM 업데이트 : 대신 하나씩 변경하지 마십시오. 대신 배치로 처리해야합니다.

복잡한 업데이트의 경우 문서 조각 또는 가상 DOM 라이브러리 (예 : react )를 사용하십시오.

---

<.> 2. 트렌드와 이벤트를 던지십시오

롤링 처리, 크기 또는 키 조정으로 인해 자주 기능 호출이 발생하여 성능이 줄어 듭니다. 모범 사례 :

를 사용하여 또는

슬롯 를 흔들려면 프로세스 처리 프로그램의 실행 빈도를 제어합니다.

<.> 3. 사이클을 최적화 주기는 기본 작업이지만 최적화되지 않으면 병목 현상이 될 수도 있습니다. 모범 사례 :

<code class="language-javascript">// 低效
document.querySelector("#element").style.color = "red";
document.querySelector("#element").style.fontSize = "16px";

// 高效
const element = document.querySelector("#element");
element.style.cssText = "color: red; font-size: 16px;";</code>

각 반복 동안 재 계산을 피하기 위해 사이클의 배열 길이를 캐시합니다.

• 보다 간결하고 효율적인 코드를 얻으려면 배열 메소드 를 사용하십시오.

<.> 4. 메모리 누출을 피하십시오

---

메모리 누출은 시간이 지남에 따라 성능을 줄입니다.

일반적인 메모리 누출 소스 : 글로벌 변수 : 의도하지 않게 글로벌 변수가 메모리를 유지할 것이라고 선언합니다.

입사 모니터 : 더 이상 요소가 필요하지 않을 때 모니터를 제거하는 것을 잊었습니다.

모범 사례 :

> 또는 대신 let를 사용하여 전역 변수를 피하십시오. const 사용하지 않은 이벤트 모니터를 제거하십시오. var
<.> 5. 지연 로딩 및 코드 세분화

불필요한 JavaScript를로드하면 초기 페이지 렌더링 속도가 느려집니다.

<code class="language-javascript">// 低效
document.querySelector("#element").style.color = "red";
document.querySelector("#element").style.fontSize = "16px";

// 高效
const element = document.querySelector("#element");
element.style.cssText = "color: red; font-size: 16px;";</code>

모범 사례 :

---

로드

: 필요할 때는 비 임계 스크립트 만로드하십시오.

코드 세분화 : 웹 팩 또는 다음.js와 같은 도구를 사용하여 응용 프로그램을 더 작은 패킷으로 분해합니다.

• <.> 6. 최신 JavaScript 기능 를 사용하십시오 ES6에 도입 된 최신 JavaScript 특성은 성능과 가독성을 향상시킬 수 있습니다.

  모범 사례 :

  화살표 기능을 사용하여보다 간결한 구문을 얻으십시오.
> 및
• 를 사용하여 문제 개선을 방지하고 범위의 범위를 향상시킵니다.

  해체를 사용하여 데이터 작동을 단순화하십시오.

<.> 7. 비동기 코드를 최적화하십시오

비동기 코드는 API 통화와 같은 작업에 중요하지만 성능 문제가 발생할 수 있습니다.

---

모범 사례 :

보다

를 사용하여보다 간결한 비동기 워크 플로우를 얻으십시오.

불필요한 둥지를 피하기 위해 약속을 최적화하십시오.

<.> 8. 건설 도구 를 사용하십시오 웹 팩, 롤업, 소포 및 기타 건물 도구는 JavaScript 코드를 최적화 할 수 있습니다.

모범 사례 :

파일 크기를 줄이기 위해 압축 된 JavaScript를 압축했습니다.
• 사용하지 않은 코드를 삭제하여 중복성을 제거하십시오. const 네트워크 오버 헤드를 줄이기 위해 필요한 스크립트 만 포장하고 제공합니다. let
• JavaScript의 성능을 측정하십시오 코드 최적화에는 병목 현상을 식별하기 위해 측정 성능이 필요합니다. 다음 도구를 사용할 수 있습니다
Chrome Devtools : 성능을 분석하고 개선 된 영역을 찾으십시오.

<code class="language-javascript">function throttle(func, limit) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func.apply(this, arguments);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

window.addEventListener("resize", throttle(() => {
  console.log("Resized!");
}, 300));</code>

Lighthouse

---

: 측정 성능, 접근성 및 SEO.

webpagetest : 실제 성능 표시기를 평가하십시오.

결론 고효율 JavaScript 인코딩 연습은 빠르고 확장 가능하며 사용자 친화적 인 응용 프로그램을 구축하는 데 필수적입니다. 최소화 된 DOM 운영을 통해 순환 최적화, 최신 특성 및 건설 도구를 사용하여 개발자는 성능을 크게 향상시킬 수 있습니다.

이러한 관행을 프로젝트에 통합하기 시작하고 고품질 응용 프로그램을 제공 할 때 차이점을 경험하십시오.

위 내용은 모든 개발자가 알아야 할 JavaScript 성능 해킹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!