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

css 스타일 파일은 HTML 상단의 헤드에 배치해야 페이지 성능을 높일 수 있습니다. 헤더에 CSS 파일을 넣고 DOM 트리를 생성하기 위해 HTML을 로드할 때 DOM 트리가 동시에 렌더링될 수 있습니다. 이렇게 하면 깜박임, 흰색 화면 또는 혼란스러운 레이아웃을 방지할 수 있습니다.

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

css 스타일 파일은 HTML 상단의 헤드에 배치해야 합니다.

CSS를 헤드에 넣으면 페이지 성능을 높일 수 있습니다.

헤더에 CSS를 배치하고 HTML을 로드하여 DOM 트리를 생성할 때 DOM 트리가 동시에 렌더링될 수 있습니다. 이렇게 하면 깜박임, 흰색 화면 또는 혼란스러운 레이아웃을 방지할 수 있습니다.

이제 더 나은 사용자 경험을 위해 브라우저의 렌더링 엔진은 DOM 트리를 구축하고 레이아웃하기 전에 모든 HTML 요소가 구문 분석될 때까지 기다리지 않으므로 콘텐츠의 일부가 화면에 최대한 빨리 표시됩니다. 구문 분석되어 표시됩니다. 즉, 브라우저는 불완전한 DOM 트리와 CSSOM을 렌더링하여 흰색 화면이 나타나는 시간을 최대한 빨리 줄일 수 있습니다.

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

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

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

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