웹 구성 요소 렌더링 성능

Question

웹 구성 요소는 기본 HTML 요소와 비교할 때 더 우수한 성능을 제공합니다. 각 요소는 DOM에 연결될 때만 변형됩니다. 따라서 Element 콜백 내에서 값 비싼 연산을 수행하면 성능이 저하됩니다.

connectionCallback 핸들에서 값 비싼 구현을 사용하여 하나의 샘플 웹 구성 요소를 작성했습니다. 구성 요소 렌더링을 시도하면 각 구성 요소에 연속 된 시간이 걸립니다.

웹 구성 요소에 관련 성능 핀 포인트가 표시되지 않습니다.

---

업데이트 1

내가 네이티브 및 웹 구성 요소 구현 생성 된 작은 페이지가 웹 구성 요소 페이지가 완료 4ms의를했다하지만, 기본은 1ms 만했다 보인다. 내 성능 화면을 참조하십시오. 웹 구성 요소에서 스크립팅에 더 많은 시간이 소요됩니다.

기본 HTML 예 :

---

웹 구성 요소 예 :

Answer 1

추가 요소가 추가 된 맞춤 요소가 기본 HTML 요소를 확장하므로 (class extends HTMLDivElement 통해), 최선의 경우 기본 HTML 요소만큼만 좋을 수 있습니다.

성능면에서 이득은 타사 프레임 워크 (이 새로운 기술을 활용하지 않음)와 비교할 때입니다. 웹 구성 요소가 더 빨라야합니다.

네이티브 대 polyfilled Custom Elements 구현을 비교할 때 볼 수 있습니다.

Answer 2

StencilJS (github)을 사용하면 웹 구성 요소의 성능을 크게 향상시킬 수 있습니다. 최적의 렌더링을 위해 웹 구성 요소에 가상 DOM을 구현할뿐만 아니라 많은 최적화 작업을 매우 쉽게 수행합니다.

here을 확인할 수 있습니다.