크롬 개발 도구로 찍은 스크린 샷의 폭포 다이어그램은 무엇을 의미합니까?

Question

다음은 크롬에서 dev 도구로 내 응용 프로그램을 실행하는 동안 찍은 스크린 샷입니다. 폭포수 다이어그램을 이해하도록 도와주세요. 녹색과 청색이 의미하는 것. 내 응용 프로그램은 오랜 시간이 지났을 때 콘텐츠를 렌더링하므로 응용 프로그램 동작을 이해하기 위해 dev 도구를 사용했습니다. 이 다이어그램으로 내 응용 프로그램의 지연을 이해할 수 있습니까? 자원의 폭포 위

Answer 1

호버은 대한 자세한 정보를 볼 수 있습니다. 팝업은 각 단계에 대한 자세한 설명을 제공합니다. 요청을 클릭하면 전용 탭에서 동일한보기가 열립니다. View the timing breakdown of a request을 참조하십시오.