자바 스크립트 성능 최적화

High Performance JavaScript(자바스크립트 성능 최적화) 라는 책을 읽고 있다.

상당히 괜찮고 몰랐던 부분에 대해서 많이 알게 되었다.

Javascript 성능 최적화
1 스크립트 위치
 - ie8, firefox3.5, 사파리 4, 크롬 2 브라우저는 자바스크립트 파일을 동시 내려 받을수 있음
   그러나 자바스크립트 파일을 내려 받는 동안 이미지 등을 내려받지 못함
 - 스크립트 코드를 동시에 내려 받을수 있지만, 코드를 내려받고 실행하는 동안 기다려야 함
 - 가능한한 Javascript 위치를 </body> 위로 이동을 권장
   스크립트를 내려받는 동안 다른 스크립트를 받을 수 없지만
   페이지의 다른 부분은 이미 내려받아서 표시 했으므로 페이지 전체가 느리다는 느낌은 들지
   않습니다.
   야후! 성능 연구팀의 자바스크립트 제1원칙
2 스크립트 묶기
 - 페이지를 처음 내려받으면 <script> 태그를 만날 때마다 페이지 렌더링ㅇ이 차단되므로 <script> 태그의 수를 제한하는 편이 좋음
 - <link> 태그 다음에 인라인 스크립트를 놓으면 스타일시트를 완전히 내려받을 때까지 인라인 스크립트 실행이 차단됨
   이렇게 해야 인라인 스크립트가 가장 정확한 스타일 정보로 작업하는 것을 보장할수 있음. <link> 태그 다음에 인라인 스크립트를 놓지 말것
 - 외부 자바스크립트 파일은 HTTP 요청이 있을 때마다 성능 부담이 증가하기 때문에 25kb 파일 4개보다 100kb 파일 하나를 더 빨리 내려받음
   따라서 페이지에서 참조하는 외부 자바스크립트 파일의 수를 줄이는게 좋음
 - 외부 자바스크립트를 오프라인에서 합칠수도 있고, 야후! 콤보 핸들러 같이 온라인 도구를 써서 합칠수도 있음
   http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js
3 비차단 스크립트
 - 브라우저 프로세스를 차단하지 않으면서 자바스크립트를 점진적으로 불러오는 방법
   즉 window 객체에서 load 이벤트가 발생한후 코드를 내려 받는다는 뜻
 1) 지연 스크립트
  - defer 속성, ie4 버전이상, firefox 3.5 이상 스크립트가 DOMO 을 조작하지 않을 것이므로 나중에 실행해도 상관없음
 2) 동적 <script> 태그


 - 인터넷 익스플로우 7 이상부터 :hover 를 많이 사용할수록 응답성이 떨어짐
 - switch 문이 if-else 문보다 빠르지만 항상 최선의 선택은 아님
   if-else 문은 두 개의 분명한 값 또는 몇 안 되는 범위에서 테스트할 때 가장 적합
   분명한 값 세 개 이상을 테스트한다면 switch 문이 더 좋음
 - JSON 과 eval()에서 주의할 점 : eval() 함수는 위험하며, 악의적이거나 잘못 만들어진 코드를 포함할 가능성이 있는 써드파티 JSON 데어터를
   eval() 함수로 평가하는 것은 특히 위험. 가능하다면 항상 JSON.parse() 메서드를 써서 문자열을 파싱
 - JSON-P 를 쓰지 말아야 할때
   JSON-P 는 반드시 실행 가능한 자바스크립트여야 하므로 누구든 JSON-P를 호출할수 있고 동적 <script> 태그를 삽입해서 어느 사이트에서나
   JSON-P 를 사용가능하나 JSON 은 eval() 을 거쳐야만 유효한 자바스크립트가 되며 XHR을 써서 문자열 형태로만 가져올수 있음
   무작위 URL 이나 쿠키를 쓴다고 해도 JSON-P 데이터를 보호할 수 있다는 보장이 없으므로 민감한 데이터는 절대 JSON-P로 인코드 하지 말것