내 프로젝트에서는 PHP 스크립트 AJAX 호출을 통해 특정 열의 내용을 HTML 테이블에 업데이트해야합니다.성능 향상 : 특정 셀을 업데이트하거나 전체 테이블을 교체 하시겠습니까?
워크로드 측면에서 : 테이블에는 약 4 개의 열과 약 20 개의 행이 있습니다 (더 많은 행이 시간에 따라 추가 될 수 있음).
어떤 이상 (또는 대부분) 효율적인 것 :
의 경우에 전체 테이블을 교체
가장 좋은 답변을 얻는 유일한 방법은 각 접근 방식을 벤치마킹하는 것입니다. HTML 생성 코드가 어떻게 수행되는지에 달려 있습니다. 매우 빠르다면 HTML을 처음부터 빌드하고 테이블의 부모에 innerHTML 할당을하는 것이 더 빠를 수도 있습니다. 그러나 속도가 느린 경우에는 각 테이블 셀을 반복하고 각각의 내용을 대체하는 것이 더 빠를 수도 있습니다. 간단한 벤치 마크 만 실행하면됩니다.
또한 놀랍게도 20 개의 테이블 행으로 할 일은 눈에 띄지 않습니다.
될 행과 셀을 교체하는 것이 더 빠를 것입니다. 하지만 약 20 개의 행에서 차이점을 발견하지 못합니다.
+1, 그리고 그럴 가능성은 높지 않지만 전체 테이블을 바꾸려면 브라우저가 전체 테이블의 DOM 구조를 다시 만들어야하기 때문에 셀만 바꾸는 것이 확실히 빠릅니다. – casablanca
그러나 브라우저는 innerHTML을 사용하면 상당히 빠르며 개별 셀을 대체하려면 교체 할 노드를 찾기 위해 여전히 복잡한 DOM 통과가 필요합니다. 확실히 각 셀의 내용, 업데이트 할 번호 및 테이블 HTML을 처음부터 생성하는 복잡성에 따라 달라집니다. – bcherry
알기. 나는 HTML 생성 코드 시간을 고려하지 않았다. 나는 jQuery 반복 시간에만 초점을 맞추 었는데, 이제는 절반 밖에 안된다. 감사합니다. – Brownbay
그냥 궁금해서 javascript 런타임을 벤치마킹하는 좋은 방법은 무엇입니까? 화재 개똥 벌레가 그런 짓을하는지, 아니면 그냥 시작과 끝 부분에 날짜 시간을 유지하고 어딘가에서 차이를 인쇄하는 것입니까? 감사. –
@ Jeff : 당신이 제안한 것과 같은 간단한 "시간차"접근법이 효과적 일 수 있지만 경과 시간을 기록 할 수 있으려면 스크립트가 최소한 수십 밀리 초 동안 실행되어야합니다. – casablanca