RadeventListener : 클라이언트 측 프레임 워크 성능에 대한 이야기

React의 인기는 비난자가 없습니다. 프레임 워크의 상당한 크기 (약 120 kib 미수)는 특히 클라이언트 측 렌더링에만 의존 할 때 시작 시간에 크게 영향을 미칩니다. 클라이언트 측 수화로 서버 측 렌더링조차도 성능 집약적으로 남아 있습니다. React는 복잡한 상태 관리에 탁월하지만 자원 요구는 종종 간단한 응용 프로그램의 이점을 능가합니다. 이것은 덜 강력한 하드웨어로 사용자를 효과적으로 배제 할 수 있습니다.

React의 성능 오버 헤드에 대한 예약에도 불구하고 구성 요소화 모델과 JSX 구문에 감사드립니다. 서버 측 렌더링 (또는 PreAct 사용, 선호하는 대안)은 귀중한 자산으로 남아 있습니다. 그러나 적절한 클라이언트 측 사용법을 결정하는 것은 여전히 ​​어려운 일입니다. 이 기사에서는 더 나은 사용자 경험을 위해 React 성능을 최적화하는 것에 대한 내 결과를 자세히 설명합니다.

컨텍스트 : RSS 피드 앱

내 RSS 피드 앱인 bylines.fyi 는 서버와 클라이언트 모두에서 JavaScript를 사용합니다. 본질적으로 클라이언트 측 프레임 워크를 싫어하지는 않지만 내 경험은 두 가지 반복 문제를 강조합니다.

1. 프레임 워크는 기본 웹 플랫폼을 가릴 수 있으며, 실제로 유익한시기에 대한 깊은 이해를 방해 할 수 있습니다.
2. 프레임 워크가 항상 최적의 사용자 경험을 보장하는 것은 아닙니다.

Tim Kadlec의 웹 프레임 워크 성능에 대한 Httparchive 연구는 이러한 우려를 강화하여 React의 별보다 덜 성능을 나타냅니다. 저의 목표는 클라이언트 측 단점을 완화하면서 React의 서버 측 장점을 활용하는 것이 었습니다.

실험 : 모바일 내비게이션 전환

내 RSS 앱은 간단한 모바일 내비게이션 토글을 위해 클라이언트 측 JavaScript, 즉 "단순 상태"의 전형적인 예입니다. 나는 종종 이러한 간단한 작업에 대해 반응 구성 요소를 과도하게 사용하여 불필요한 성능 오버 헤드로 이어집니다. 이 실험은 사소한 것처럼 보이지만 프레임 워크 선택의 규모를 이해하는 데 중요한 벤치 마크 역할을합니다. 대부분의 개발자는 이러한 사소한 기능에 대해 RECT에만 의존하지는 않지만 결과는 런타임 성능에 대한 건축 적 영향을 보여줍니다.

테스트 조건

실험은 4 개의 장치에서 3 개의 모바일 NAV 구현을 비교했습니다.

1. 상태가 높은 반응 구성 요소 : 서버 렌더링 및 클라이언트 용량.
2. Stateful Preact 구성 요소 : 서버 렌더링 및 클라이언트 하이드 레이트.
3. 무국적 사전 구성 요소 : 서버 렌더링, 수화 되지 않은 ; 표준 이벤트 리스너 사용.

장치 포함 장치

1. 노키아 2 안드로이드 폰 (Chrome 83)
2. ASUS X550CC 노트북 (Windows 10, Chrome 83)
3. 1 세대 iPhone SE (Safari 13)
4. 2 세대 iPhone SE (Safari 13)

메트릭

각 구현 및 장치에 대해 다음 메트릭을 측정했습니다.

1. 시작 시간 : 프레임 워크 로딩 및 수화 (REACT/PREACT) 또는 이벤트 리스너 코드 (EventListener)를 포함합니다.
2. 수화 시간 : 시작 시간의 하위 집합 (React/Preact 만 해당).
3. 모바일 NAV 오픈 시간 : 이벤트 처리에서 프레임 워크 오버 헤드 측정.

방법론

테스트에는 원격 디버깅 및 프로파일 링, 시나리오 및 장치 당 10 개의 반복에 걸쳐 각 메트릭에 대한 CPU 시간을 기록했습니다. 네트워크 성능은 요인이 아니 었습니다.

결과

데이터의 복잡성으로 인해 결과는 최소, 최대, 중앙값 및 평균 CPU 시간을 나타내는 표 형식으로 표시됩니다. (자세한 테이블은 함께 제공되는 스프레드 시트에서 제공됩니다). 주요 결과는 다음과 같습니다.

• React의 높은 신생 기업 및 수화 비용 : 특히 저가 노키아 2에서 눈에.니다.
• Preact의 개선 된 성능 : React보다 훨씬 빠르지 만 Nokia 2의 이상적인 프레임 예산을 초과합니다.
• 우수한 이벤트 리스너 성능 : 특히 간단한 상호 작용을 위해 React 및 Preact보다 일관되게 빠릅니다.

토론 : 얕은 콜 스택

성능 차이는 프레임 워크 로딩 및 수화의 오버 헤드에서 비롯됩니다. 개발자 편의성에는 일부 성능 트레이드 오프가 불가피하지만 균형은 종종 사용자를 희생하여 개발자 경험에 너무 크게 기울입니다. RECT 및 PREACT 수화에 대한 통화 스택은 특히 간단한 작업에 대한 중요한 처리 요구를 강조합니다. 기본 이벤트 리스너를 사용하면 간단한 상태 관리를위한 훨씬 효율적인 접근 방식이 제공됩니다.

결론과 권장 사항

이 분석은 반응 비판으로 의도 된 것이 아니라 프레임 워크 선택과 성능 영향을 비판적으로 평가하는 격려입니다. 몇 가지 전략은 성능 문제를 완화 할 수 있습니다.

1. 가능한 경우 상태의 구성 요소에 대한 상태의 구성 요소를 리팩토링합니다.
2. 상태가없는 구성 요소의 클라이언트 측 JavaScript 및 수화를 피하십시오.
3. 간단한 상호 작용을 위해 프레임 워크 독립적 이벤트 리스너를 사용하십시오.
4. 교차로 관찰자 또는 requestIdleCallback 사용하여 부적절한 성분.
5. Preact를 React의 더 빠른 대안으로 고려하십시오.
6. navigator.deviceMemory 사용하여 저 메모리 장치에 대한 사용자 경험을 조정하십시오.

다양한 장치에서 성능 테스트 우선 순위를 정해 다양한 하드웨어 기능을 갖춘 사용자를위한 포괄 성을 보장합니다. 목표는 모든 사람에게 빠르고 접근 가능한 웹 경험이어야합니다.

편집 피드백을위한 Eric Bailey 와이 기사를 게시 한 CSS 트릭 스태프에게 특별한 감사를드립니다.

위 내용은 RadeventListener : 클라이언트 측 프레임 워크 성능에 대한 이야기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!