HTML 작성 시 js는 <body> 태그 내 가장 아래 부분에 위치 시키는 것이라고 알고 있었죠.
물론 맞는 말입니다.
js의 경우 눈에 보여지는 것이 아니기 때문에 HTML 태그가 다 로드된 후에 읽어 들이는 것이 맞겠죠.
그것이 웹페이지의 속도를 높일 수 있는 방법이기도 하구요.
그렇기 때문에 눈에 보여지는 CSS의 경우 <head> 태그 내에 위치 시켜서 HTML 태그들을 조정? 변형? 여튼 시키는 거죠.ㅎㅎ
하지만! 역시나 무조건 적인 것은 없었습니다.
최근에 있었던 일입니다.
간단한 CRM 페이지 구현을 할 일이 있어서 jQuery EasyUI 를 사용하게 되었습니다.
이전 까지는 계속해서 ExtJS 를 사용하다가 좀 무겁기도 하고 새로운 것을 사용하고 싶어서 jQuery EasyUI 를 선택하게 된거죠.
구현하는 내내 페이지의 로딩 속도가 그닥 빠르게 느껴지지 않았습니다.
ExtJS 보다 가벼운거 아니였나? ㅎㅎㅎ
여튼 로컬이니까 그렇겠지?? 라고 그냥 넘겨버렸습니다.
그리고 마침내 서버에 적용하고 난 다음... 멘붕...
왜 느리지???왜??? 도저히 이해가 가지 않았어요.
참고로 jQUery EasyUI 는 이름 그대로 보다 쉽게 편리한 UI를 구현할 수 있는 그런 스크립트입니다.
느린 현상을 말로 표현하자면 간단합니다.
페이지에 내가 HTML 태그로 작성한 엘리먼트들이 나타나고(jQuery EasyUI 적용이 되지 않은) 1초에서 2초 후에 jQuery EasyUI 프레임워크가 적용 된 화면으로 바뀌는 것입니다.
머지머지???라고 외치며 계속되는 구글링...
침착하게 jQuery EasyUI 사이트를 다시 방문해서 천천히 둘러보았습니다.
여기 저기 Demo Sample 소스들을 살펴보는 도중 발견한 공통점 하나!
그건 바로 js 파일들을 모두 <head> 태그 안에서 호출을 하는 것이였습니다.
설마 저건가? 하고 제 소스에도 적용을 해보았죠.
설마가 정답이였습니다.
처음 보여지는 현상이 사라지고 정상적으로 EasyUI 가 적용된 페이지가 처음부터 로드 되더군요.
결론적으로
페이지의 로딩 속도 차이는 머라고 말 할 그런게 아니였습니다.
그냥 EasyUI 가 적용되기 전 HTML 태그들이 잠시 보이는냐 아니면 EasyUI 가 적용된 태그들이 처음부터 보이느냐의 차이였던 거죠.
js 의 경우 보통 <body> 태그 하단에 위치시키는 것이 맞습니다.
하지만 jQuery EasyUI 와 같이 HTML 태그들의 UI를 변경시키는 js 의 경우에는 <head> 태그 내에 위치 시키는 것이 좋습니다.
저와 같은 문제를 겪으신 분이 계시다면 참고하시길...
'『IT/개발』 > HTML' 카테고리의 다른 글
| 자바스크립트(javascript) 에서 JSON 스트링 만들기. (0) | 2015.03.04 |
|---|---|
| [jQuery EasyUI] 콤보박스(Combobox) 의 height 자동 조절. (0) | 2014.12.09 |
| jQuery 라디오(radio)버튼, 체크박스(checkbox) 선택/해제 하기 (0) | 2014.11.30 |
| 티스토리 스크롤 배너 간단하게 하는 방법. (0) | 2014.11.01 |
| Bootstrap 용 bootstrap-monthpicker 예제! (0) | 2014.10.03 |
