http://www.hoons.kr

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

김수영Microsoft Visual C# MVP훈스닷넷 C# Sysop

www.hoons.kr

진행 순서

성능향상을 위한 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)

www.hoons.kr

성능향상을 위한 1% 원리

www.hoons.kr

#01. ==,!= 대신 ===, !== 을 사용하자 .

'' == '0' // false0 == '' // true0 == '0' // true

false == 'false' // falsefalse == '0' // true

false == undefined // falsefalse == null // falsenull == undefined // true

'' === '0' // false0 === '' // false0 === '0' // false

false === 'false' // falsefalse === '0' // false

false === undefined // falsefalse === null // falsenull === undefined // false

www.hoons.kr

#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, '');});

www.hoons.kr

#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 (var i=0;i<7000;i++) { buffer.append("test_");}

www.hoons.kr

#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

www.hoons.kr

#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";}

www.hoons.kr

#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;}

www.hoons.kr

#07. 비트 연산자 사용을 피하라 .

&, |, ^, ~, >>, >>>, <<

자바스크립트는 정수형이 존재하지 않음부동 소수점을 정수로 변환 후 연산속도가 매우 느림

www.hoons.kr

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

www.hoons.kr

Tip & Tech

www.hoons.kr

#09. URL ParsingUniform 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

objectanchor topquery q1=0&&test1&test2=valuefile index.htmdirectory /dir/dir.2/path /dir/dir.2/index.htmrelative /dir/dir.2/index.htm?q1=0&&test1&test2=value#topport 81host www.test.compassword pwduser usruserInfo usr:pwdauthority usr:pwd@www.test.com:81

protocol httpsource http://usr:pwd@www.test.com:81/dir/dir.2/index.htm?q1=0&&test1&test2=value#topqueryKey q1 : 01

test1 : [empty string]test2 : value

www.hoons.kr

#10. Drag and Drop아이템을 드래그 할 경우의 이벤트

source dragstartdragdragend

targetdragenterdragoverdragleavedrop

데이터 전달dataTransfer 오브젝트getData()setData()

dropEffect(ondragenter) & effectAllowed(ondragstart)none : 드래그 (dragged)한 아이템을 드롭 (droped) 할 수 없음move : 드래그(dragged)한 아이템을 타겟에 이동copy : 드래그 (dragged)한 아이템을 타겟에 복사link : 다겟에 URL을 보냄

www.hoons.kr

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

www.hoons.kr

#11. 자바스크립트 객체 (Object) 는 이름과 값으로 이루진 프로퍼티 집합이다 .

var Employee = { "employeeName" : " 오대수 ", birthYear : 1978, department: " 중요부서 ", family : { fatherName : " 강철중 ", motherName : " 금자씨 " }, getAge : function () { var today = new Date(); return today.getFullYear() - this.birthYear; }};

if (typeof Object.create !== 'function') { Object.create = function (o) { var F = function () {}; F.prototype = o; return new F(); };}

www.hoons.kr

#12. 상속 – Objectfunction 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); }; }

www.hoons.kr

#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); };}

www.hoons.kr

#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); };}

www.hoons.kr

#12. 상속 – Prototype Chaining function ClassA() {}

ClassA.prototype.color = "red";ClassA.prototype.sayColor = function () { alert(this.color);};

function ClassB() {}

ClassB.prototype = new ClassA();

www.hoons.kr

#12. 상속 - Namespace// 최상위 namespace 선언var DNA { };

//child namespaceDNA.util { };

//final namespace 선언 및 메소드 , 프로퍼티 선언DNA.util.MathEx = {

sigma : function( ) { ….. }};