[Javascript HighPerformance] 스크립트 실행 속도 높이기

목차

 

자바스크립트는 위에서 아래로 순서대로 실행되는 인터프리터 언어이다. 컴파일을 하지 않으며 한줄 한줄 읽어나가며 실행을 한다.

 

요새 IT기술들이 메모리도 좋아지고, 서버도 빨라지고 워낙에 좋아져서 소스코드를 완전 더럽게 짜지 않는이상 웬만큼 속도는 비슷하다.

하지만 인터넷속도가 빠르다는 것은 우리나라 이야기이지 해외에서는 아직도 많이 느리다고들 한다.

 

화면을 띄우기 위해서 HTML, Javascript, CSS, 웹 언어(php, jsp, asp) 등을 많이 쓴다.
그 중 자바스크립트는 클라이언트에서 실행되는 언어이며 화면을 띄우는데 실행속도를 높이는 알아보자

 

HTML과 Javascript, CSS 는 위에서 말했듯이 한줄 한줄 읽는 언어이다.

HTML : 웹 페이지의 화면을 구성
Javascript : 웹 페이지의 화면을 동적으로 변경 및 브라우저 조작을 이용하여 화면을 구성
CSS : 웹 페이지의 화면을 디자인 해주는 요소

 

이중 HTML 언어가 웹 페이지의 화면을 띄우는 작업을 해준다 <div> <table> <h1> 등등 ...

자바스크립트는 이를 동적으로 변경 또는 외부 플러그인 등을 통해 좀 더 유연하게 웹 페이지를 만들고자 사용을 한다.

 

※ 자바스크립트안에 동적으로 DOM을 변경하는 요소가 없다고 가정

보통 자바스크립트는 HTML의 <head> 태그안에 많이 삽입해서 사용한다.

위와 같이 사용을 해도 상관은 없지만

file1,js , file2,js, files3.js 의 용량이 커서 불러오는데 각각 1초 이상 걸린다고 가정해보자.

그렇게 된다면 대략 3초동안 파일을 로드시키고 <body>의 구문을 해석한다.

 

즉 3초 동안 웹 페이지는 빈 화면으로 사용자를 기다리게 만든다.

 

 

이를 개선하기 위해서 스크립트를 효율적으로 작성하고 싶으면 </body> 태그 바로 위에 작성 하는 것이 좋다

이렇게 작성을 한다면 <body>의 화면을 구성하는 HTML작업을 먼저 띄워주고 자바스크립트를 로드하게 되어
사용자들은 웹 페이지의 느린 거부감이 없게 된다.

 

 

파일이 작은 스크립트라면 위와같이 3개로 하지 말고 1개로 통합시켜서 처리를 하는 것이 좋다.

  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유