append속도개선 방법이있을까요?
본문
다X, 직X 처럼
지도에 표시된 항목들을
오른쪽에 리스트로 해서 APPEND로 동적생성을 하는데, 데이터가 200개가 넘으니
속도가 굉장히 느리더라구요..
속도개선을 하는방법이 있을까요?ㅠ.ㅠ
답변 3
보여지는 데이터부터 순차적으로 생성하시거나 가상 dom를 활용한 추가 방법이 있습니다.
/*가상 dom에 추가함*/
var vdom = $(document.createDocumentFragment());
var dom = $('#test');
['1','2','3','4'].forEach(function(item) {
vdom.append('<div>' + item + '</sdiv>');
});
/*추가한 내역을 실제 엘리먼트에 추가*/
dom.append(vdom);
위와 같이 실행하면 200번 그릴것을 한번 그리기 때문에 눈에 띄는 개선을 할 수 있습니다.
각각 Append를 하느냐 아니면 한번에 Append하느냐 차이일 것 같습니다.
동 = 200개
구 = 100개
시 = 50개
도 = 2개
이런식으로 그룹으로 묶어서 보여주고
해당 그룹 내에 접근시 하위를 보여지게 하는게 제일 좋습니다.
답변을 작성하시기 전에 로그인 해주세요.