>웹 프론트엔드 >CSS 튜토리얼 >CSS를 맨 위에 두고 js를 맨 아래에 두는 이유는 무엇입니까?

CSS를 맨 위에 두고 js를 맨 아래에 두는 이유는 무엇입니까?

藏色散人
藏色散人원래의
2021-01-27 09:12:283740검색

Css가 위에 배치되고 js가 아래에 배치되는 이유: 1. DOM 트리를 생성하기 위해 HTML을 로드할 때 DOM 트리가 동시에 렌더링될 수 있으므로 깜박임, 흰색 화면 또는 혼란스러운 레이아웃을 방지할 수 있습니다. JavaScript는 로딩 직후에 실행되며 후속 리소스 로딩을 차단합니다.

CSS를 맨 위에 두고 js를 맨 아래에 두는 이유는 무엇입니까?

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

추천: css 비디오 튜토리얼

href와 src의 차이점

일반적으로 href는 CSS를 로드하는 데 사용되고 src는 스크립트를 로드하는 데 사용되며 본문 아래에 배치됩니다.

href

은 hypertext reference의 약어로, 하이퍼텍스트 참조를 의미하며 현재 요소와 문서 사이의 링크를 설정하는 데 사용됩니다. 일반적으로 사용되는 것에는 link 및 a가 포함됩니다.

CSS가 href 참조를 사용하는 경우 브라우저는 문서를 인식하고 CSS를 요청하고 병렬로 다운로드하며 현재 문서 로드를 중단하지 않습니다.

src

는 source의 약어로 페이지의 필수 부분이자 리소스이며, src가 가리키는 내용이 문서 내 현재 태그 위치에 삽입됩니다. 일반적으로 사용되는 것에는 img, script 및 iframe이 있습니다.

스크립트가 src 참조를 사용하면 브라우저가 요소를 구문 분석할 때 리소스가 로드될 때까지 문서 렌더링이 중지됩니다. 스크립트가 헤드가 아닌 하단에 배치되는 이유이기도 합니다.

CSS를 헤드에 넣고 스크립트를 하단에 넣는 이유

1. CSS를 헤드에 넣습니다

DOM 트리를 생성하기 위해 html을 로딩할 때 DOM 트리가 동시에 렌더링될 수 있습니다.

이렇게 하면 깜박임, 흰색 화면 또는 혼란스러운 레이아웃을 방지할 수 있습니다.

2. javascript를 뒤에 넣습니다.

javascript는 DOM 트리의 구조를 변경할 수 있으므로 안정적인 DOM 트리가 필요합니다.

Javascript는 로드 후 즉시 실행되며 후속 리소스 로드를 차단합니다. (자바스크립트 로딩 및 실행의 특징)

지식 확장:

1. 먼저 몇 가지 일반적인 문제를 이해해 보겠습니다.

1.페이지를 최적화할 때 CSS를 헤드에 넣고 js 파일을 넣어야 합니다. 결국, 이것이 페이지 최적화를 달성할 수 있는 이유는 무엇입니까?

2. jquery를 사용할 때 $(document).ready() 이벤트에 함수를 작성하는 이유는 무엇입니까?

3.javascript는 dom 구문 분석을 차단합니다.

파싱 프로세스 중에