오늘날 프론트 엔드 응용 프로그램은 더욱 복잡해지고 있습니다.
앱이 커지면 느려집니다.
느린 앱의 주된 이유 중 하나는 브라우저에서 많은 양의 렌더링이 발생하기 때문입니다.
그러나 문제의 위치를 확인하고 해결하는 방법은 무엇입니까?
Chrome 개발 도구에는 JavaScript 애플리케이션의 렌더링 관련 문제를 디버깅 하는 데 사용되는 렌더링이라는 이 탭이 있습니다.
기능을 설명하기 위해 Angular 7을 사용하여 작은 응용 프로그램을 만들었습니다. 동물 이름 목록을 유지 관리합니다.
버튼을 클릭하여 새로운 임의의 이름을 추가 할 수 있습니다. 이름은 Unique Names Generator (https://www.npmjs.com/package/unique-names-generator)라는 이 멋진 노드 패키지를 사용하여 생성됩니다.
데모 앱 작동 방식
이것은 작은 응용 프로그램이지만 장면 뒤에서 많은 렌더링이 이루어집니다. 무슨 일인지 어떻게 알 수 있습니까?
먼저 Chrome 개발자 도구를 열어야 합니다. 그런 다음 오른쪽 상단 모서리에 있는 3 개의 점 버튼을 클릭하십시오. 그런 다음 메뉴에서 추가 도구-> 렌더링.
렌더링 탭으로 이동
렌더링 탭의 초기 보기는 다음과 같습니다.
렌더링 탭의 초기 보기
보시다시피 이 기능에는 많은 기능이 있습니다.
그러나 이 기사에서는 페인트 깜박임(Paint Flashing) 및 스크롤 성능 문제(Scrolling Performance Issue)에만 중점을 두고 있습니다.
먼저 페인트 깜박임 확인란을 선택하고 어떻게 되는지 봅시다.
렌더링 문제
이게 뭐야 ?
기본적으로 페인트 플래시는 웹 페이지에서 다시 페인트 할 영역을 강조 표시합니다.
우리의 경우. Add New 버튼을 클릭하면 전체 이름 목록이 다시 그려지고 있습니다. 웹 응용 프로그램의 성능에 크게 영향을 미칩니다.
그리고 스크롤에서도 전체 이름 세트를 다시 렌더링 합니다. 이것은 작은 응용 프로그램이지만. 이것은 웹 응용 프로그램의 성능 저하, 불필요한 렌더링 및 잘못된 스크롤의 가장 일반적인 원인을 해결합니다.
이 문제를 극복하기 위해 무엇을 할 수 있습니까?
실제 솔루션은 자신의 코드에 따라 다릅니다. 그러나 이 경우에는 Angular ngFor에 trackBy를 추가하여 이를 해결할 수 있습니다. 내 이전 기사에서 trackBy에 대한 자세한 내용을 찾을 수 있습니다.
해당 문제를 해결 한 후 앱은 다음과 같습니다.
렌더링 문제를 해결 한 후
새 요소를 추가 할 때 더 이상 전체 목록을 다시 렌더링 하지 않습니다.
그러나 스크롤 문제는 여전히 존재합니다?
렌더링 탭에는 스크롤 성능 문제라는 확인란이 있습니다.
Chrome을 클릭하면 스크롤 성능 문제에 대한 자세한 정보가 제공됩니다.
스크롤 성능에 대한 추가 정보
'스크롤시 다시 그리기'라는 레이블이 표시되고 스크롤 영역이 강조 표시됩니다.
그런 다음 '스크롤시 다시 그리기'문제를 해결해야 합니다. 나는 그것을 고칠 방법을 몰랐다. 그래서 나는 ?을 봤습니다.
그리고 이 기사를 매우 정확하게 설명합니다 (https://dev.opera.com/articles/css-will-change-property/). 다행히도 CSS 속성 will-change를 추가하는 간단한 수정 사항이 스크롤 컨테이너에 변환되었습니다. 그리고 최종 버전은 다음과 같습니다.
최종 최적화 버전
이제 새로 추가 된 항목 만 다시 그립니다. 스크롤 해도 다시 페인트 되지 않습니다. ?
이 응용 프로그램은 규모가 작은 응용 프로그램이므로 이러한 수정 프로그램을 적용한 후 성능이 크게 향상되지 않습니다.
그러나 응용 프로그램이 점점 커지면 이러한 종류의 문제는 응용 프로그램 성능에 크게 영향을 줍니다. 이 경우 Chrome 개발자 도구 렌더링 탭을 사용하면 렌더링 성능 문제를 쉽게 찾아서 해결할 수 있습니다.
이 방법을 사용하면 대규모 JavaScript 응용 프로그램을 개발하는 데 시간을 절약 할 수 있기를 바랍니다. 행복한 코딩 ⌨
등록된 댓글이 없습니다.