안녕하세요 
UX: improve touch, swipe, panning performance on mobile menus - Pull Request #23775 - discourse/discourse - GitHub 업데이트 이후, 구형 모바일 Android 기기에서 메뉴 패널(사용자 및 사이드바)이 이동하는 느낌이 이전보다 훨씬 느려졌습니다. 아마도 이러한 기기의 CPU 성능이 부드럽게 이동하는 데 충분하지 않기 때문일 수 있습니다.
저의 기기는 Huawei P20 Pro입니다.
하지만 iPhone X에서도 테스트해 보았으며, 그곳에서는 매우 부드럽고 빨라서 CPU가 문제라고 생각합니다. 구형 기기의 성능을 개선할 가능성이 있을까요?
감사합니다 
감사합니다 @Don, 확인해 보겠습니다!
Don님, 피드백 주셔서 감사합니다!
조금 후에 테스트를 진행해 보겠습니다. 제 추측으로는 오래된 기기에서는 메뉴 항목 수를 20개로 줄이는 (약간 해킹적인) 성능 최적화가 여전히 부드럽게 느껴지도록 필요할 수 있을 것 같습니다. 바로 확인해 보겠습니다.
@Don - 무엇을 테스트해야 할지 더 자세히 알아보고 있는데, 탭(메뉴 + 메뉴 밖)으로 메뉴를 여닫을 때 이 문제를 경험하고 계시나요, 아니면 스와이프(길게 누르고 제스처로 스와이프)할 때인가요?
처음 메뉴를 열 때 부드럽게 느껴집니다. 아마도 패널 요소가 아직 로딩되지 않았기 때문인 것 같습니다. 처음 열 때 상단에 스핀너 로더가 표시됩니다. 이 동작은 좋은 것 같고, 항상 열릴 때 스핀너 로더를 사용하는 것도 괜찮을 것 같습니다. 
이후 열기 동작은 애니메이션 없이 이루어집니다. 닫기 동작은 랜덤하게 작동합니다(가끔은 부드럽고, 가끔은 버벅입니다).
메뉴가 열린 상태에서 외부 영역을 클릭하면 보통 패널 메뉴 버튼들이 버벅입니다. 하지만 그것들이 먼저 슬라이드 아웃되는 것 같습니다 아마도 전체 메뉴 패널이 reverse-row에 있고, 닫힐 때 클래스가 완전히 슬라이드 아웃되기 전에 제거되어 다시 row로 변경되기 때문일까요?
수정: 그것은 메뉴 패널 버튼(탭)이 아니라 알림 앞의 아이콘들입니다. 하지만 보통 그 라인에서 버벅이며 나타납니다.
제스처를 사용하여 메뉴를 닫으면 부드럽게 느껴집니다.
업데이트: Firefox 브라우저에서는 메뉴 이동이 부드럽게 동작하는 것 같습니다. Edge에서도 테스트해 보았는데, Chrome과 동일한 결과를 보였습니다.
Firefox
제가 파악한 바로는, 여기서 느껴지는 "뻑뻑함"은 애니메이션 자체 때문이 아니라 헤더의 재렌더링(re-rendering) 때문입니다.
제가 새로 도입한 것 중 새로운 느림의 인상을 줄 수 있는 것은 슬라이드 아웃 애니메이션입니다(이 애니메이션은 새 헤더를 리팩토링할 때 실수로 제거되었습니다).
애니메이션과 위젯 메뉴가 수행하는 재렌더링 작업 사이에 setTimeout으로 여유 시간을 주면 훨씬 부드럽게 동작하는 것 같으니, 느린 것이 애니메이션 자체는 아닌 것 같습니다. 따라서 제 추측은 열기/닫기 시 사이트 헤더를 재렌더링하는 주변 작업 때문이라는 것입니다.
실제로 Firefox의 애니메이션 종료 Promise 처리가 애니메이션이 완전히 그려진(painted) 후에 트리거되는지 궁금합니다(원래 변경 사항을 코딩할 때는 그렇게 가정했습니다). 이는 Chrome보다 Firefox가 더 부드럽게 보이는 이유를 설명할 수 있는데, Chrome은 애니메이션 계산이 끝난 후, 애니메이션 종료 화면이 그려지기 전에 재계산 작업을 시작하도록 허용하기 때문입니다.
수정: 애니메이션을 실행하기 전에 필요한 여유 공간을 추가하기 위해 runloop을 사용하여 일시 정지 기능을 추가하고 있습니다. 이렇게 하면 애니메이션이 훨씬 부드럽게 느껴질 것입니다: UX: call discourseLater on menu animations - Pull Request #24168 - discourse/discourse - GitHub
우와, 정말 감사합니다! 잘 잡아주셨네요! 