728x90
반응형
일반적으로 html에서 js와 css를 import 할 때 css의 <link>는 <head>에, js의 script는 <body>에 선언하는데, 그 이유는 무엇일까?
css의 link를 head에 선언하는 이유
이는 최적화된 웹사이트를 구축하기 위해 필요하다.
html과 css는 시각적인 부분을 담당하기 떄문에 페이지가 처음 로드되면 HTML과 CSS(head 안에 있는 경우)가 함께 파싱된다.
HTML은 DOM(Document Object Model)을 만들고 CSS는 *CSSOM(CSS Object Model)을 만든다
stylesheet가 body에 선언되게 된다면?
HTML이 먼저 렌더링 되고 그 다음에 CSS스타일이 적용된다. 즉, 2번 렌더링 되기 때문에 비효율적이다
js script를 body 끝에 선언하는 이유
HTML이 파싱될 때, script태그를 만나면 그 안에 있는 JS의 처리가 끝날 때까지 다른 HTML의 해석을 멈춘다.
그렇기 때문에 가장 무거운 JS를 맨 뒤에 선언해서 미완성된 화면이 오랫동안 지속되지 않도록 한다.
또한 DOM에서 원하는 HTML요소를 불러오지 못하는 오류가 생길 수 있기에 JS를 body맨 끝에 선언한다.
* CSSOM : CSS객체 모델의 DOM이 CSSOM이다.
즉, HTML대신 CSS에 대해 DOM프로세스를 진행하고, CSSOM도 트리구조를 갖는다
참고
728x90
반응형
'junior developer :) > JS_JavaScript' 카테고리의 다른 글
| 객체지향 프로그래밍 (OOP : Object-Oriented Programming) (0) | 2022.09.21 |
|---|---|
| 객체지향 프로그래밍 1. 클래스와 인스턴스 (0) | 2022.09.21 |
| 함수 선언식 vs 함수 표현식 vs 화살표 함수 (JS) (0) | 2022.09.15 |
| DOM 이란? / Tree 자료구조 (JS) (0) | 2022.09.13 |
| 깊은 복사_Deep Copy vs 얕은 복사_Shallow Copy (JS) (0) | 2022.09.09 |
