Chrome network Timing, 컨텐츠 다운로드 개선 방법
느린 요청을 개선하기 위해 Chrome DevTools에서 XHR 호출 타이밍을 확인하고 있었는데 컨텐츠 크기가 5KB 미만이고 애플리케이션이 localhost에서 실행되고 있음에도 불구하고 응답 시간의 99%가 컨텐츠 다운로드에서 낭비된다는 것을 알게 되었습니다(로컬 시스템에서 작동하므로 네트워크 문제 없음).
그러나 Replay XHR 메뉴를 사용하여 통화를 재생할 경우 컨텐츠 다운로드 기간이 2.13초에서 2.11초로 급격하게 줄어듭니다(아래 화면 샷 참조).데이터가 브라우저 수준에서 캐시되지 않습니다.
통화 타이밍 예제
동일한 예제 재생
누가 콘텐츠 다운로드 타이밍이 느린 이유와 개선 방법을 설명해 줄 수 있습니까?
애플리케이션은 ASP입니다.NET mvc 5 솔루션 각도 조합JS.
웹 서버 세부 정보: - Windows Server 2012 R2 - IIS 8
응원해주셔서 미리 감사드립니다!
그 원인을 단정적으로 말씀드릴 수는 없지만, 조사할 수 있는 몇 가지 변수를 제공할 수 있고, 이를 통해 상황 파악에 도움이 될 수 있습니다.
캐싱
브라우저 수준에서 데이터가 캐시되지 않는다고 하신 건 알지만, 다시 한번 확인해보시기 바랍니다.왜냐하면 초기 요청은 2초가 걸리고, 이후 반복 요청은 2초밖에 걸리지 않는다는 것은 정말 캐싱처럼 들리기 때문입니다.
확인 방법:
- 네트워크 패널로 이동합니다.
- 요청에 대한 크기 열을 봅니다.보시면
from memory아니면from disk cache, 캐시에서 제공된 겁니다
개발 속도가 느린 서버 또는 시스템
제가 처음에 생각한 것은 당신이 감당할 수 있는 것보다 당신의 개발 기계에 더 많은 일을 하고 있다는 것이었습니다.아마도 서버는 컴퓨터가 처리할 수 있는 것보다 더 많은 자원을 필요로 할 것입니다.아마도 다른 프로그램들이 많이 실행되고 있고 메모리/CPU가 최대화되고 있을 것입니다.
확인 방법:
- 보다 강력한 서버에서 앱을 실행하고 패턴이 지속되는지 확인합니다.
프론트엔드 앱이 너무 많은 작업을 수행하고 있습니다.
이 마지막 것이 말이 되는지는 모르겠지만, 확인해 볼 만한 가치가 있습니다.아마도 당신의 Angular 앱은 초기 요청 동안 엄청난 양의 JS 작업을 하고 있고, 그것은 당신의 CPU를 최대화하고 있을 것입니다. 그래서 당신이 초기 요청을 할 때 전체 브라우저가 지연되고 있습니다.
확인 방법:
- 성능 패널로 이동합니다.
- 녹음을 시작합니다.
- 앱이 처음 요청을 하게 만드는 작업을 수행합니다.
- 녹음은 그만.
- CPU 차트를 확인합니다.만약 그것이 완전히 최대치라면, 당신의 앱은 정말로 많은 일을 하고 있는 것입니다.
이 중 도움이 된 부분이 있으면 댓글로 남겨주시기 바랍니다.
다운로드 상황에 따라 콘텐츠 다운로드 시간이 크게 달라지는 것으로 보여 크롬(현재 91.0.4472.164)에서도 이 문제를 조사하고 있습니다.리소스로 직접 이동하거나 웹 호출의 결과로 렌더링된 콘텐츠를 업데이트하려고 할 때 다른 클라이언트 응용 프로그램에서 만든 콘텐츠나 Chrome의 변수로 데이터를 저장할 때 콘텐츠 다운로드 시간이 최대 10배까지 걸릴 수 있습니다.
github: https://github.com/zielinskin/h2-training-simple 에 공개한 문제를 보여주는 빠르고 해킹된 Spring Boot 웹 애플리케이션을 만들었습니다.
Readme의 단계는 방대한 성능 차이를 보여주기에 충분할 것입니다.
크롬은 웹서버나 ui 프레임워크를 사용하는 것과는 관계가 없기 때문에 이 성능 문제를 해결해야 할 것으로 생각합니다.
"내용 다운로드"는 내용을 다운로드하는 데 걸리는 시간과 서버가 내용을 업로드하는 데 걸리는 시간을 모두 포함합니다.다음 사례를 테스트하여 원인이 무엇인지 확인할 수 있습니다.보통 그것들은 모두 합쳐진 것입니다.
Case 1: 서버 지연
localhost에서 실행 중인 서버 및 클라이언트를 네트워크 지연이 0이고 데이터가 작다고 가정합니다.
time0 client receives a response with header content-length = 20
time5 server > client: 10 bytes of data
time5 client receives data
사례 2: 네트워크 지연
하드코딩된 더미 데이터를 사용하여 서버 속도 향상
time0 client receives a response with header content-length = 20
time0 server > client: 10 bytes of data
time5 client receives data
사례 3: 고객이 너무 바쁩니다.
과 같은 합니다.curl google.com -vURL에 직접 액세스하기 위해 단말기에서.아래와 같이 Chrome Dev tool과 Firefox Dev tool을 사용하여 요청을 복사할 수 있습니다.
언급URL : https://stackoverflow.com/questions/46689410/chrome-network-timing-how-to-improve-content-download
'programing' 카테고리의 다른 글
| MySQL: VARCHAR(255) 대신 VARCHAR(20)를 사용하는 이유는 무엇입니까? (0) | 2023.10.01 |
|---|---|
| AngularJS 출고 시 http가 비어 있음을 반환합니다. (0) | 2023.10.01 |
| 추적된 원격 분기의 변경 사항으로 로컬 분기 업데이트 (0) | 2023.10.01 |
| PHP를 이용하여 .gz 파일을 만드는 방법은 무엇입니까? (0) | 2023.10.01 |
| JSDoc에서 객체 배열을 매개변수 또는 반환 값으로 지정하는 방법은 무엇입니까? (0) | 2023.10.01 |