브라우저가 서식 없이 페이지를 렌더링할 때 뒤에서 무슨 일이 일어나고 있나요?

브라우저가 서식 없이 페이지를 렌더링할 때 뒤에서 무슨 일이 일어나고 있나요?

예를 들어, 때때로 Facebook은 페이지 왼쪽에 그래픽이 거의 없고 기본 파란색 링크가 많이 로드됩니다.

인터넷 연결에 문제가 있는 것처럼 보일 때도 있고 해당 사이트에만 문제가 있는 것처럼 보일 때도 있습니다. 해당 문제에 대한 자세한 설명을 듣고 싶습니다.

답변1

일반적으로 이는 기본 HTML 페이지에 (어떤 이유로든) 로드에 실패한 CSS 스타일시트에 대한 링크가 포함되어 있음을 의미합니다. 스타일시트를 사용할 수 없기 때문에 브라우저는 기본 스타일을 사용하여 페이지를 렌더링합니다(따라서 CSS가 지정한 위치 정보, 배경 그래픽, 링크 색상 등이 손실됨). 특히 많은 최신 웹사이트에서는 CSS를 사용하여 <div>화면에 을 배치하므로 CSS가 없으면 탐색 링크가 기본 위치(왼쪽 정렬, 페이지 아래로 이어짐)에 표시됩니다.

가능한 원인들:

  • 불안정한 네트워크 연결(예: 기본 페이지가 로드된 후 리소스 다운로드 시간이 초과됨)
  • 기본 HTML 페이지가 캐시에 남아 있는 인터넷 연결 끊김
  • HTML 페이지가 로드된 후 리소스가 로드되기 전에 페이지 로드를 취소했습니다.
  • 서버가 빈 응답을 반환했습니다(아마도 잘못된 로컬 네트워크 연결, 잘못된 프록시 또는 임시 서버 결함으로 인해).

    특히 일반적인 경우 중 하나는 HTML 페이지가 하나의 웹 사이트나 도메인에서 호스팅되고 대부분의 링크된 리소스가 다른 도메인에 있다는 것입니다. 예를 들어, 슈퍼 유저( superuser.com)는 의 스타일시트 및 UI 이미지(투표 화살표 등) cdn.sstatic.net, 의 사용자 아바타 www.gravatar.com, 의 콘텐츠 이미지를 나타냅니다 stack.imgur.com. 계속 켜져 있는 sstatic.net동안 일시적으로 다운 되면 superuser.com설명하는 것과 유사한 효과를 얻게 됩니다.

페이지에 "그래픽이 거의 없음"이 표시된다고 언급하셨습니다. 웹사이트가 CSS를 사용하여 대부분의 그래픽을 배경 이미지로 지정하는 것이 가능합니다. 아마도 페이지에 연결된 대부분의 리소스(스타일시트 및 이미지 포함)가 로드되지 않을 가능성이 높습니다. 이로 인해 설명하신 두 가지 문제(형식 손실 및 이미지 손실)가 발생합니다.

로드되는 이미지는 서버 또는 프록시 결함의 영향을 받지 않거나(이미지는 종종 기본 웹 페이지와 다른 서버 또는 도메인에서 호스팅됨) 이미 브라우저 캐시에 있었습니다(따라서 브라우저가 이미지를 가져오려고 시도하지 않음). 오류 방지).

관련 정보