Rendering process 

1. 브라우저는 CSSOM과 DOM트리를 결합해 렌더 트리를 생성

2. 화면에 출력할 Layout 계산

3. Paint (실제 화면에 픽셀을 그리는 단계)

4. 필요에 따라 reflow, repaint

reflow

기존 DOM노드의 width, height 변경시, 관련된 모든 노드의 수치를 다시 계산해서 render tree 재구성

repaint

reflow로 render tree가 재구성되면 render tree를 다시 그리는 작업

숫자와 상관없는 스타일 변경시에는 repaint만 실행됨

reflow, repaint는 부하가 높기때문에 신중히 사용

배열, 객체 생성시 성능향상 Tip

반복문 사용시 성능향상 Tip

반복문 사용시 for-in 은 순차적 탐색이 아닌, 반복 시점마다 객체의 모든 속성을 무작위 탐색하기 때문에 사용 지양

반복문 사용시 for 안에 array.length 사용하게 되면 반복시점마다 array.length 실행되기 때문에 사전에 변수에 담아서 사용

반복되는 객체사용시 별도의 변수에 담아서 사용

1. form data 전송 및 결과 json 받는 복합 sample

$('form').on('submit', function(event) {

    event.preventDefault();

    $.ajax('/book', {

      type: 'POST',

      data: $('form').serialize(),

      dataType: 'json',

      success: function(response) {

        var msg = $('<p></p>');

        msg.append(response.description);

        msg.append(response.price);

        msg.append(response.nights);

        msg.append(response.confirmation);

        $('.tour').html(msg).fadeIn();

      },

      contentType: 'application/json'

    });

  });

2. 단순 list data 조회용 sample

1) $.ajax 사용

$.ajax('/cities/deals', {

success: function(result) {

$.each(result,function(index, dealItem){

console.log(dealItem);        

});

}

});

2) $.getJSON 사용

$.getJSON('/cities/deals', function(result) {

$.each(result,function(index,dealItem){

var dealElement = $('.deal-' + index);

dealElement.find('.name').html(dealItem.name);

dealElement.find('.price').html(dealItem.price);

});    

});

event.stopPropagation()

이벤트 발생시 중첩된 상위 태그의 이벤트까지 발생하지 않고 현재 태그의 이벤트만 발생시키고 싶은 경우에 사용

event.preventDefault()

a태그에 #사용시 페이지 최상단으로 이동하는 효과를 사용하고 싶지 않을때 사용

Sample code

$('form').on('submit', function(event){

    event.preventDefault();

    $.ajax('/register',{

type:post,

data:$('form').serialize()

});

});