Css가 위에 배치되고 js가 아래에 배치되는 이유: 1. DOM 트리를 생성하기 위해 HTML을 로드할 때 DOM 트리가 동시에 렌더링될 수 있으므로 깜박임, 흰색 화면 또는 혼란스러운 레이아웃을 방지할 수 있습니다. JavaScript는 로딩 직후에 실행되며 후속 리소스 로딩을 차단합니다.
이 기사의 운영 환경: 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 구문 분석을 차단합니다.
파싱 프로세스 중에
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
