수색…
기본 사항 - HTML DOM과 가상 DOM 비교
HTML DOM은 비싸다.
각 웹 페이지는 내부적으로 객체 트리로 표시됩니다. 이 표현을 문서 객체 모델 이라고합니다. 또한 프로그래밍 언어 (예 : JavaScript)가 HTML 요소에 액세스 할 수있게 해주는 언어 중립적 인 인터페이스입니다.
다른 말로
HTML DOM은 HTML 요소를 가져 오거나, 변경하거나, 추가하거나, 삭제하는 방법의 표준입니다.
그러나 이러한 DOM 작업 은 매우 비쌉니다 .
가상 DOM은 해결책입니다
그래서 반작용 팀은 추상화 HTML DOM에 대한 아이디어를 내놓았다 우리는 우리의 응용 프로그램의 현재 상태를 복제하는 HTML DOM에 적용해야하는 작업의 최소 수를 계산하기 위해 자신의 가상 DOM을 만들 수 있습니다.
가상 DOM은 불필요한 DOM 수정으로 인한 시간을 절약합니다.
얼마나 정확하게?
각 시점에서 React는 Virtual DOM 표시된 응용 프로그램 상태를 갖습니다. 응용 프로그램 상태가 변경 될 때마다 React가 성능을 최적화하기 위해 수행하는 단계입니다
애플리케이션의 새로운 상태를 나타내는 새로운 가상 DOM 생성
이전 가상 DOM (현재 HTML DOM을 나타냄)과 새 가상 DOM 비교
2. 새로운 가상 DOM으로 이전 가상 DOM (현재 HTML DOM을 나타냄)을 변환하기위한 최소 작업 수를 찾습니다.
- 그것에 대해 더 자세히 알고 싶다면 - React의 Diff 알고리즘을 읽으십시오.
- 이러한 작업을 찾은 후 해당 작업을 해당 HTML DOM 작업으로 매핑합니다
- 가상 DOM 은 HTML DOM 의 추상화 일 뿐이며 가상 DOM 은 그 사이에 동형 관계가 있음을 기억하십시오
- 이제 발견되어 동등한 HTML DOM 작업으로 전송 된 작업의 최소 수가 응용 프로그램의 HTML DOM 에 직접 적용되므로 HTML DOM을 불필요하게 수정하지 않아도됩니다.
참고 : 가상 DOM은 JavaScript 객체이므로 Virtual DOM에 적용된 연산은 저렴합니다.
반응의 diff 알고리즘
하나의 트리를 다른 트리로 변환하기위한 최소 연산 수를 생성하는 것은 O (n ^ 3)의 순서로 복잡합니다. 여기서 n은 트리의 노드 수입니다. 반응은 선형 시간에이 문제를 풀기위한 두 가지 가정에 의존합니다 - O (n)
같은 클래스의 두 구성 요소는 비슷한 트리를 생성하고 다른 클래스의 두 구성 요소는 서로 다른 트리를 생성합니다.
서로 다른 렌더간에 안정적인 요소에 대해 고유 한 키를 제공 할 수 있습니다.
두 노드가 다른지를 결정하기 위해 React가 3 개의 사례를 차별화합니다.
- 유형이 다른 경우 두 개의 노드가 다릅니다.
- 예를 들어
<div>...</div>은<span>...</span>과 다릅니다.
- 두 노드가 다른 키를 가질 때마다
- 예를 들어,
<div key="1">...</div>가<div key="2">...</div>
또한 성능 최적화를 원할 경우 이해해야 할 중요한 사항은 매우 중요 합니다.
두 노드가 같은 유형이 아닌 경우 React는 렌더링하는 내용과 일치하는 것을 시도하지 않습니다. DOM에서 첫 번째 요소를 제거하고 두 번째 요소를 삽입하려고합니다.
이유는 다음과 같습니다.
요소가 생성하는 것과 같은 DOM을 생성 할 가능성은 거의 없습니다. 이 두 구조를 일치 시키려고 노력하는 대신 React는 처음부터 트리를 다시 빌드합니다.
팁 & 트릭
두 개의 노드가 같은 유형이 아닌 경우 React가 일치하지 않으므로 DOM에서 첫 번째 노드를 제거하고 두 번째 노드를 삽입합니다. 이것이 첫 번째 팁에서 말하는 이유입니다.
- 매우 비슷한 출력을 가진 두 개의 컴포넌트 클래스를 번갈아 가며 볼 수 있다면, 같은 클래스로 만들 수 있습니다.
- 컴포넌트가 다시 렌더링되지 않도록하려면 shouldComponentUpdate를 사용하십시오. 예를 들어 변경하지 않을 것이라는 것을 알고있는 경우
shouldComponentUpdate: function(nextProps, nextState) {
return nextProps.id !== this.props.id;
}
ReactJS를 이용한 성능 측정
측정 할 수없는 것을 향상시킬 수는 없습니다 . React 구성 요소의 성능을 향상 시키려면이를 측정 할 수 있어야합니다. ReactJS는 성능 측정을위한 애드온 도구를 제공합니다. 성능을 측정하기 위해 react-addons-perf 모듈 가져 오기
import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf; // ES5 with react-with-addons.js
가져온 Perf 모듈에서 다음과 같은 방법을 사용할 수 있습니다.
- Perf.printInclusive ()
- Perf.printExclusive ()
- Perf.printWasted ()
- Perf.printOperations ()
- Perf.printDOM ()
대부분의 시간 동안 가장 중요한 것은 Perf.printWasted() 입니다.이 컴포넌트는 개별 구성 요소의 낭비되는 시간을 표로 나타낸 것입니다
표의 낭비 된 시간 열을 메모하고 위의 팁 및 기능 섹션을 사용하여 구성 요소의 성능을 향상시킬 수 있습니다
React Official Guide 와 Benchling Engg의 우수 기사를 참조하십시오 . 반응 성능