2012년 5월 17일 목요일
자바스크립트는 도대체 어디에 넣어야될까요?
일단 넣는 방식은
1.head 사이에
2.body안에
이 두가지로 압축 되어집니다
많이들 head안에 넣어야 된다 생각하고 있는데
제가 여러가지 찾아본 결과 body태그가 끝나는곳 (</body> ) 위에 올려놓길 권장하고 있습니다
대체 왜 여기에 놓길 권장할까요?
이건 http://naradesign.net/wp/2008/05/23/142/
에 있는 설명을 인용하도록 하겠습니다
웹 브라우저는 컴파일형식(한번에 싹~ 해석하고 보여주는 형식)으로 하지 않고,
인터프리터 형식(한줄한줄 읽는 형식)을 사용하고 있습니다.
이 순서대로 하면 <html>태그를 읽고 <head> 태그 밑에 있는 태그들을 읽게되는데 이때 자바스크립트 코드를 만나게 되면
자바스크립트가 전부 읽히기 전까지 아래 있는 모든 태그, 기타 다른 것들이(flash, css, html tag)등이 로드를 멈추게 됩니다.
특히 비동기통신 (ajax)와 같은 것들을 사용하게 되면 더 큰문제가 되겠지요.
이를 해결 하기 위해선
1.
<script type="text/javascript" defer="defer"> 이러한 형식으로 defer태그를 써서 나중에 실행되게 하는 방법이 있습니다
하지만 이건 모든 브라우저에선 지원 되지 않는거같습니다(파이어폭스도 지원하지만 버전 타는것으로 확인됩니다)
2. body 태그 끝나는 위치 위에 적는 방법이 있습니다
근래들어 많이 사용되고 있는 방식이며 이렇게 맨 밑으로 보내줘야 dom element들과 기타 다른 flash 등등 이것저것 자원들을 다운로드 하며 스크립트도 받는 "병렬"적 다운로드가 가능해지기 때문에 실행시간과 렌더링 속도가 월등히 빨라지는것을 느끼실수 있습니다
* defer 속성 : 브라우저에 해당 스크립트는 문서컨텐츠를 생성하지 않는것을 명시함
- 이에따라 문서의 나머지 부분을 먼저 출력하고 스크립트를 처리함
보충 설명!!
위에서 document.ready에 대한 것은 언급하지 않았습니다.
document.ready or head.js(스크립트 병렬적재 플러그인) 을 사용할지라도
html출력이 끝난시점으로 옮겨두는것이 훨씬 빠른것은
http://kwon37xi.egloos.com/4688068 이 링크에서 읽어보시면 아실겁니다
얼추 5~10배정도 빠른거 같습니다
참고사이트 :
1. http://mytory.co.kr/archives/1225 (구글 페이지 스피드의 Defer Loading of JavaScript 항목을 번역한 내용)
2. http://naradesign.net/wp/2008/05/23/142/ (웹 페이지 성능향상을 위한 Javascript 코드의 지연 )
참고보충 사이트 :
1.http://benant.wordpress.com/2009/04/01/documentready%EC%9D%98-%EB%AC%B8%EC%A0%9C%EC%A0%90/ (document.ready사용시의 문제점)
피드 구독하기:
댓글 (Atom)
댓글 없음:
댓글 쓰기