Introduction to Avalon A Whirlwind Tour…

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

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




http://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'          // false   '' === '0'          // false
   0 == ''            // true    0 === ''            // false
   0 == '0'           // true    0 === '0'           // false

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

   false == undefined // false   false === undefined // false
   false == null      // false   false === null      // false
   null == undefined // true     null === 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 = "";                function StringBuffer() {
                                 this.__strings__ = [];
 for (var i=0; i<7000; i++)   }
 {
                              StringBuffer.prototype.append
    str += "test_";
                              = 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("        ");
       }

                              if (obj.a === undefined) {
       with (obj) {               a = obj.b === undefined ? b :
           a = 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 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

 object
 anchor      top
 query       q1=0&&test1&test2=value
 file        index.htm
 directory   /dir/dir.2/
 path        /dir/dir.2/index.htm
 relative    /dir/dir.2/index.htm?q1=0&&test1&test2=value#top
 port        81
 host        www.test.com
 password    pwd
 user        usr
 userInfo    usr:pwd
 authority   usr:pwd@www.test.com:81
 protocol    http
 source      http://usr:pwd@www.test.com:81/dir/dir.2/index.htm?q1=0&&test1&test2=value#top
 queryKey    q1    : 01
             test1 : [empty string]
             test2 : value


www.hoons.kr
    #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을 보냄



www.hoons.kr
               모듈화를 통한 재 사용성 확대




www.hoons.kr
    #11. 자바스크립트 객체(Object)는 이름과
    값으로 이루진 프로퍼티 집합이다.
                                       if (typeof Object.create !== 'function') {
                                            Object.create = function (o) {
      var Employee =                            var F = function () {};
      {                                         F.prototype = o;
          "employeeName" : "     ",             return new F();
          birthYear : 1978,                 };
          department: "       ",       }
          family :
          {
              fatherName : "     ",
              motherName : "     "
          },
          getAge : function ()
          {
              var today = new Date();
              return today.getFullYear() - this.birthYear;
          }
      };




www.hoons.kr
      #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);
               };
      }




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 namespace
      DNA.util { };

      //final namespace 선언 및 메소드,프로퍼티 선언
      DNA.util.MathEx = {
         sigma : function( ) { ….. }
      };




www.hoons.kr