Firefox에서 동적 HTML 테이블 생성 속도를 향상시키는 방법은 무엇입니까?

나는 끊임없이 업데이트되는 작은 테이블 (아마 10-12 셀)을 렌더링 중이다. 나는 그것이 빨리되고 싶다.Firefox에서 동적 HTML 테이블 생성 속도를 향상시키는 방법은 무엇입니까?

크롬이 작업 속도가 빠르지 만 Firefox/IE에서 문제가 발생합니다. 빠른 렌더링을위한 제안 사항이 있으십니까?

2010-01-04 RubyDubee

전체 표를 한 번에 렌더링하십시오 (표에 대한 전체 HTML을 작성하여 DOM에 삽입하십시오. 데이터를 순환하면서 셀/행을 삽입하지 마십시오). 또한 열에 대한 태그를 생성하면 도움이됩니다 (각 열의 너비를 지정하는 경우에도 더 많은 도움이됩니다).

질문에 (간접적으로 조금하지만) 나는 매우 관련이있을 수 있다고 생각

출처

2010-01-04 08:11:22 salgiza

하지만 FF와 Chrome의 속도가 다른 이유는 무엇입니까? 두 브라우저가 모두 다른 렌더링 엔진을 사용하기 때문에 둘 다 느리다면 차이가 없습니다. – RubyDubee

이것은 화관이 페라리보다 느린 이유이기도합니다. – jrharshath

@Pradyumna. Harshath.jr에 언급 된 것처럼 일부 엔진은 다른 엔진보다 빠릅니다. 그러나 일반적으로 페이지의 DOM을 수정하려는 경우 가능하면 변경 사항을 최소화하는 것이 좋습니다 (즉, 먼저 태그/html을 만든 다음 모든 변경 사항을 한 줄에 삽입하십시오).). 예를 들어 한 번에 하나씩 새 TD를 DOM에 삽입하면 브라우저는 매번 전체 페이지를 다시 레이아웃하려고 시도하지만 한 번에 전체 테이블을 삽입하면 한 번만 다시 레이아웃이 발생합니다. – salgiza

재미있는 acticle : http://www.hotdesign.com/seybold/

난 내 자신의 question에 대한 답변에서 그것을 가지고 : 렌더링을 개선하기 위해

출처

2010-01-04 08:13:50

한 가지 방법은이다 thead/tfooter 태그를 사용하십시오. 이들은 테이블의 주요 내용이 들어있는 tbody 태그 앞에 있어야합니다.

이렇게하면 브라우저는 렌더링하기 전에 얼마나 큰 테이블인지 알 수 있습니다.

출처

2010-01-04 11:38:10 Jeepstone

나는 "tfoot"를 의미한다고 생각합니다. –

예, 죄송합니다. 아니요 – Jeepstone

이렇게 렌더링 속도가 변하지 않을 것이라고 생각합니다. 이 주장을 실증 해 주시겠습니까? –

크롬 또는 Safari Dev-Tools (Windows의 경우 Ctrl-Shift-I 또는 Mac의 경우 Cmd-Alt-I)의 타임 라인 패널을 사용하여 실제로 페이지에서 확인할 수 있습니다. 이 정보는 페이지 스크립트 최적화에 대한 팁을 제공 할 수 있습니다. 일반적으로 모든 브라우저에서 동일한 일련의 이벤트가 발생합니다. 예를 들어 자바 스크립트가 DOM 노드를 동적으로 삽입하면 여러 레이아웃/페인트 이벤트가 표시됩니다.

dev-channel 버전의 Chrome으로 타임 라인 정보를 더 얻을 수 있지만 조금 불안정 할 수 있습니다.

불행히도 파이어 폭스에서 그런 악기를 찾지 못했습니다. 파이어 폭스에 대해 알고 있다면 알려주세요.

출처

2010-04-12 17:35:36 loislo

[Firebug의 Net 패널] (http://getfirebug.com/network)도 비슷한 기능을 수행합니다. –

Firefox에서 동적 HTML 테이블 생성 속도를 향상시키는 방법은 무엇입니까?

답변

관련 문제