smalljs$mol검색⌘ K문서플레이그라운드비교에코시스템소개KO
렌더링Getting Started소개멘탈 모델시작하기TypeScript에서 view.tree로프로젝트 구조도구Essentials설치상태와 반응성라우팅렌더링테스트배포문제 해결Data데이터 가져오기데이터 스키마Giper BazaMore쇼케이스React, Vue, Svelte에서쿡북Advanced플러그인모듈 메타데이터오프라인고스트 뷰About자주 묻는 질문릴리스API$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

렌더링

이 장은 반응형 상태가 바뀌고 나서 화면의 픽셀이 갱신되기까지 무슨 일이 일어나는지에 관한 것입니다. 여러분이 그것을 생각할 일은 거의 없습니다——하지만 이 모델을 이해하면 왜 $mol 코드가 특별한 노력 없이도 빠르게 유지되는지 알 수 있습니다.

가상 DOM 없음

$mol은 가상 트리를 diff하지 않습니다. 각 뷰 속성은 여러분이 상태에서 이미 만난 그 반응형 셀을 통해, 자신이 제어하는 DOM 노드나 속성에 직접 묶입니다. 셀이 바뀌면 그것을 읽는 바로 그 바인딩만 다시 실행됩니다——서브트리도, 컴포넌트 함수도 아닌, 영향받은 속성만입니다.이는 최적화할 조정 패스도, 리스트 diff를 위해 손으로 조율할 키도, 꺼내 쓸 memo/shouldComponentUpdate도 없다는 뜻입니다. 의존성 그래프는 이미 최소한의 갱신 집합을 알고 있습니다.

컴포넌트는 느긋합니다

뷰는 무언가가 요청할 때에만 구성됩니다. 결코 이동하지 않는 화면은 결코 만들어지지 않고, 결코 열지 않는 탭은 아무 비용도 들지 않습니다. 구성은 온디맨드이고 캐시되므로, 큰 컴포넌트 트리를 조합하는 것은 저렴합니다——필요 없는 부분은 그저 아직 존재하지 않을 뿐입니다.

렌더링은 가상화되어 있습니다

$mol은 뷰포트 안에 있는 것만 렌더링합니다. 시야 밖으로 스크롤된 컴포넌트는 숨겨진 DOM으로 유지되지 않습니다——아예 생성되지 않고, 범위 안으로 스크롤되는 순간에 만들어집니다. 이는 프레임워크의 아키텍처적 성질이지, 옵트인 기능이나 특별한 리스트 컴포넌트가 아닙니다. 어떤 레이아웃이든 가상화되므로, 열 개짜리 리스트와 만 개짜리 리스트는 표시 비용이 거의 같습니다.실질적인 효과는, 여러분이 윈도잉 라이브러리에 손대지 않고도 평범한 컴포넌트 트리와 긴 리스트를 작성한다는 것입니다.

재현 가능한 수치

성능 주장은 재현할 수 있을 때에만 유용합니다. 여기서 수치를 인용하는 대신, $mol은 커뮤니티의 js-framework-benchmark에 참여합니다. 그 결과를 읽고 스위트를 직접 다시 실행할 수 있습니다. js-framework-benchmark 결과그것을 비교의 진실의 원천으로 여기세요——측정되고, 버전이 매겨졌으며, 이 페이지와 독립적입니다.

다음

이로써 $mol이 어떻게 동작하는지에 대한 핵심 모델이 완성됩니다. 다음으로, 데이터 가져오기에서 실제 데이터를 불러오며 그것을 활용해 보세요.
GitHub에서 이 페이지 편집도움이 되었나요?아니요이전라우팅다음테스트
이 페이지에서가상 DOM 없음컴포넌트는 느긋합니다렌더링은 가상화되어 있습니다재현 가능한 수치다음
Type to search the documentation.