내 웹 응용 프로그램에서 DOM

에 많은 양의 요소를 추가하면 엄청난 양의 데이터를 검색하고 데이터가있는 테이블 (약 800 행, 10 열이있는 테이블)을 만들어야합니다.
append() 메서드를 통해 브라우저가 잠시 동안 응답하지 않습니다.

거대한 데이터에 액세스하기 위해 저는 아약스 호출을 위해 웹 작업자를 사용하고 있습니다.
웹 근로자의 DOM을 조작 할 수 없기 때문에 어떻게해야합니까 ??
감사합니다 :)내 웹 응용 프로그램에서 DOM

편집 :
내가 그 위에 숨기기() (jQuery를 숨기기)와 같은 일부 기능을 원하는 경우에, 의지 innerHTML을 작업 ??

출처

2012-09-15 Navaneeth

어떤 형식 경우입니까? JSON? 이 경우 JavaScript 템플릿 엔진 (예 : Handlebars)을 사용하여 전체 HTML 문자열을 만든 다음 해당 문자열을 DOM에 한 번에 추가하는 것이 좋습니다. –

이것을 확인하십시오 [링크] (http://stackoverflow.com/questions/429174/posest-to-add-large-amount-of-dom-nodes-without-browser-choking) –

노드를 준비 할 수 있습니다. DocumentFragment를 추가 한 다음 한 번 추가합니다. 브라우저가 단편 생성 중에 차단해야한다고 생각하지 않습니다. – jimp

일부 자바 스크립트 템플릿 엔진을 사용하여 수동으로 요소를 추가하거나 innerHTML 문자열을 작성하는 것을 피할 수 있습니다. 예 : http://ejohn.org/blog/javascript-micro-templating.

<script type="text/html" id="user_rows_tpl"> 
    <% for(var y = 0, l = users.length; l > y; y++) { %> 
     <tr id="user-row-<%=y%>"> 
      <td><%=users[y].name%></td> 
      <td><%=users[y].surname%></td> 
      <td><%=users[y].age%></td>  
     </tr> 
    <% } %> 
</script>

그리고 당신이 당신의 개체를 렌더링하기 위해 자바 스크립트에서이 템플릿을 사용하는 : 시험에 대한

<script type="text/javascript"> 
    var table = document.getElementById("userTable"); 
    table.innerHTML = tmpl("user_rows_tpl", { 
     users: getUsers() 
    }); 
</script>

을

당신이 당신의 HTML 어딘가에 템플릿을 말해봐 1000 개의 사용자 개체를 만들어 테이블에 렌더링했습니다.
평균 렌더링 시간은 Google 크롬에서 약 20-25ms입니다. 나쁘지 않은가요? 데이터

DEMO

출처

2012-09-15 16:08:58

참고 : JavaScript로 DOM 요소에 액세스하는 것이 느려 반응이 더 좋은 페이지가됩니다.

당신은

var buffer = []; 
setInterval(function(){ $("#div").html(buffer.join(""); buffer = []; }, 1000); 

buffer.push("html"); 
buffer.push("html");

하여이 작업을 수행하고 Best Practices for Speeding Up Your Web Site

출처

2012-09-15 15:50:22

당신은 DOM 요소의 게으른 삽입을 지원하는 테이블 플러그인을 사용할 수 있습니다

(이 link for the performance

도이 링크를 확인 확인하실 수 있습니다 주문형). DataTables은 다양한 기능을 제공합니다 (including this one). 또한 작성해야하는 코드의 크기를 줄일 수 있습니다.

출처

2012-09-15 15:52:16 Jon

Dom 요소를 게으른 삽입하는 방법을 설명 할 수 있습니까 ?? 고맙습니다. :) – Navaneeth

내 웹 응용 프로그램에서 DOM

답변

관련 문제