이전에 포스트에서 언급하였듯이, 프로젝트 중 코드블럭에 highlighting 기능을 넣기 위해 highlight.js 라이브러리의 cdn을 이용하였는데 script의 선언 위치에 따라 브라우저의 실행속도에 영향을 미친다는 것을 알게되었다.
1. 브라우저의 동작 방식
먼저 브라우저 동작방식에 대해 알아야하는데 간단하게 서술하면 다음과 같다.
- HTML을 읽기 시작함
- HTML 파싱(파싱,parsing: 컴퓨터가 읽을 수 있는 코드로 바꾸는 작업)
- DOM 트리 생성
- Render 트리 생성
- 브라우저(display)에 표시
위의 과정 중 HTML을 읽어내려가는 과정에서 script요소를 만나면 파싱을 중단하고 javascript 파일을 로드, javascript 코드를 파싱 후에 다시 HTML 파싱이 계속된다.
javascript는 싱글스레드로 동작하는데, 한가지 일을 하고 있을때 모든 작업이 block 된다는 뜻이다. 결론적으로 script의 위치와 javascript 코드의 양에 따라 브라우저 화면 로딩이 느려져 사용자에게 불편함을 줄 수 있다.
2. script 선언 위치에 따른 특징
웹 개발시 역할을 나누어 페이지를 개발하다보면 script 코드 위치는 다양하게 분포가 되지만, 보통 크게 상단과 하단에 위치한다.
1) 상단의 <head> 태그에 위치한 경우
: 제일 빨리 실행되는 위치이지만 <body>에 있는 DOM 요소가 파싱 되기 전이여서 스크립트는 실행되지만 값을 세팅할 수 없다. 그래서 DOM요소를 접근할 일이 없고 가장 빠르게 실행하고 싶은 경우에 상단에서 선언한다.
2) <body> 태그의 제일 하단에 위치한 경우
: 모든 DOM 요소가 파싱된 후에 실행되는 코드이다. DOM을 제어하는 코드를 가장 빠르게 실행할 수 있다. 또한 HTML을 읽는 과정에서 중간에 스크립트를 만나 중단되는 시점이 생기지 않으므로 브라우저의 display에 표시되는 것이 지연되지 않는다.
Project를 통한 확인
내가 작성했던 코드에서는 가시성을 위해 base.html 파일의 <head> 태그에 두 개의 script를 선언시켜놨었다. 하나는 아이콘 적용을 위한 CDN 코드, 나머지 하나는 codeblock에 highlighting을 위한 CDN 코드이다. 속도 개선을 위해 다음과 같이 수정 했다.
- 아이콘 적용은
base.html파일의<body>태그 안 하단으로 이동 - highlight.js 코드는
post_detail.html파일의 하단으로 이동 (highlighting 기능은 post 페이지 안에서 말고는 사용 되지 않기 때문)
코드 변경 전
- 메인 화면 전환 시
- 게시물 화면 전환 시
변경 후
- 메인 화면 전환 시
- 게시물 화면 전환 시
