CSS 파일은 어디에 배치해야 합니까?

CSS 파일은 HTML 상단의 헤드에 위치해야 합니다. 이유: 브라우저는 HTML 문서를 위에서 아래로 구문 분석합니다. 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는 로딩 과정에서 DOM 트리 생성에는 영향을 미치지 않지만, 렌더 트리 생성에는 영향을 미치고, 이는 결국 레이아웃에 영향을 미치므로 일반적으로 스타일의 링크 태그를 배치해야 합니다. 구문 분석하는 동안 DOM 트리가 하향식이고 CSS 스타일이 비동기적으로 로드되기 때문에 가능한 한 많이 머리에 있어야 합니다. 이 경우 DOM 트리 아래의 본문 노드를 구문 분석하고 CSS 스타일을 로드하는 것은 가능한 한 병렬이 될 수 있습니다. , 렌더 트리 생성 속도를 높입니다.

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

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

위 내용은 CSS 파일은 어디에 배치해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!