간단하지만 실수 할 수 있는 최적화

가볍게! 더 가볍게!

Sencha 블로그에서 최적화에 관한 글이 있어서 적어본다.

반복문 최적화

나쁜 예

function badTotalFn(menuItem) {
     var r = store.getRange(),
             total = 0;
 
     Ext.Array.each(r, function(rec) {
             total += rec.get(menuItem.up('dataIndex').dataIndex);
     });
}

좋은 예

function goodTotalFn(menuItem) {
        var r = store.getRange(),
                field = menuItem.up('dataIndex').dataIndex;
                total = 0;
 
        for (var j = 0, l = r.length; j < l; j++) {
                total += r[j].get(field);
        }
 }

첫째로, 간단한 로직의 경우에는 Ext.Array.each 보다는 기본 for 루프를 사용하는 것이 좋다. Ext.Array.each나 foreach 등에는 매 반복마다 전달받은 함수를 호출하게 된다. 반복 회수가 많아지게 되면 눈에 보일정도의 성능 차이가 난다.

둘째는 menuItem으로부터 dataIndex를 얻는 부분은 처음에 한번 캐시 해놓고 사용해야 좋다. .up() 호출을 하게 되면 ComponentQuery가 발생한다.

레이아웃 최적화

코드 내에서 레이아웃에 영향을 끼치는 로직을 작성 시에는 앞 뒤로 layout 방지 코드를 작성해준다.
가령, 버튼 내에 텍스트를 수정하는 코드는 버튼을 소유하고 있는 툴바의 updateLayout을 발생시킨다.

예제

Ext.suspendLayouts();
// 레이아웃에 영향을 끼치는 로직 모음
Ext.resumeLayouts(true);

또한 afterRender에서 DOM에 관한 후처리를 하지 말아라. DOM 관한 처리는 HTML이 생성되기 전에 하는 것이 좋다.

더 좋은 방법이 있다면 댓글에 알려주세요!

제발