테스트 사이트 - 개발 중인 베타 버전입니다

append속도개선 방법이있을까요? 채택완료

mmkk2 5년 전 조회 2,270

 

다X, 직X 처럼

지도에 표시된 항목들을

오른쪽에 리스트로 해서 APPEND로 동적생성을 하는데, 데이터가 200개가 넘으니

속도가 굉장히 느리더라구요..

 

속도개선을 하는방법이 있을까요?ㅠ.ㅠ

 

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
5년 전

보여지는 데이터부터 순차적으로 생성하시거나 가상 dom를 활용한 추가 방법이 있습니다.

</p>

<p>/*가상 dom에 추가함*/

var vdom = $(document.createDocumentFragment());

var dom = $('#test'); 

['1','2','3','4'].forEach(function(item) {</p>

<p> vdom.append('<div>' + item + '</sdiv>');</p>

<p>});</p>

<p> </p>

<p>/*추가한 내역을 실제 엘리먼트에 추가*/</p>

<p>dom.append(vdom);

 

위와 같이 실행하면 200번 그릴것을 한번 그리기 때문에 눈에 띄는 개선을 할 수 있습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

동 = 200개

구 = 100개

시 = 50개

도 = 2개

 

이런식으로 그룹으로 묶어서 보여주고

해당 그룹 내에 접근시 하위를 보여지게 하는게 제일 좋습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

5년 전

각각 Append를 하느냐 아니면 한번에 Append하느냐 차이일 것 같습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인