Chapter 12. 중복되는 스크립트를 제거하라.
한 페이지에 같은 자바스크립트를 포함시키면 당연히 성능에 좋지 않다. 누가 그런 실수를 하겠냐마는 많은 팀의 많은 사람들이 같은 페이지를 작업하게 된다면 발생할 수 있는 일이다.
1. 스크립트 중복이 성능에 주는 악영향.
페이지 안에 같은 스크립트가 여러 번 포함될 경우 페이지가 더 느려진다.
IE에서는 스크립트를 캐시에 저장할 수 없거나 페이지가 리로드 될 경우 추가적인 HTTP 요청을 보낸다.
파이어폭스와 IE에서 스크립트를 모두 여러 번 실행된다.
2. 중복스크립트를 피하는 방법.
시스템에 자바스크립트 관리 모듈을 만든다. ...
스크립트가 한 번만 포함되어 있는지 확인하라.
Chapter10. 자바스크립트를 최소화하라.
1. 최소화(minification).
최소화는 코드의 불필요한 문자를 줄여서 파일 크기를 줄여 로딩 시간을 개선하는 것을 말한다. 코드를 최소화하면 모든 주석뿐만 아니라 필요 없는 공백(스페이스, 개행, 탭)이 제거 된다. 자바스크립트의 경우 다운로드되는 파일의 용량이 줄어들기 때문에 응답 시간이 더 빨라진다.
2. 난독화(obfuscation).
난독화는 소스 코드에 적용되는 최소화의 대안적인 기술이다. 난독화는 주석과공백 뿐만 아니라 코드 또한 변경하여 알아보기 힘들게 만든다. 코드 변경은 함수와 변수의 이름을 더 짧게 만들기 때문에 성능에는 도움이 되지만 읽기가 어려워지고 버그 발생 확률이 오르며, 유지보수 및 디버깅 또한 더 어렵다.
3. 얼마나 절약되는가?
자바스크립트를 최소화하는 가장 대표적인 툴은 더글러스 크록퍼드가 개발한 JSMin 이다. 난독화의 경우 Dojo Compressor(ShrinkSafe)가 무난하며 선택의 폭이 좁다. 보통은 난독화의 위험을 감수할 만한 추가적인 이득은 없으며 100K이상의 큰 자바스크립트를 가지고 있을 경우 가끔 난독화를 적용하기도 한다. gzip을 추가할 경우 둘의 차이는 더 줄어든다.
4. 예제.
http://stevesouders.com/
5. 금상첨화.
ㄱ. 인라인스크립트.
외부 파일 자바스크립트 뿐만 아니라 인라인스크립트 까지 최소화 하라.
ㄴ. Gzip의 최소화.
JSMin 이나 Dojo Compressor 이후 Gzip을 적용하면 큰 효과를 볼 수 있으며, 굳이 난독화 할 필요없이 최소화만으로 파일 크기의 절감의 효율성을 확인 할 수 있다.
ㄷ. CSS 의 최소화.
CSS는 일반적으로 자바스크립트보다 공백이나 주석이 더 적기 때문에 큰 효과를 볼 수는 없지만 동일한 클래스는 합치고 사용하지 않는 것은 삭제하며 단축('#660066' 대신 '#606')을 이용하고 불필요한 문자를 제거('0px' 대신 '0')하여 최소화를 할 수 있다.
자바스크립트 코드를 최소화하라.
Chapter 08. 자바스크립트와 CSS를 외부 파일에 넣어라.
1. 외부파일 vs 인라인코드.
ㄱ. 쉽게 말하자면 인라인이 더 빠르다.
단순한 경우에 인라인이 빠르지만 중요한 포인트는 외부 자바스크립트와 CSS 구성요소가 HTML 요청 수에 비해서 얼마만큼 자주 캐시되느냐는 것이다.
ㄴ. 페이지 뷰.
사용자당 페이지 뷰가 적을 경우 인라인 자바스크립트와 CSS를 이용하는 것이 더 좋다. 반면에 사용자의 페이지 뷰가 많다면 브라우저는 캐시 안에 외부 구성요소를 보관하고 있을 경우가 많기 때문에 외부파일로 사용하는 것이 좋다.
ㄷ. 빈 캐시와 꽉 찬 캐시.
외부 파일을 사용하는 것이 좋을지 아니면 인라인으로 포함시키는 것이 좋을지 결정하기 위해서는 사용자가 얼마나 많은 외부 구성요소를 캐시에서 읽어 사용하는지를 아는 것이 중요하다. 사이트의 측정 결과 사용자가 캐시를 이용하는 비율이 더 높다면 외부 파일을 이용하는 것이 훨씬 좋다. 반면에 캐시를 사용하지 않는다면 인라인을 이용하는 것이 더 좋은 선택이 될 것이다.
ㅁ. 구성요소 재사용.
동일한 자바스크립트 또는 CSS 파일이 모든 페이지에 걸쳐 사용되는 경우도 없거니와 모든 페이지가 서로 다른 자바스크립트, CSS를 사용하는 경우도 없다는 것이다. 어느 선에서 자바스크립트오 CSS를 외부 파일로 분리하느냐에 대한 결정은 구성요소의 재사용률에도 영향을 미친다. 높은 재사용률이 가능하도록 알맞은 균형점을 찾을 수 있다면 자바스크립트와 CSS를 외부 파일로 분리하는 것이 좋다. 재사용률이 낮다면 인라인이 더 좋을 것이다.
2. 실 서비스 현장에서의 일반적인 선택.
페이지뷰, 빈 캐시와 꽉 찬 캐시, 구성요소 재사용에 의거한다면 좋은 결과를 얻을 것이다. 페이지 로딩이 반복될 때의 결과를 '인라인JS와 CSS'와 비교해 보면 헤더 만료 기간이 지나지 않은 외부 파일을 이용하는 것이 훨씬 성능이 좋음을 알 수 있다.
3. 홈페이지.
모든 홈페이지에 적용할 수 있는 한 가지 모범답안은 존재하지 않는다. 앞서 나열한 요점들은 적용할 대상 홈페이지에 맞게 평가되어야 한다. 인라인 방법이 올바른 해결방안일 경우, 외부 파일의 장점을 활용하면서도 인라인 방법을 사용할 수 있는 두 가지 기술에 대해 설명하는 다음 절이 도움이 될 것이다.
4. 두 가지 방법의 장점만을 모아서.
ㄱ. Post-Onload 다운로드.
페이지 뷰가 여럿인 홈페이지에서 가장 처음 보게 되는 페이지에는 인라인을 이용하여 자바스크립트와 CSS를 페이지에 포함시킨다. 그리고 이후에 보게 되는 페이지에서는 외부 파일을 이용하는 것이다. 이를 구현하는 방법은 첫 페이지가 완전히 로드된 후에 외부 파일을 동적으로 다운받는 것이다. 이 방법은 사용자가 추가 페이지를 볼 것이라고 예상하고 외부 파일을 브라우저의 캐시에 저장하는 것이다.
ㄴ. 동적 인라인.
홈페이지 서버가 브라우저 캐시에 구성요소가 있는지 없는지 알고 있다면 서버는 인라인을 이용할지 외부 파일을 이용할지 좀 더 최적의 선택을 내릴 수 있을 것이다. 쿠키값의 유무를 사용하여 이를 처리할 수 있으며 브라우저 캐시 상태가 일치하지 않는 경우에도 제대로 작동한다.
Chapter 06. 스크립트는 아래에 넣어라.
1. 스크립트 문제.
스크립트의 경우 스크립트 아래에 있는 모든 구성요소의 점진적 렌더링을 막게 된다.
2. 동시 다운로드.
응답 시간에 가장 큰 영향을 주는 것은 페이지 안에 있는 구성요속의 개수이다. HTTP/1.1 스펙에서는 한 호스트당 동시에 2개의 구성요소를 다운로드하는 것을 제안하고 있다. IE는 레지스트리에 이 값을 저장하고 있고, 파이어폭스는 about:config 페이지 안의 network.http.max-persistent-connections-per-server 설정을 통해 가지고 있다. 야후가 조사한 결과에서는 2개의 호스트 이름을 이용할 때 가장 좋은 성능을 낸다는 것을 알 수 있었다.
3. 동시 다운로드를 막는 스크립트.
스크립트가 다운되는 동안에는 동시 다운로드가 불가능하다. 첫째로 스크립트가 document.write를 사용하면 브라우저는 응답을 기다린다. 둘째로 페이지에서 적당한 순서로 스크립트가 실행될 수 있게 하기 위해서이다.
4. 최악의 경우: 스크립트를 위에 넣는 경우.
스크립트 아래에 잇는 콘텐츠의 렌더링을 막는다.
스크립트 아래에 있는 구성요소의 다운로드를 막는다.
5. 최상의 경우: 스크립트를 아래에 넣을 경우.
스크립트를 페이지 아래에 넣는 것이 가장 좋다. 페이지는 렌더링의 방해를 받지 않고 페이지 안에서 눈에 보이는 구성요소는 가능한 한 일찍 다운로드된다.