☰

브라우저는 얼마나 많은 페이지가 로드되었는지 어떻게 알 수 있나요?

tag-icon • tag-icon firefox browser progress
브라우저는 얼마나 많은 페이지가 로드되었는지 어떻게 알 수 있나요?

웹 페이지 로딩 도중 가끔 속도가 느려지는 브라우저의 진행률 표시줄을 보면서, 브라우저가 로딩 속도에 따라 진행 상황을 표시하는지 궁금했습니다.크기페이지나 페이지에 있는 요소의아니요.요소나 다른 것?

Firefox나 다른 브라우저의 소스를 확인해 본 사람이 이에 대해 좀 더 자세히 알고 있을까요?

답변1

무엇~이다웹사이트를 로드 중이신가요?

웹페이지 로딩~이다파일을 다운로드하는 것과 비슷합니다. 서버에서 얻는 것은 대부분의 경우 HTTP를 통해 전송된 HTML 파일입니다. 먼저 사이트의 URL에 대해 HTTP 요청을 합니다 GET http://superuser.com.

William Jackson이 말했듯이 HTTP는 다음을 사용합니다.Content-Length헤더 필드를 사용하여 해당 파일의 크기를 미리 보여줍니다. 이는 브라우저가 전체 사이트 다운로드가 얼마나 진행되었는지 추측하기 위해 평가할 수 있는 것입니다.

그러나 이는 HTML 파일이 참조하여 로드할 수 있는 모든 리소스를 포함하지 못합니다. 여기에는 다음이 포함될 수 있습니다.

  • 외부 이미지
  • 외부 스타일시트
  • 외부 스크립트
  • 프레임
  • AJAX 로드

브라우저는 로드할 양을 어떻게 알 수 있나요?

이제 이러한 참조를 찾아 요청하는 것이 브라우저의 임무입니다. 따라서 각 외부 참조에 대해 브라우저는 캐시를 참조하거나 새 HTTP 요청을 보냅니다. 슈퍼 유저의 경우 더 빠른 성능을 위해 콘텐츠 배포 네트워크에서 호스팅되는 다음 파일이 됩니다.

  • GET http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js– 기본 jQuery 파일
  • GET http://cdn.sstatic.net/js/stub.js– 일부 JS 기능
  • GET http://cdn.sstatic.net/superuser/all.css– 스타일시트
  • ...

타임라인 추적을 활성화하면 Firebug 또는 Chrome의 디버거를 사용하여 실제로 이를 확인할 수 있습니다. 이것은 요청만 표시되도록 필터링된 슈퍼유저 로드 타임라인입니다. 확대하려면 클릭하세요:

여기에 이미지 설명을 입력하세요

보시다시피 기본 슈퍼유저 사이트는 로드하는 데 가장 오랜 시간이 걸리지만 여기에서 계단식으로 다른 페이지 로드(예: HTTP 요청 또는 캐시 요청)가 포함됩니다. 이들 모두는 또한 자신의 를 노출 Content-Length하므로 브라우저는 이러한 모든 파일을 로드하는 데 걸리는 시간을 추측할 수 있습니다.

그리고 이 모든 작업은 매우 짧은 시간 안에 이루어지기 때문에 진행률 표시줄에 작은 불규칙성이 있다는 것을 눈치채지 못할 것입니다. 때로는 진행률 표시줄이 2/3에서 멈추는 것을 볼 수 있습니다. 이는 브라우저가 다른 리소스보다 빠르게 외부 리소스를 로드하지 못하는 경우일 수 있습니다.

브라우저는 이것을 어떻게 구현합니까?

구글 크롬

나는 Google Chrome(일명 Chromium)의 소스를 조사한 결과 다음과 같은 클래스를 발견했습니다.ProgressTracker.cpp. 실제로 이는 Apple에서 작성한 것이므로 아마도 다음에서 유래했을 가능성이 높습니다.웹킷렌더링 엔진. 여기에는 다음 필드가 포함됩니다.

ProgressTracker::ProgressTracker()
    : m_totalPageAndResourceBytesToLoad(0)
    , m_totalBytesReceived(0)

따라서 말씀드린 대로 전체 리소스 바이트 수가 확인되고 이에 따라 진행 상황이 변경됩니다. 처음 로드된 페이지의 실제 중요성이 어떻게 높아지는지 보여주는 흥미로운 설명이 있습니다.

// WebCore의 레이아웃 시스템을 사용하는 문서의 경우 첫 번째 레이아웃을 중간 지점으로 처리합니다.

따라서 첫 번째 페이지가 로드되고 해당 외부 리소스가 아직 로드되는 경우 진행률은 50%입니다.

Firefox(Fission 애드온)

이제 약간 더 쉬운 측정항목도 있습니다. 나는 조사했다분열, Firefox의 진행률 표시줄 확장입니다. 내가 잘못 읽은 것이 아니라면 누구나 쉽게 생각할 수 있는 내용을 담고 있는 것입니다.

모든 웹사이트는 다수의DOM 요소. 첫 번째 HTML 사이트를 구문 분석하면 로드할 전체 DOM 요소 수를 추정할 수 있습니다.

로드된 모든 DOM 요소에 대해 카운터를 늘리고 이에 따라 진행률 표시줄을 표시합니다.

답변2

브라우저가 서버에 파일을 요청하면 서버는 파일 크기를 브라우저에 미리 알려주는 옵션을 갖습니다. 서버는 다음을 보내서 이를 수행합니다.콘텐츠 길이 헤더.

에 대한 다른 정보가 있습니다.브라우저가 다운로드 중인 파일의 크기를 결정하는 방법.

관련 정보