웹페이지 성능향상을 위한 자바스크립트 삽입방식과 위치

들어가며

점심먹고 천근만근 무거운 눈을 겨우 치켜세우며 포스팅을 시작해볼까한다.

임시저장된 파일이 너무 많다...

이 글에서는 웹페이지의 성능을 향상시키기 위해 자바스크립트를 어떤 방식으로 삽입해야하는지 어디에 위치시켜야 하는지 설명한다.

예전에는 HTML문서안에 css와 js를 전부다 합쳐놓았으나 유지보수와 성능의 문제로 인하여 외부파일로 돌린지 오래다.

1
2
3
4
5
<scirpt type="text/javascript">
// 코드내용
</script>
 
<script type="text/javascript" src="//링크주소"></script>
cs

type="text/javascript" 는 HTML5 에서는 생략해도 무방하다.
심플하고 가벼운 페이지의 경우 따로 분리하지 않고 전자의 경우처럼 문서안에 코드가 위치할 수 있다.
후자는 문서에서 사용되는 javascript를 따로 js파일로 만들어놓고 외부에서 불러들여서 사용한다. 코드의 가독성을 높여주고 문서전체의 흐름을 한눈에 파악하기 쉬운 방법이다. 웹표준에서 사용되는 방식.

브라우저는 웹문서의 <head> 부분을 먼저 해석한 뒤 <body> 부분의 해석을 실행한다.

우리는 대부분 <head> 부분에 <script> 를 링크시켜놓게 된다.

이때 <script> 부분의 해석이 오래 걸린다면?

브라우저의 HTML구조와 CSS스타일에 대한 렌더링이 늦어지게 되므로 사용자는 백지화면을 먼저 맞이하게 될 것이다!

1
2
3
4
5
6
<head>
    <script type="text/javascript">
    // 코드내용
    </script>
</head>
 
Colored by Color Scripter
cs

1
2
3
4
5
6
<body>
    // HTML 코딩들 중략
    <script type="text/javascript">
    // 코드내용
    </script>
</body>
cs

1
2
3
<script type="text/javascript" defer="defer">
    // 코드내용
</script>
Colored by Color Scripter
cs

CMS도구( 워드프레스나 티스토리 )를 사용하면 <script> 위치를 마음대로 바꿀 수가 없는데 대신 속성에 defer 를 추가하여 해석은 연기할 수 있다.

하지만 defer 속성은 IE만 지원한다.