[Refactoring] ShoppingHow - DOM 조작 최소화

junamee·2021년 9월 10일
0

🧩리팩터링

목록 보기
2/5

ShoppingHow : Vanila JS

  • 최적화 상태를 위한 리펙토링

    BEFORE : 매 반복문마다 DOM을 생성하고 삽입하는 로직을 갖고있다. DOM을 직접 수정하기 때문에 매번 렌더링을 새로하기 위한 돔트리생성과 스타일 계산이 발생하고 있을 것이다.

makeHotDealTpl() {
    this.slideArea = _.$('.hot_deal_list');

    for (let i = 0; i < this.titleArr.length; i++) {
      if (i % 5 === 0) {
        this.slideLi = document.createElement('ul');
        this.slideLi.className = 'panel';
		}
								//... 
     this.slideLi.insertAdjacentElement('beforeEnd', slideDiv);
     if (this.slideLi.children.length === 5)
	    this.slideArea.insertAdjacentElement('beforeEnd', this.slideLi);
    }
  }

AFTER: 템플릿 리터럴을 활용해서 돔에는 마지막에 삽입만 시키는 방법으로 노드들을 모아 한번만 DOM에 추가하는 방법으로 스타일을 계산하는 비용을 줄였다.

makeHotDealTpl() {
    let carouseolTpl = '';
    for (let i = 0; i < this.titleArr.length; i++) {
      if (i % NUMBER_TO_SHOW === 0) {
        carouseolTpl += `<ul class='panel'>`;
      }
					  //...
      if (i % NUMBER_TO_SHOW === NUMBER_TO_SHOW - 1) {
        carouseolTpl += `</ul>`;
      }
    }
    this.slideArea.insertAdjacentHTML('afterbegin', carouseolTpl);
  }

profile
아티클리스트 - bit.ly/3wjIlZJ

0개의 댓글