정보실

웹학교

정보실

html Chrome 개발자 도구에서 전문가처럼 디버그 — 렌더링 탭 사용 방법

본문

오늘날 프론트 엔드 응용 프로그램은 더욱 복잡해지고 있습니다. 

앱이 커지면 느려집니다. 

느린 앱의 주된 이유 중 하나는 브라우저에서 많은 양의 렌더링이 발생하기 때문입니다. 

그러나 문제의 위치를 ​​확인하고 해결하는 방법은 무엇입니까?


https://medium.com/@tharakamd.12/debug-like-a-pro-in-chrome-dev-tools-how-to-use-rendering-tab-ba25f5bb6264 


Chrome 개발 도구에는 JavaScript 애플리케이션의 렌더링 관련 문제를 디버깅 하는 데 사용되는 렌더링이라는 이 탭이 있습니다. 

기능을 설명하기 위해 Angular 7을 사용하여 작은 응용 프로그램을 만들었습니다. 동물 이름 목록을 유지 관리합니다.

버튼을 클릭하여 새로운 임의의 이름을 추가 할 수 있습니다. 이름은 Unique Names Generator (https://www.npmjs.com/package/unique-names-generator)라는 이 멋진 노드 패키지를 사용하여 생성됩니다.


1*taDRslI4QL6pyEuBOb_skw.gif 

데모 앱 작동 방식


이것은 작은 응용 프로그램이지만 장면 뒤에서 많은 렌더링이 이루어집니다. 무슨 일인지 어떻게 알 수 있습니까?


먼저 Chrome 개발자 도구를 열어야 합니다. 그런 다음 오른쪽 상단 모서리에 있는 3 개의 점 버튼을 클릭하십시오. 그런 다음 메뉴에서 추가 도구-> 렌더링.


1*UNflmbJ_mPRYK3lfLwMA0A.png 

렌더링 탭으로 이동


렌더링 탭의 초기 보기는 다음과 같습니다.


1*veBayADmzasRlHWkrrOD6Q.png 

렌더링 탭의 초기 보기


보시다시피 이 기능에는 많은 기능이 있습니다. 

그러나 이 기사에서는 페인트 깜박임(Paint Flashing) 및 스크롤 성능 문제(Scrolling Performance Issue)에만 중점을 두고 있습니다.


먼저 페인트 깜박임 확인란을 선택하고 어떻게 되는지 봅시다.


1*qA9KNfQQsz6xdK4wSgHqSg.gif 

렌더링 문제


이게 뭐야 😮


기본적으로 페인트 플래시는 웹 페이지에서 다시 페인트 할 영역을 강조 표시합니다. 

우리의 경우. Add New 버튼을 클릭하면 전체 이름 목록이 다시 그려지고 있습니다. 웹 응용 프로그램의 성능에 크게 영향을 미칩니다.

그리고 스크롤에서도 전체 이름 세트를 다시 렌더링 합니다. 이것은 작은 응용 프로그램이지만. 이것은 웹 응용 프로그램의 성능 저하, 불필요한 렌더링 및 잘못된 스크롤의 가장 일반적인 원인을 해결합니다.


이 문제를 극복하기 위해 무엇을 할 수 있습니까?


실제 솔루션은 자신의 코드에 따라 다릅니다. 그러나 이 경우에는 Angular ngFor에 trackBy를 추가하여 이를 해결할 수 있습니다. 내 이전 기사에서 trackBy에 대한 자세한 내용을 찾을 수 있습니다. 

해당 문제를 해결 한 후 앱은 다음과 같습니다.


1*IVq9WHyU8OWIWsgtqYBNjg.gif 

렌더링 문제를 해결 한 후


새 요소를 추가 할 때 더 이상 전체 목록을 다시 렌더링 하지 않습니다.


그러나 스크롤 문제는 여전히 존재합니다😫


렌더링 탭에는 스크롤 성능 문제라는 확인란이 있습니다. 

Chrome을 클릭하면 스크롤 성능 문제에 대한 자세한 정보가 제공됩니다.


1*Co0OPUamd9ruxKRhnfMLAg.gif 

스크롤 성능에 대한 추가 정보


'스크롤시 다시 그리기'라는 레이블이 표시되고 스크롤 영역이 강조 표시됩니다. 

그런 다음 '스크롤시 다시 그리기'문제를 해결해야 합니다. 나는 그것을 고칠 방법을 몰랐다. 그래서 나는 👊을 봤습니다.

그리고 이 기사를 매우 정확하게 설명합니다 (https://dev.opera.com/articles/css-will-change-property/). 다행히도 CSS 속성 will-change를 추가하는 간단한 수정 사항이 스크롤 컨테이너에 변환되었습니다. 그리고 최종 버전은 다음과 같습니다.


1*-9oJ6T1qJ4Lvk5k8nkaA6A.gif 

최종 최적화 버전


이제 새로 추가 된 항목 만 다시 그립니다. 스크롤 해도 다시 페인트 되지 않습니다. 🆒


이 응용 프로그램은 규모가 작은 응용 프로그램이므로 이러한 수정 프로그램을 적용한 후 성능이 크게 향상되지 않습니다. 

그러나 응용 프로그램이 점점 커지면 이러한 종류의 문제는 응용 프로그램 성능에 크게 영향을 줍니다. 이 경우 Chrome 개발자 도구 렌더링 탭을 사용하면 렌더링 성능 문제를 쉽게 찾아서 해결할 수 있습니다.


이 방법을 사용하면 대규모 JavaScript 응용 프로그램을 개발하는 데 시간을 절약 할 수 있기를 바랍니다. 행복한 코딩 ⌨



페이지 정보

조회 27회 ]  작성일20-01-26 10:06

웹학교