CSS 스타일시트는 문서의 어떤 영역에 있나요?

CSS 스타일 시트는 문서의 "머리" 영역에 있습니다. 왜냐하면 CSS를 하단에 배치하면 페이지가 점진적으로 렌더링될 수 있지만 CSS를 다운로드하고 파싱한 후에는 렌더링된 텍스트와 이미지를 새로운 스타일에 따라 다시 그려야 하므로 나쁜 사용자가 되기 때문입니다. 경험.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css 스타일시트는 HTML 문서 상단의 헤드에 있습니다.

왜?

<link rel="stylesheet" href="home.css">

링크 태그의 href(HyperText 참조) 속성은 CSS가 href 참조를 사용하면 브라우저가 해당 문서를 CSS로 인식하고 현재 문서를 중단하지 않고 병렬로 다운로드합니다. . 로딩, DOM 트리를 생성하기 위해 HTML을 로드할 때 DOM 트리가 동시에 렌더링될 수 있으므로 깜박임, 흰색 화면 또는 혼란스러운 레이아웃을 방지할 수 있습니다.

가장 이상적인 상황에서는 브라우저가 다운로드한 CSS를 점진적으로 렌더링하고 점진적으로 페이지를 사용자에게 표시하기를 바랍니다. 그러나 스타일이 변경될 때 페이지 요소가 다시 렌더링되는 것을 방지하기 위해 브라우저는 페이지를 한 번에 렌더링하기 전에 모든 스타일이 로드될 때까지 기다립니다.

CSS 파일을 맨 아래에 배치하면 브라우저가 마지막 CSS 파일 다운로드를 기다리는 동안 브라우저에서 콘텐츠가 점차적으로 표시되지 않도록 합니다. "흰색 화면"이 나타납니다. 새 연결이 열리면 화면이 나타나고 텍스트가 먼저 나타나고 사진, 스타일이 마지막에 나타납니다. 이는 네트워크 속도가 매우 느리면 CSS 다운로드 시간이 상대적으로 길어서 자연스럽게 사용자에게 오랫동안 "흰색 화면"을 제공하고 사용자 경험이 매우 열악하기 때문에 매우 심각합니다.

CSS를 맨 아래에 넣으면 페이지가 점진적으로 렌더링될 수 있지만 CSS를 다운로드하고 구문 분석한 후에는 렌더링된 텍스트와 이미지를 새로운 스타일에 따라 다시 그려야 합니다. .

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS 스타일시트는 문서의 어떤 영역에 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!