웹사이트 성능향상을 위한 자바스크립트 팁 한다스

1. 웹사이트 성능향상을 위한 자바스크립트 팁 한다스 김수영 Microsoft Visual C# MVP 훈스닷넷C# Sysop

2. 진행 순서 • 성능향상을 위한 1% 원리 • #01. ==,!= 대신 ===, !== 을 사용하자. • #02. 빌트인(built-in) 객체를 확장하자. • #03. 많은 문자열 연결은 피하라. • #04. 큰 오브젝트 리스트의 빠른 탐색을 위하여 해쉬테이블 형태를 취하라. • #05. eval() 함수 사용을 피하라. • #06. with 구문 구조를 피하라. • #07. 비트 연산자 사용을 피하라. • #08. || 연산자를 통하여 기본값을 지정하자. • Tip & Tech • #09. URL Parsing • #10. Drag and Drop • 모듈화를 통한 재 사용성 확대 • #11. 자바스크립트 객체(Object)는 이름과 값으로 이루진 프로퍼티 집합이다. • #12. 상속(Inheritance)

3. 성능향상을 위한 1% 원리

4. #01. ==,!= 대신 ===, !== 을 사용하자. '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true '' === '0' // false 0 === '' // false 0 === '0' // false false === 'false' // false false === '0' // false false === undefined // false false === null // false null === undefined // false

5. #02. 빌트인(built-in) 객체를 확장하자. String.prototype.trim = function ( ) { return this.replace(/^\s+|\s+$/g, ''); }; Function.prototype.method = function (name, func) { this.prototype[name] = func; return this; }; String.method('trim', function ( ) { return this.replace(/^\s+|\s+$/g, ''); });

6. #03. 많은 문자열 연결은 피하라. • 한번 생성된 문자열은 불변의 읽기전용(readonly)이다. var str = ""; for (var i=0; i<7000; i++) { str += "test_"; } function StringBuffer() { this.__strings__ = []; } StringBuffer.prototype.append = function(str) { this.__strings__.push(str); } StringBuffer.prototype.toString = function(delimiter){ return this.__strings__.join(delimiter); } var buffer = new StringBuffer(); for (vari=0;i<7000;i++) { buffer.append("test_"); }

7. #04. 큰 오브젝트 리스트의 빠른 탐색을 위하여 해쉬테이블 형태를 취하라. var sales = []; sales[sales.length] = {period:"q1", region:"east", total:2300}; sales[sales.length] = {period:"q2", region:"east", total:3105}; ... sales[sales.length] = {period:"q4", region:"west", total:3810}; for (var i = 0; i < sales.length; i++) { sales[sales[i].region + "_" + sales[i].period]=sales[i]; } //전체탐색을 하지 않고 값에 직접 접근 sales["central_q3"].total

8. #05. eval() 함수 사용을 피하라. for (var i = 0; i < 6; i++) { var imgObj = eval("document.menuImg" + i); imgObj.src = "images/menuImg" + i + "_normal.jpg"; } for (var i = 0; i < 6; i++) { var imgObj = document.images["menuImg" + i]; imgObj.src = "images/menuImg" + i + "_normal.jpg"; }

9. #06. with 구문 구조를 피하라. • 특정 객체를 여러번 반복하여 사용할 경우 with 문 내에서 생략하여 사용할 수 있으나 모호한 구문을 야기 할 수 있다. with(document) { write("with 를 사용하면< br>"); write("반복 사용할 특정객체를< br>"); write("여러번 사용하지 않고도< br>"); write("편리하게 사용"); } with (obj) { a = b; } if (obj.a === undefined) { a = obj.b === undefined ? b : obj.b; } else { obj.a = obj.b === undefined ? b : obj.b; }

10. #07. 비트 연산자 사용을 피하라. • &, |, ^, ~, >>, >>>, << • 자바스크립트는 정수형이 존재하지 않음 • 부동 소수점을 정수로 변환 후 연산 • 속도가 매우 느림

11. #08. || 연산자를 통하여 기본값을 지정하자. var userName = items.user || 'user 정보 없음';

12. Tip & Tech

13. #09. URL Parsing Uniform Resource Identifier (URI): Generic Syntax(RFC 3986) ( http://tools.ietf.org/html/rfc3986 ) http://usr:pwd@www.test.com:81/dir/dir.2/index.htm?q1=0&&test1&test2=value#top

14. #10. Drag and Drop • 아이템을 드래그 할 경우의 이벤트 • source • dragstart • drag • dragend • target • dragenter • dragover • dragleave • drop • 데이터 전달 • dataTransfer오브젝트 • getData() • setData() • dropEffect(ondragenter) & effectAllowed(ondragstart) • none : 드래그(dragged)한 아이템을 드롭(droped) 할 수 없음 • move : 드래그(dragged)한 아이템을 타겟에 이동 • copy : 드래그(dragged)한 아이템을 타겟에 복사 • link : 다겟에URL을 보냄

15. 모듈화를 통한 재 사용성 확대

16. #11. 자바스크립트 객체(Object)는 이름과 값으로 이루진 프로퍼티 집합이다. if (typeofObject.create !== 'function') { Object.create = function (o) { var F = function () {}; F.prototype = o; return new F(); }; } var Employee = { "employeeName" : "오대수", birthYear : 1978, department: "중요부서", family : { fatherName : "강철중", motherName : "금자씨" }, getAge : function () { var today = new Date(); return today.getFullYear() - this.birthYear; } };

17. #12. 상속– Object function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor, sName) { this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.name = sName; this.sayName = function () { alert(this.name); }; }

18. #12. 상속– call() Method function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor, sName) { ClassA.call(this, sColor); this.name = sName; this.sayName = function () { alert(this.name); }; }

19. #12. 상속– apply() Method function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.color); }; } function ClassB(sColor, sName) { ClassA.apply(this, arguments); this.name = sName; this.sayName = function () { alert(this.name); }; }

20. #12. 상속– Prototype Chaining function ClassA() { } ClassA.prototype.color = "red"; ClassA.prototype.sayColor = function () { alert(this.color); }; function ClassB() { } ClassB.prototype = new ClassA();

21. #12. 상속- Namespace //최상위 namespace 선언 var DNA { }; //child namespace DNA.util { }; //final namespace 선언 및 메소드,프로퍼티 선언 DNA.util.MathEx = { sigma : function( ) { ….. } };