[JavaScript][tip]웹사이트 최적화 기법 중 몇가지 소개

ITC 출판사의 웹사이트 최적화 기법 - UI 개발자를 위한 필수 지침서
위 책을 보면서 몇가지 괜찮은 것들을 알게 되었네요. (이미 알고 있거나 애매한 부분들에 대한 정리가 되어 좋았습니다.)
그 중 몇가지를 아래 소개합니다.
좀더 자세한 내용은 책을 참고하면 좋을 듯 하네요.

1. StyleSheet는 헤더에 넣어라.
display가 되기 전에 해당 스타일이 지정이 되어야 한다.
만약 display가 된 이후 스타일이 지정이 되면 화면이 재 로딩이 되어야 하기 때문에 그만큼 리소스가 낭비된다.

2. JavaScript는 아래에 넣어라.
function안에 존재 하지 않는 JavaScript 함수와 변수는 페이지가 로딩되면서 바로 호출이 된다.
따라서 페이지가 로딩되면서 호출되는 JavaScript가 Display와 관련이 있게 되면 해당 display코드가 호출된 이후에 넣어주어야 한다.
그렇지 않으면 페이지를 찾을 수 없다는 오류가 발생하게 된다.

또다른 방법으로 onload가 된 이후에 호출을 하는 방법도 있지만 이는 이미지가 로드되는 시점이 끝난 이후에 호출되기 때문에 페이지 액션속도를 매우 느리게 만든다.

3. CSS와 JavaScript를 외부 파일에 넣어라.
한번 로드된 css와 js파일은 재 호출시엔 304로 재활용이 되어진다.
따라서 여러 페이지를 방문할 수록 효율이 높아지게 되며, 코드 관리상의 이점이 있다.

4. 리다이렉트는 피하라.
대표적인 것이 다음과 같은 것이다.

http://주소

http://주소/

위의 경우 어떤 차이가 있을까?
첫번째 주소로 가게 되어서 만약 주소가 마지막 호출 정보가 아니라면
두번째 주소의 인덱스 페이지로 페이지가 리다이렉트 된다.
따라서 리다이렉트로 인한 요청대기시간으로 인한 리소스 낭비가 된다.
이러한 링크의 끝 주소 값에 의해서도 페이지 로딩 시간의 달라진다.

5. http요청을 줄여라.
책을 통해서도 괜찮은 기법들을 소개하고는 있지만
근본적인 요청회수를 줄이는 것을 개발하면서 염두에 두어야 할 것이다.