출처 : http://naradesign.net/wp/2008/05/23/142/
웹 페이지 성능향상을 위한 Javascript 코드의 지연.
안녕하세요? 오늘은 매우 간단한 방법으로 웹 페이지의 성능을 크게 향상시킬 수 있는 팁 하나를 공유하고자 합니다. 혹시 알고 계셨나요? Javascript코드의 배치를 바꾸거나 간단한 속성을 추가하는 것만으로도 웹 페이지는 더 빠르게 화면을 렌더링 하게 됩니다. Yahoo.com 에 근무하며High Performance Web Site라는 책을 저술했던 Steve Souders는 친절하게도 자신의 웹 사이트를 통하여 책에 있는 14가지 지침에 대한 예제를 공개하고 있습니다. 그것이 바로 14 Rules for Faster-Loading Web Sites 입니다. 포털의 UI부서에 근무하시는 분들에게는 거의 웹 페이지 성능에 관한 교과서로 읽힌다고 해도 과언이 아닐껍니다. 오늘 소개할 내용은 14원칙중 6번째인 ‘Put Scripts at the Bottom‘편이지만 그 밖의 나머지 지침들도 강력하게 권해드립니다.
<script>는 <body>~</body>요소의 닫기 태그 바로 위에 적습니다
웹 브라우저는 HTML/CSS/Javascript 구문을 해석(Parsing)할 때 하나의 파일을 모두 해석한 다음 한꺼번에 화면에 출력하지 않고 한줄 한줄씩 해석해내는대로 화면에 출력해 냅니다. 따라서 문서 <head>~</head>에 포함된 <script>문을 모두 해석한 다음 본문에 해당하는 <body>~</body>영역을 출력하게 되죠. 이때 <script>문을 해석하는 시간이 오래 걸린다면 어떻게 될까요? 웹 브라우저 화면과 사용자의 얼굴은 하얗게 질려 있겠죠. 때문에 Steve Souder는 말했습니다. ‘Put Scripts at the Bottom‘ 스크립트는 바닥에 넣으라고 말이죠. Script Top vs. Bottom 이라는 페이지를 확인해 보세요. 어느쪽이 빨리 뜨는지. 단, <script> 요소는 반드시 <body>~</body> 안쪽에 포함되어 있어야 합니다. <head>~</head>또는 <body>~</body>영역 바깥쪽에 <script>를 넣으면 문법적으로 유효하지 않기 때문에 HTML Validation 오류를 만나시게 됩니다.
<script> 요소에 defer="defer" 속성을 사용합니다.
defer라는 단어는 우리말로 ‘연기하다, 미루다, 유예하다’라는 의미 입니다. 웹 페이지의 성능을 위하여 HTML 코드와 CSS 코드는 절대로 뒤로 미루어선 안되지만 script는 잠깐 지연시켜도 됩니다. 그 이유는 화면 렌더링과 관련된 대부분의 코드는 HTML/CSS 안에 포함되어 있으며 대부분의 script는 사용자의 액션이 발생한 이후의 동작을 렌더링하고 있기 때문입니다. 앞서 우리는 <script> 구문을 페이지의 아래쪽에 두면서 스크립트 코드를 지연시키는 방법을 알게 되었습니다. 하지만 굳이 <head>~</head>안에 포함시켜야 한다면? 웹 사이트에 CMS(Content Management System)도구를 사용하는등 여러가지 이유로 <script> 코드의 위치를 마음대로 바꿀 수 없는 경우라면 <script>코드의 위치를 바꾸는 대신 defer 속성을 기입하여 HTML코드의 해석이 끝난 이후로 지연시킬 수 있습니다. 그것이 바로 defer 속성입니다. 참고 : defer속성이 사용된 예제 페이지.
<script type="text/javascript" defer="defer">
하지만 defer는 현재 Internet Explorer 브라우저에서만 지원하고 있습니다. 그렇다면 defer 속성이 MS전용 속성이 아닌가 생각하실 텐데 그렇다면 제가 감히 이렇게 소개해 드리겠습니까? 표준 속성이 맞습니다. W3C > HTML 4.01 > Scripts > defer. 맨날 Internet Explorer 욕만 했는데 오늘은 칭찬꺼리 하나 나왔네요. Firefox, Opera, Safari 뭐하는겁니까? defer 속성도 지원 안해주고. 잘좀 해봐요.