최근 자바스크립트가 급부상하면서 자바스크립트 관련된 책을 여러 개 읽고 있습니다. 진짜 보면서 느끼는 게 내가 지금까지 병신같이 개발해왔구나 라는 생각이 많이 드네요.

   
JavaScript자바스크립트성능최적화
카테고리 컴퓨터/IT > 프로그래밍/언어
지은이 니콜라스 자카스 (한빛미디어, 2011년)
상세보기

보니까 야후에서 YUI라는 라이브러리가 있는데, 그걸 만든 사람이 쓴 것 같아요. 그걸 만든 사람 시리즈 중에 자바스크립트 패턴이라고 있는데, 그것도 같이 보고 있어요.

일단, 다 읽어보면 매우 기본적인 내용을 바탕으로 하고 있습니다. 이렇게 쓰면 더 빠르다는 것을 주로 강조를 하며 빠르게 사용할 수 있는 여러 방법을 제시합니다. 보면 대부분 매우 간단하거나 쉽게 적용할 수 있는 내용이 많습니다. 이런 것들을 하나하나 모으면 사이트가 정말 최적화가 잘 되겠죠. 좋은 책인 것 같습니다. 그래서 우리가 만든 사이트들이 너무 느리다는 것을 이 책을 읽고 깨닫게 되었죠ㅠㅠ

1. 로딩과 실행
첫번째 장에서는 스크립트 위치와 로딩하는 순서에 대해서 간단히 얘기합니다. 보면 동적으로도 로딩하는 방법이 나옵니다. 이런 식으로도 스크립트를 삽입할 수 있는지 몰랐네요. 뭐 결론은 스크립트 태그를 포함하는 파일을 최소화하고 UI표시에 영향을 주지 않게 하는 것이 가장 큰 목적이겠네요.

2. 데이터접근
Javascript 코딩할 때 this가 짜증나서 전역변수를 선언해서 그냥 쓰거나 매번 document에 접근해서 쓰거나 뭐 이런 식의 코딩을 많이 했는데, 이런 전역변수를 계속 쓰게 되면 엔진이 스코프를 뒤지면서 계속 찾아야하니 느려진다는 것입니다. 그래서 지역변수를 주로 쓰는 것을 말하고 있고, 객체멤버 깊이도 줄여서 선언 및 사용해야 한다는 것을 설명하고 있네요.

3. DOM 스크립팅
DOM을 컨트롤하기 위해서는 DOM을 객체에서 찾거나 생성해야 해요. 찾으려면 selector를 통해 찾아야하고, 생성하려면 createElement를 통해 생성해야 해요. 그래서 이 책이 얘기하는 것은 비표준이더라도 innerHTML이나 querySelectorAll같은 함수를 활용하여 처리하는 게 빠르게 해결할 수 있는 것이라고 하네요. 그 외에 리페인트와 리플로우 개념에 대해서는 꼭 이해를 하고 가야 더욱 빠르게 dom을 추가하고 수정할 수 있다는 걸 설명하네요.

4. 알고리즘과 흐름 제어
루프는 뭐 다 비슷한데, 반복문이라면 length값 캐쉬하는 게 가장 중요합니다. 그 외에 반복횟수 줄이거나 그런 것들은 여러 프로그래밍 개발 언어에서도 충분히 적용될만한 내용이네요. 재귀함수(전 재귀가 싫어요.....-_-)에 대해서 캐쉬를 하는 메모이제이션 내용도 뭐 다른 프로그래밍 개발에도 잘 쓰이는 내용이네요.

5. 문자열과 정규 표현식
정규식은.......좀 더 공부를 해봐야겠습니다......

6. 응답성좋은 인터페이스
클릭과 동시에 반응하는 웹이야 말로 제대로 된 웹이겠지요. 뭐 html5의 내용인 웹워커 내용이 있는데, 이건 뭐 적용할 수 없죠. IE에서 지원을 안하니... 내용은 타이머를 통해 오래걸리는 처리는 처리에 맡기고 반응은 타이머콜백을 통해 빨리빨리 보이겠다는 것입니다. 근데 내용을 좀 이해할 수 없군요....-_- 좀 더 읽어봐야겠네요...

7. Ajax
일반적인 ajax내용이고, 비콘이라는 Image태그를 이용해서 서버에 보내는 재미있는 내용이 있네요. 그냥 단순히 쏘기만 할 때 좋은 듯. 그 외에 데이터포맷은 뭐가 빠른지에 대해서 설명이 되어있네요. json이 역시 짱이죠 ㅇㅇ

8. 프로그래밍 사례
eval, function 뭐 이런거 앵간해서는 쓰지말고, 객체 배열 리터럴 쓰고, 작업을 반복하지 말고, 뭐 읽어보면 매우 간단한 내용들이 있는데, 우리들이 개발하다보면 빨리 개발하다가 지나칠 수 있는 내용들이 많이 있습니다. 그리 어렵지 않으니 잘 읽고 잘 적용하면 좋을 듯 합니다.

9. 고성능 자바스크립트 애플리케이션 빌드와 배포
js 압축에 대해서 다룹니다. 뭐 압축하면 용량도 줄어들고, 변수명도 바뀌니 빨라지겠죠

10. 도구
여러 도구를 소개하고 있습니다. YUI 개발자들이라고 YUIProfiler도 소개하고... 도구는.....파이어버그, 크롬개발자 도구 이런 게 짱이죠.


PS. 크롬은 정말 성능이 좋은 것 같습니다. 그래서 제가 그지같이 개념없이 JS개발을 해도 크롬은 그걸 다 받아주며 빠르게(?) 동작시켜줘서 너무 고마웠네요. 근데, 확실히 IE에서는 느려요ㅠ 이 책을 교훈삼아 IE에서도 빠르게 동작하는 자바스크립트 개발을 해야겠네요.
 
Posted by 머드초보
,