View
95
Download
0
Category
Preview:
DESCRIPTION
웹사이트 성능향상을 위한 자바스크립트 팁 한다스. 김수영 Microsoft Visual C# MVP 훈스닷넷 C# Sysop. 진행 순서. 성능향상을 위한 1% 원리 #01. ==,!= 대신 ===, !== 을 사용하자 . #02. 빌트인 (built-in) 객체를 확장하자 . #03. 많은 문자열 연결은 피하라 . #04. 큰 오브젝트 리스트의 빠른 탐색을 위하여 해쉬테이블 형태를 취하라 . #05. eval () 함수 사용을 피하라 . #06. with 구문 구조를 피하라 . - PowerPoint PPT Presentation
Citation preview
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( ) { ….. }};
Recommended