HTML : 가장 빠른/가장 좋은 방법은 내가 큰 데이터 테이블을 포함하는 HTML 페이지에서 일하고 있어요

Question

모든,

큰 테이블에서 여러 셀의 내용 (jQuery를 또는 JavaScript)를 업데이트합니다.

사용자가 해당 페이지의 다양한 컨트롤과 상호 작용할 때 페이지를 다시로드하지 않고도 테이블의 데이터를 업데이트하고 싶습니다.

즉, 사용자가 컨트롤의 값을 변경하면 많은 계산을 수행하는 JavaScript 함수가 트리거되어 테이블의 데이터를 "업데이트"합니다. 일반적인 시나리오에서는 50 개에서 500 개 사이의 셀을 업데이트해야합니다.

내 기본 접근 방식은 :

• 는 자바 스크립트 함수의 각 <td> 세포에 고유 한 ID
• 를 할당하는 세포를 업데이트
• 사용 innerHTML를 업데이트 할 필요가 각 셀에 대한 참조를 얻을 수 document.getElementById()를 사용

괜찮 으면 작동하지만 매우 느립니다. 예 : innerHTML으로 전화를 걸어 브라우저가 전체 테이블을 다시 렌더링하도록 하시겠습니까? 즉, 500 개의 셀을 업데이트하면 500 개의 '다시 렌더링'을 트리거합니까? 또는 함수가 완료되면 브라우저는 테이블을 다시 렌더링합니까?

간단히 말해서 가장 좋은 방법은 무엇입니까?

• 현재 접근 방식은 무엇입니까?
• 자바 스크립트에서 전체 테이블을 문자열로 다시 만든 다음 테이블이 포함 된 div에서 ONE innerHTML을 호출 하시겠습니까?
• 다른 건 없나요? 그는 "DOM 떨어져"변화를 설명한다는 점에서

  DOM, HTML5, & CSS3 Performance

  ;

는 최근 최적화 자바 스크립트 성능에 대한 폴 아일랜드어의 우수한 (IMO) 프리젠 테이션을 보았다 불행히도 - 그건 내 머리 위로하고, 그의 프레 젠 테이션은 실제 코드 예제를 포함하지 않습니다.

저는 스트레이트 자바 스크립트 솔루션을 선호하지만, jQuery 솔루션에도 만족할 것입니다.

조언이나 통찰력에 대해 미리 감사드립니다.

Answer 1

innerHTML을 사용하는 것이 최선의 방법이라고 생각합니다. 각 셀의 ID가 고유 한 경우 브라우저는 단일 셀을 업데이트하기 위해 전체 테이블을 새로 고칠 필요가 없습니다. 현재 작성중인 웹 사이트에서 innerHTML을 사용하고 있으며 매우 빠르게 작동합니다. 제대로 작동해야하는 올바른 동작에 기능을 할당해야합니다. 여러 셀이 동일한 값을 가질 경우 클래스 사용을 고려하십시오. 이 경우 jQuery는 클래스를 쉽게 참조 할 수 있도록합니다.

기본적으로 현재 접근 방식을 사용하십시오. 필요한 경우 각 셀을 렌더링하는 것이 가장 빠릅니다 (내 이해 및 논리에서)

Answer 2

취하는 방식은 괜찮습니다. 그러나 jQuery 나 다른 추상화 라이브러리를 사용하는 것이 좋습니다.이 라이브러리는 다양한 브라우저에서 innerHtml을 구현할 때 어떤 단서를 처리합니다 (일부 브라우저는 대소 문자를 구분합니다). 이것은 당신의 삶을 더 편하게 만들 것이고, 당신은 브라우저의 특질에 맞서기보다는 당신의 논리를 개발하는데 집중할 것입니다.

Answer 3

이 문제는 논란의 여지가있을 수 있습니다 ...하지만 더 나은 그런 식으로