스크롤과 관련하여 질문이 있습니다. 안드로이드에는 RecyclerView라는 것이 있습니다 RecyclerView로 동적 목록 만들기 | Android Developers 이는 스크롤이 진행될수록 요소를 계속 추가하는 대신 기존 요소를 재사용합니다. Discourse는 이렇게 하지 않는 것 같은데, 그 이유는 무엇일까요? 다른 전략을 사용하고 있는 건가요? 커스텀 vdom 위젯 시스템이 DOM 요소 목록이 계속 커지는 문제를 해결하기 위해 만들어졌다는 막연한 인상은 있지만, 솔직히 그게 어떻게 그 문제를 해결하는지 여전히 이해가 되지 않습니다.
이 부분에 대해 좀 더 설명해 주실 수 있는 분이 있을까요? ![]()
우리는 '가상 스크롤링’이라는 방식을 사용하여 한 번에 20개 게시글만 로드합니다.
기존 DOM 요소들은 어떻게 처리되나요? 계속 스크롤하면 DOM 트리에 요소가 점점 더 추가되는 것 같습니다. 나중에 제거되나요?
아니요, 우리는 그들을 그대로 두어 둡니다. 뷰포트에서 매우 멀리 떨어지면 요소를 플레이스홀더로 대체하는 일종의 “클로킹” 로직이 있으며, 요소에 가까워지면 다시 렌더링하여 클로킹을 해제합니다. 이 매직의 임계값은 꽤 높습니다.
@sam 이 기법을 컴포넌트 재활용과 비교하는 글을 링크해 주실 수 있나요? 더 자세히 읽어보고 싶습니다. 이 결정을 내리시는 과정에서 어떤 기준을 두셨나요? A tour of how the Widget (Virtual DOM) code in Discourse works 도 이 주제와 관련이 있을 것 같습니다.
그런 기사가 있는지는 잘 모르겠습니다. 제가 틀렸을 수도 있죠. @eviltrout 님이 포스트 클로킹(포스트 숨김) 관련 의사결정 중 일부를 문서화했는지 기억하시는지 모르겠네요. 확실하지 않습니다.
오랜 시간이 흘렀기 때문에, 불행히도 기억이 나지 않습니다.
우리가 재활용 컴포넌트를 완전히 분석한 적은 없었던 것 같습니다. 클로킹은 큰 성과였고, 당시 우리의 문제를 해결해 주었습니다.
@eviltrout 이 게시글을 보았습니다. We finally did something about Android Performance | Evil Trout Inc.
Android나 Ember의 성능 개선 돌파구를 기다리던 수년 끝에, 우리는 핵 옵션을 선택할 때가 되었다고 판단했습니다. 가장 일반적인 뷰에 사용되던 Ember 렌더링 엔진을 커스텀 가상 DOM 기반 렌더러로 교체한 것입니다.
따라서 discourse의 vdom/위젯 시스템은 Android 성능 문제 대응으로 구축된 것 같습니다.
클로킹(cloaking)을 도입하는 이 커밋은 vdom/위젯 시스템 이후에 이루어진 것으로 보입니다:
클로킹과 vdom/위젯 시스템이 어떤 식으로 관련되어 있나요? 두 가지 모두 성능 문제를 다루는 것으로 보입니다. 컴포넌트 재활용을 하면 DOM 요소의 양이 크게 줄어들기 때문에, vdom/위젯 시스템과 같은 것이 필요하지 않을 것 같은데, 맞나요?
vdom 이전에도 cloaking 기능이 있었지만, 해당 기능도 필요하다는 점을 인지한 후 재구현했습니다.
컴포넌트 재사용은 메모리 사용량을 줄이고 대규모 토픽에서 성능을 개선할 수 있지만, 위젯이 크게 향상시키는 렌더링 시간 단축에는 도움이 되지 않습니다.
모든 성능 문제는 트레이드오프에 관한 것이라는 점을 아무리 강조해도 지나치지 않습니다. Ember는 여기서 올바른 선택을 한다고 생각합니다. Ember는 조직적으로 구조화된 애플리케이션에 초점을 맞추고, 기능이 추가됨에 따라 확장되도록 설계되어 있습니다. 애플리케이션의 대다수 뷰에서는 프레임워크 오버헤드가 문제가 되지 않을 것입니다. 그러나 많은 바인딩을 가진 중첩된 컴포넌트를 많이 렌더링하는 경우, 상황이 병리적(pathological)이 될 수 있습니다.
Discourse는 겉보기에는 단순해 보일 수 있지만, 각 게시글은 상당수의 컴포넌트로 렌더링됩니다. 우리는 게시글이 렌더링될 때마다 150개 이상의 속성이 관여되는 수많은 동적 버튼, 링크 및 효과를 적용하고 있습니다.
@eviltrout님이 작성하신 블로그 게시물에서 이 내용을 확인했습니다. Ember의 성능은 일반적으로 문제가 되지 않지만, Discourse 토픽이라는 특정 경우에는 문제가 된다는 말씀이신가요? Discourse 토픽은 내부에 많은 컴포넌트(답글 버튼, 좋아요 버튼 등)를 가진 게시글들의 매우 긴 목록입니다. 이로 인해 렌더링 성능이 저하됩니다.
vdom/widgets는 렌더링 프로세스의 비용을 줄여 이 문제를 어느 정도 완화합니다. 그러나 DOM 요소의 수가 너무 커지면, 클로킹(cloaking)을 통해 이를 줄여야 하는 시점이 옵니다.
컴포넌트 재사용(Recycling)은 사용자가 콘텐츠를 스크롤할 때 재사용되는 고정된 수의 DOM 요소만 화면에 유지함으로써 이 문제를 완전히 피하는 방법입니다.
제가 어떤 부분을 잘못 이해했거나 잘못 서술했다면 지적해 주십시오.
감사합니다.
Spirobel ![]()