Shadow DOM은 React.js의 Virtual DOM처럼 빠릅니까?
내 프로젝트에 Shadow DOM을 구현하면 React에서 사용하는 가상 DOM처럼 빠르게 만들 수 있습니까?
가상 DOM
Virtual DOM은 DOM에 대한 변경으로 인해 일반적으로 페이지를 다시 렌더링하므로 성능 측면에서 비용이 많이 드는 DOM에 대한 불필요한 변경을 피하는 것입니다. Virtual DOM을 사용하면 한 번에 적용 할 여러 변경 사항을 수집 할 수 있으므로 모든 단일 변경으로 인해 다시 렌더링되는 것이 아니라 변경 사항 집합이 DOM에 적용된 후 한 번만 다시 렌더링됩니다.
Shadow DOM
Shadow dom은 대부분 구현 캡슐화에 관한 것입니다. 단일 맞춤 요소는 다소 복잡한 DOM과 결합 된 다소 복잡한 로직을 구현할 수 있습니다. 임의의 복잡도의 전체 웹 애플리케이션은 가져 오기를 통해 페이지에 추가 할 수 있으며 <body><my-app></my-app>.NET과 같은 내부 표현이 숨겨진 사용자 지정 요소로 재사용 가능하고 구성 가능한 구성 요소로 구현 될 수도 있습니다 <date-picker></date-picker>.
스타일 캡슐화 Shadow DOM은 디자이너가 의도하지 않은 요소에 스타일이 우연히 적용되는 것을 방지하는 것입니다. 예를 들어 사용중인 CSS 또는 구성 요소 라이브러리가 이제 동일한 CSS 클래스 이름을 사용하는 다른 요소에 적용되는 선택기를 변경했기 때문입니다. 구성 요소에 추가 된 스타일은 해당 구성 요소로 범위가 지정되며 스타일의 블리딩이 방지됩니다.
Shadow DOM 및 성능
Shadow DOM은 처음에는 성능에 관한 것이 아니지만 성능에 영향을 미칩니다. 스타일의 범위가 지정되기 때문에 브라우저는 페이지의 제한된 영역 (사용자 정의 요소의 섀도우 DOM)에만 영향을 미치도록 일부 변경 사항에 대해 가정 할 수 있으며, 이는 다시 렌더링하는 대신 이러한 구성 요소의 영역으로 다시 렌더링하는 것을 제한 할 수 있습니다. 전체 페이지.
이것은 이유 >>>, /deep/그리고 ::shadow그림자 DOM 경계를 넘어 스타일을 적용 할 수 CSS 콤비가, 사용되지 않는 및 크롬 곧 제거 될 수 있습니다 (다른 브라우저는 AFAIK를 가진 적이). 이러한 결합 자의 존재만으로는 이전 단락에서 언급 한 최적화 유형을 방지 할 수 있습니다.
Angular2 는 두 세계의 장점을 모두 사용합니다.
단방향 데이터 흐름을 사용하고 모델에서만 변경 감지를 실행합니다. 그것을 감지 한 경우는 DOM이 업데이트 바인딩 업데이트와 같은 구조적인 지침을되도록 변경 *ngFor, *ngIf... DOM을 업데이트합니다. 따라서 DOM은 모델이 실제로 변경 될 때만 업데이트됩니다.
Angular2는 ViewEncapsulation.Native브라우저에서 제공하는 스타일 캡슐화 기능을 활용하기 위해 Shadow DOM ( 현재 기본값이 아닌 경우 에만 )을 사용하거나, (현재 기본값) 기본 shadow DOM 및 CSS 변수까지 해결 방법으로 구성 요소에 추가 된 스타일을 다시 작성하여 스타일 캡슐화를 에뮬레이트합니다. (동적 글로벌 스타일 변경의 경우) 널리 사용 가능합니다.
아니요, Shadow DOM과 Virtual DOM은 관련이 없지만 이름은 비슷합니다.
가상 DOM : 서로 다른 이유로 두 개의 DOM 복사본 (원본 및 업데이트)을 유지하는 React 개념. 렌더링하기 전에 React는 두 개체를 비교하여 실제 DOM 트리에 업데이트를 적용해야하는지 결정합니다. 그 결과 전체 화면이 아니라 뷰에서 필요한 부분 만 업데이트하므로 성능이 향상됩니다.
Shadow DOM : W3C에서 제안한 웹 구성 요소 사양의 일부로 , 기본적으로 작은 DOM 요소와 CSS 스타일을 단일 DOM 요소로 캡슐화 할 수 있습니다.
Shadow DOM 요소의 예
<video width="300" height="150" />
그러나 <video>실제로는 다음 요소를 캡슐화합니다.
<div>
<input type="button" style="color: blue;">Play
<input type="button" style="color: red;">Pause
<source src="myVideo.mp4">
</div>
따라서 Shadow DOM을 사용하여 웹 요소의 구현 세부 정보를 숨기고 필요한 정보 만 하위 요소 (예 : height, width)에 전달할 props수 있습니다. 이는 구성 요소 에 전달하는 ReactJS 관용구와 매우 유사합니다. .
다음을 통해 제공되는 정보 :
- http://www.funnyant.com/reactjs-what-is-it/
- http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
이 테스트에서 Polymer는 Chrome의 성능에서 React를 날려 버렸습니다.
https://jsperf.com/polymer-vs-react-update/6
참고URL : https://stackoverflow.com/questions/36012239/is-shadow-dom-fast-like-virtual-dom-in-react-js
'Development Tip' 카테고리의 다른 글
| 초보자를위한 Haskell 또는 Standard ML? (0) | 2020.10.18 |
|---|---|
| RegExp.exec ()는 NULL을 산발적으로 반환합니다. (0) | 2020.10.18 |
| SQL : 방금 삽입 한 값의 ID를 얻는 방법은 무엇입니까? (0) | 2020.10.18 |
| PHP에서 Python 호출 (0) | 2020.10.18 |
| 잘못된 요청-잘못된 호스트 이름 IIS7 (0) | 2020.10.18 |