Script 위치의 중요성 #2

나는 게시글 조회 수정 삭제를 구현하고 있었다.

그 중에서 수정을 구현하면서 게시글 번호와 작성자의 정보를 얻고

이 정보를 이용해서 DB를 UPDATE 하려고 했다.

 

그래서 테이블 ROW를 클릭 하면 행의 값을 가져오려고 하였으나 

구글링한 코드에서는 행에 있는 값을 가지고오지 못했다. 

그렇게 검색과 분석을 반복한지 3시간이 지났다.

Script태그 위치를 옮겨보자 하고 수정했는데 허무하게 값이 잘나온다.

 

그래서 script 태그의 위치에 따른 차이점을 찾아보니

브라우저의 동작 방식이 있었다.

1. 브라우저는 HTML을 읽기 시작한다.
2. HTML을 파싱한다.
3. (parsing : 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업)
4. DOM 트리를 생성한다.
5. (DOM : 문서 객체 모델 (=Document Object Model) - 웹페이지에 대한 인터페이스로, HTML의 각 항목을 계층(=트리)으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스)
6. Render 트리를 생성한다.
7. (DOM 트리 + CSS의 CSSOM 트리 결합)
8. 브라우저에 표시된다.

만약 HTML 상단에 script가 있다면?

• 위의 1~2의 과정이 중요
• HTML을 읽어 내리는 과정에서 script 요소를 만나면 파싱을 중단.
• 중단된 상태에서 script 요소를 로드 후, script 코드를 파싱.
• script 구문이 지나면, 다시 HTML 파싱이 이어진다.

HTML을 읽는 과정에서 자바스크립트 로드와 파싱을 위해서 중단되는 시점이 생기고,
그만큼 Display에 표시되는 것이 지연된다.

  

 

출처 - 참고사이트

https://velog.io/@miyoni/TIL15

TIL15 | JavaScript | script 태그의 위치에 따른 차이점

https://webdir.tistory.com/514

자바스크립트 삽입방식과 위치

https://junhobaik.github.io/js-script-position/

HTML에서 script태그는 어디에 위치해야 할까?