브라우저 DevTools의 Network 패널은 어떤 리소스가 있는지 식별하는 데 도움이 됩니다 로드 시점입니다. Network 패널의 각 행은 특정 URL을 표시할 수 있습니다.
<ph type="x-smartling-placeholder">
로드 대상 파악
웹 애플리케이션에 적합한 캐싱 전략을 고안하려면 필요한 경우 정확히 로드 중인 내용을 파악할 수 있습니다. 신뢰할 수 있는 웹을 구축할 때 네트워크는 온갖 암흑 세력의 영향을 받을 수 있습니다. 해야 할 일 네트워크의 취약점을 이해하고 이를 해결하려는 경우 있습니다.
여러분이 웹이 어떤 역할을 하는지에 대해 애플리케이션 로드에 사용할 수 있습니다. 정적 HTML의 작은 분산형을 사용한다면 JavaScript, CSS, 이미지 파일일 수 있습니다. 하지만 시작하자마자 콘텐츠 전송 네트워크에서 호스팅되는 제3자 리소스를 혼합하는 것은 API 요청과 서버 생성 응답을 기반으로 하는 경우 머키어.
몇 개의 작은 CSS 파일에 적합한 캐싱 전략은 아마 예를 들어, 수백 개의 큰 이미지에 적합합니다.
로드 시 확인
전체 로드 상황의 또 다른 부분은 모든 것이 로드되는 시점입니다.
네트워크에 대한 일부 요청(예: 탐색 요청 첫 번째 HTML의 경우 사용자가 지정된 페이지를 방문하는 즉시 무조건 작성되고 URL입니다. 해당 HTML에는 중요한 CSS 또는 JavaScript에 대한 하드코딩 참조가 포함되어 있을 수 있습니다. 이 파일은 대화형 페이지를 표시하기 위해 로드되어야 합니다. 이러한 모든 요청이 중요한 로드 경로에 위치하게 됩니다. 공격적으로 안정적으로 빠르게 캐시합니다
API 요청 또는 지연 로드 애셋과 같은 다른 리소스는 초기 로드가 모두 완료된 후에 로드가 시작됩니다. 만약 이러한 요청은 사용자 상호작용의 특정 시퀀스 이후에만 발생하며 그러면 완전히 다른 리소스 집합이 동일한 페이지를 여러 번 방문할 때 덜 공격적인 캐싱 전략은 콘텐츠에서 저작권 침해가 의심되는 콘텐츠로부터 중요한 로드 경로
이름 열과 유형 열은
이름 열과 유형 열은 무엇이 표시되고 있는지에 대한 의미 있는 정보를 제공하는 데 있습니다. '로드 중인 것은?'에 대한 답은 위의 예에서 4개의 URL로 구성되어 있으며 각 URL은 고유한 콘텐츠 유형을 나타냅니다.
이름은 브라우저에서 요청한 URL을 나타내지만
URL 경로의 마지막 부분입니다. 예를 들어
https://example.com/main.css가 로드되어 main.css만 표시됩니다.
표시됩니다.
마침표 (예: 'css')는 URL의 확장자라고 합니다.
URL 확장 프로그램은 일반적으로 어떤 유형의 리소스가 요청되고 있는지 알려주며
유형 열에 표시된 정보에 직접 매핑됩니다. 예를 들어
v2.html는 문서이고 main.css는 스타일시트입니다.
폭포식 구조 열은
맨 위에서 시작하여 아래로 내려가면서 폭포 열을 확인합니다. 이 각 막대의 길이는 로드하는 데 걸린 총 시간을 나타냅니다. 리소스마다 다릅니다 '서비스'로 전송된 요청과 동적으로 시작되는 요청이 있을 때 얼마나 오래 걸리는가?
폭포식 구조의 첫 번째 요청은 항상 HTML 문서에 대한 요청이며,
예: v2.html 이후의 모든 요청이 전달됩니다 (예:
폭포식 구조)을 표시합니다.
HTML 문서 참조의 스타일을 지정합니다.
폭포식 구조는 v2.html 로드가 완료되는 즉시 요청이
참조하는 애셋 (하위 리소스라고도 함)이 시작됩니다. 이
동시에 여러 하위 리소스를 요청할 수 있으며
main.css의 Waterfall 열에서 겹치는 막대로 표시됩니다.
logo.svg입니다. 마지막으로 main.js가 시작되는 스크린샷을 볼 수 있습니다.
다른 세 URL의 로드가 완료되면
확인할 수 있습니다