[JS]Javascript 속도향상을 위한 31가지 체크리스트..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Thomas Fuchs가 자신의 블로그를 통해서 "31 ways to speed up your JavaScript"라는 제목으로 SlowJavascript?라는 사이트를 통해서 체크리스트를 공개했습니다. 토마스 퍽스는 prototype.js기반의 UI라이브러리인 script.aculo.us를 만든 사람이고 지금은 다음버전인 scripty2를 만들고 있습니다.

이 체크리스트는 PDF형태로 제공되고 있으며 SlowJavascript?사이트에서 다운로드가 가능합니다. Newsletter에 가입하면 업데이트 정보와 퍼포먼스 팁을 보내준다고 합니다.

31가지 체크리스트는 아래와 같습니다. (무료로 배포된거니 적어도 되겠죠?)

• Correct script tag placement
• DOM Monster complexity approval
• Correct caching headers
• Concatenate, inlinine & pre-cache
• Minify and/or Gzip
• Smush, CSS sprite & favicon
• Check your framework
• Manage runaway timers
• Maximize DOM code efficiency
• Tune your Ajax
• Shorten your code (assignment, operators, literals)
• Strip out excessive cleverness
• Tune your expressions
• Cache RegExps
• Watch out for closures, globals, literals
• Use the most efficient control statements
• Cache your variables
• Clean up after yourself to minimize memory leaks
• Tune / unroll your loops
• Ensure optimal usage of object properties
• Use JSON
• Use the most efficient loops
• Eliminate syntactic sugar
• Use arguments effectively
• Optimize for iPhone

PDF 한페이지로 잘 정리가 되어 있기 때문에 한장 프린트해서 책상옆에 나누어도 좋겠고 체크리스트라 여러장 출력해서 프로젝트마다 사용해도 좋을듯 합니다.

위에처럼 생겼고 위쪽으로 갈수록 일반적인(Everyday) 튜닝이고 밑으로 갈수록 극단적인( Extreme) 튜닝에 대한 체크입니다.

물론 체크리스트이기 때문에 실제 튜닝작업을 하려면 관련지식이 많이 필요합니다. 사실 사이트나 PDF에도 언급이 되어 있듯이 올해 토마스퍽스는 JavaScript Performance Rocks라는 이북제작에 상당히 주력하고 있었고 지금은 판매하고 있습니다. 제가 책내용을 못봐서 정확히는 모르겠지만 이 체크리스트는 이 책의 내용중에서 나온 부분이고 더 자세한 처리방법은 해당책에 자세히 나와있을듯 합니다. 어찌보면 약간의 마케팅적인 부분이 있다고 할 수 있습니다.

어쨌든 공짜는 좋은거죠. 

My Comment..
어쩌다보니 코멘트를 연속해서 쓰고 있다.. 이 글에 링크 된 것 중 햄 블로그로 되어 있는 것이 있는데.. 나의 관심사 혹은 나에게 해당 되는 글이 아니어서 안가져왔던 글이었다.. 그래서 햄의 글 링크로 그냥 두었다.. 앞으로도 이러한 패턴에서는 계속 그렇게 할 것이다.. 나에게 있다면, 나의 블로그에 링크를.. 아니라면 햄의 블로그에 링크를.. 그리고 저렇게 체크를 하면서 개발을 하거나 그러면 좋겠지만, 현실상 보면 그렇지 못한듯하다.. 기본 벨리데이션 체크 아니고서야 머;; 저런 것을 볼 여유나 있을까.. 핑계라면 핑계지만, 모든 부분을 다 확인하고 체크하면서 개발하기에는 우리 나라 실정은 좀 아니지 싶다.. 최대한 준수 하거나 쟁점이 되는 몇 가지를 지키려고 하는 쪽으로 방향을 택하는게 더 좋을듯 한 생각이 든다..

[JS]Thomas Fuchs 새로은 비쥬얼이펙트 라이브러리 : scripty2..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

Prototype.js기반의 비쥬얼 이펙트 라이브러리인 Script.aculo.us를 만든 Thomas Fuchs가 새로운 비쥬얼 이펙트 라이브러리를 만들고 있었네요. scripty2입니다.

현재 버전은 Alpha1 버전으로 가져다가 적용하기에는 약간 꺼려질만한 버전이긴 합니다. 사이트에는 딱히 명시되어 있지는 않지만 디자인도 그렇고 이름도 그렇고 Script.aculo.us의 후속버전으로 제작하고 있는 것이 아닐까 합니다. 네임스페이스도 S2라는 네임스페이스로 쓰고 있군요. 디자인도 이전 사이트와 거의 동일하고요.

사이트에 나온대로 아직 알파버전이기 때문에 문서화도 많이 부족하고 메서드나 내용도 계속 작성중이라서 아직 완전히 확정된 형태는 아닙니다. script.aculo.us의 개발계획이 어떻게 되는 건지는 잘 모르겠네요.

Scripty2는 크게 scripty2 core, scripty2 fx, scripty2 ui 3가지로 나누어집니다. 아직 문서화도 많이 되어 있지 않은데다가 능력도 안되서 소스까지 분석할 능력은 없습니다. script.aculo.us를 하면서 배운 경험을 가지고 비쥬얼효과와 UI에 대해서만 최적화한 듯합니다.

현재 토마스퍽스가 만든 twistori와 freckle에서 쓰이고 있습니다. 저장소는 GitHub를 이용하고 있고 커뮤니티는 구글 그룹스를 이용하고 있습니다.

현재 데모는 2가지가 제공되고 있습니다. Cards Demo와 Puzzle Demo가 있습니다. 요즘은 비쥬얼 효과가 워낙 많아서 놀랄만한 데모는 아니지만 깔끔하니 괜찮아 보니는군요. 나중에 시간내서 좀 만져봐야겠습니다.

덧) Thomas Fuchs와 Amy Hoy가 이글에 대해서 포스팅한 것을 모르고 있었네요. Amy Hoy의 글에 따르면 Scripty2는 Script.aculo.us 2가 맞고 Thomas Fuchs의 포스팅에 따르면 script.aculo.us라는 이름을 좋아하지만 더 외우기 좋은 이름으로 바꾸어야 될 때라는 것에 동의한다고 합니다.(사실 외우기 쉽지 않긴 하죠.. ㅎㅎㅎ) scripty2라는 이름도 앞으로 바뀔수도 있다는군요.
애니메이션을 그래프로 동작타임을 조절하는 데모는 참으로 맘에 드는군요.

[Book] 프로토타입과 스크립타큘러스..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

프로토타입과 스크립타큘러스 - 크리스토피 포트누브 지음, 박영록 옮김/인사이트

자바스크립트 프레임워크의 시초라고도 할 수 있는 prototype.js와 그 기반으로 만들어진 라이브러리인 script.aculo.us에 대한 책이다. 나는 자바스크립트를 시작하면서 부터 프로토타입 프레임워크를 사용했기 때문에 개인적으로 애착도 있고 꽤 좋아하는 편이다. 요즘은 추세가 jQuery쪽으로 가고 있는 듯하지만 지금 수많은 자바스크립트 프레임워크의 포문을 연 프로토타입 프레임워크의 위상을 무시할 수 없다고 생각하고 있다. 아직 jQuery를 접하지는 못했지만 prototype.js가 내가 자바스크립트를 좋아하게 된데 큰 역할을 했기 때문에 난 아직 prototype.js의 펜으로 남아있다. ㅎ

계속 프로토타입을 쓰고 있다고 했지만 그 활용성에 대해선 미약한 편이었다. 초기에는 그냥 $만 쓰는 정도였고 조금씩 조금씩 늘려나갔지만 프로토타입이 지원하는 양은 엄청났다. 그리고 프로토타입을 익히기 위한 리소스는 상당히 부족했다. 작년까지는...............

올해부터는 상당히 달라졌다. 국내에 출간된 프로토타입관련 책으로는 "Ajax prototype.js : 프로토타입 완전분석", "Prototype & Scriptaculous 인 액션" 이렇게 총 3권뿐이고 작년에는 "Ajax prototype.js : 프로토타입 완전분석"만이 있었다. "Ajax prototype.js : 프로토타입 완전분석"은 작년에 읽고 포스팅하기는 했지만 레퍼런스처럼 처음부터끝까지 각 함수의 정의와 사용법만 나열한 책이라서 활용하기에 제한이 좀 있었다. 그리고 프로토타입.js와 스크립타큘러스사이트도 올해다 개편이 되어서 API문서가 상당히 충실하게 지원되고 있다.(아~ 행복해...)

이 책은 프로토타입과 스크립타큘러스를 어떻게 활용해야 하는지에 집중한 책이다. 프로토타입 프레임워크자체가 상당히 고급 자바스크립트이고 이걸 이해하기 위해서는 알아야 될 사항들이 너무나도 많다. 때문에 이 책에서는 이런 부분에 대한 설명은 집중하지 않고 의도인지는 모르겠지만 내가 느끼기에는 어느정도 프로토타입 프레임워크를 약간은 아는 사람을 기준으로 설명하는 것으로 느껴졌다. 어차피 모든걸 다 설명할 수는 없으니 기본적이 사항들은 패스하고 넘어간다.

이런 부분이 설명을 대충한다는 얘기가 아니다. 오직 프로토타입에만 집중했다는 이야기이다. 각 클래스들의 기능들과 어떤 함수들이 있는지를 설명하고 간단한 예제를 통해서 어떤식으로 활용해야 하는지를 잘 풀어설명하고 있다. 내가 느끼기에는 나같이 프로토타입을 알고 사용하고자 하는데 고급활용으로는 하고있지 못하고 있는 사람들한테 딱 맞는 책이라고 생각된다. 최근에 나온 책답게 프로토타입 1.6을 기준으로 설명이 되어 있으며 중간중간 성능에 대한 부분이나 1.5와는 달라진 부분까지 설명하고 있으며, 책 전체적으로 저자와 역자가 모두 프로토타입 프레임워크의 개발 사상을 이해하고 있는 느낌을 받았다. 단순히 메서드의 사용방법만 논한 것이 아니라 전체적인 개발방향에 대해서 제시해 주고 있다.

예제들은 그냥 보기에는 간단한듯 하면서 막상 소스를 보면 꽤나 어렵다. 프로토타입의 활용방식 자체가 좀 덜 일숙한 것도 있고 예제자체가 좀 고급적인 부분도 있다. 이책의 전부를 이해한것은 아니다. 오히려 이해를 못한 것이 많다. 한 3번정도나 봐야 어떤식으로 활용할지를 잡을수 있을것 같은 느낌인데 내가 아쉬워하는 부분들이 꽤나 해소되었다. 이벤트리스너의 사용방식이라든지 이뉴머레이블 사용방법등.... 한번만 읽었어도 느낌바가 많다. 심지어 $가 그냥 document.getElementById의 축약형태에 불과한게 아니라는 것 등... 또한 책이 소제목들만 봐도 약간은 유머스럽게 지어서 전체적으로 너무 딱딱하지 않게 되어 있어서 코드에 대한 어려움을 좀 적게 느껴지게 만든다.

프로토타입과 스크립타큘러스에 대해서는 오랫동안은 이책이 필수도서가 될것 같은 느낌이다. 이 둘에 대해서 알고 싶다면 일단 이책을 보라고 하고 싶다. (인액션은 구입하고 아직 읽지는 못했는데 평은 좀 그닥인 느낌이다.) 그동안 프로토타입을 사용한다고 말하기가 좀 창피했었는데(ㅡ..ㅡ) 이제는 여기 나온것들을 내 것으로 만드는 일만 남았다. 마침 관련해서 할일도 생겼고... ㅎ

사족으로... 요즘 인사이트 책 참 좋은것 같다. 내가 가려운 부분과 잘 맞아떨어져서 그런것도 있지만.. ㅎㅎㅎㅎ (결코 인사이트 관련자 아님.. ㅋ)