표 형식 데이터의 경우 CSS와 <TABLE> 중 무엇이 더 빠르게 렌더링되나요?[닫은]
https://stackoverflow.com/questions/135826
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
현재 브라우저에서 일반 HTML을 사용하여 테이블을 렌더링하는 데 걸리는 시간과 실제 사용을 피하는 해킹된 CSS 청교도 방법을 비교하는 데 걸리는 시간에 대한 통계를 찾고 있습니다. TABLE, TR, TD 등.태그.
나는 적절한 것을 찾고 있지 않고 단지 더 빠른 것을 찾고 있습니다., 특히 Firefox 3에서는 다른 브라우저의 통계에도 관심이 있습니다.의 강의 TABLE 태그는 테이블용으로 설계되었습니다.그것은 질문이 아닙니다.
해결책
일반적으로 나는 사용한다고 말할 것입니다u003Ctable> 표 데이터의 경우. 그러나 테이블이 매우 길고 (100 행 이상) 열의 수가 낮 으면 (~ 3), DIV를 사용하여 행을 사용하면 마크 업 발자국이 훨씬 적습니다. DOM 트리 크기를 줄이는 데 도움이되므로 DOM이 많은 JS 라이브러리에서 제공하는대로 DOM 검색 JavaScript (많은 JS 라이브러리에서 제공)를 사용하는 경우 특히 관련이 있습니다.
이것은 경험에서 비롯된 것입니다. 나는 그러한 테이블을 가지고 있었고 최적화를 찾고있었습니다. DIV 기반 디스플레이로 이동하여 HTML을 3 분의 1로 삭감했으며 DOM 트래버스 성능이 크게 개선되었습니다.
다른 팁
실제로 테이블 데이터가있는 경우 테이블을 사용하십시오. 아무것도 테이블을 사용해서는 안된다는 생각은 의도 된 의미 론적 목적으로 만 HTML 태그 만 사용해야한다는 올바른 개념의 잘못된 확장이었습니다. 즉, 레이아웃에는 CSS를 사용하지만 표 데이터에는 테이블을 사용합니다. 테이블을 사용하지 않는 것은 아닙니다.
일부 브라우저는 전체 테이블이 전송 될 때까지 대기하므로 컨텐츠 크기에 대한 열 너비를 조정하기 위해 디스플레이를 사용하여 DIV를 사용하여 아마도 세우다 모든 브라우저에서 평균을 찾고 있다면 더 빠릅니다.
즉, 테이블이 필요한 경우 테이블을 사용하십시오.
이 질문은 이것과 비슷한 것 같습니다.HTML에서 레이아웃에 테이블을 사용하지 않는 이유는 무엇입니까? 따라서 일부 응답도 확인하고 싶을 수도 있습니다.
일반적으로 브라우저는 전체 테이블이 계산 될 때까지 테이블을 렌더링하지 않습니다. 즉, 사용자 관점에서 큰 테이블은 테이블 대신 CSS 스타일을 사용하여 동일한 콘텐츠보다 느리게됩니다. 테이블을 사용하여 상태 정보 그리드를 표시하는 한 시점에서 웹 응용 프로그램과 함께 작업하고 있었으며 표시가 매우 집중적이며 매우 느 렸습니다. CSS를 사용하여 표시되는 동일한 정보가 더 빠르고 중요하게, 전체 테이블을 기다리는 대신로드 된 상태에서 라인별로 표시되기 시작했습니다. 느꼈다 최종 사용자로서 더 빠릅니다. 테스트를 위해 샘플 데이터 세트를 사용하여 데이터를 표시하기 위해 CSS를 사용하여 조사하는 것이 좋습니다. 이것이 테이블이 실제로 우리가 가진 특정 사용 사례에 대해 훨씬 느 렸음을 확인하기 위해 한 일입니다.
레이아웃에 CSS를 사용하고 모범 사례를 준수하고 CSS를 별도의 파일로 유지하는 경우 CSS는 일반적으로 캐싱되기 전에 한 번만 다운로드해야하므로 캐싱의 이점을 제공합니다.
레이아웃에 테이블을 사용하는 경우 매 페이지마다 HTML과 함께 레이아웃 테이블이 전송되므로 대역폭과 다운로드 시간이 증가합니다.
시도 할 수 있지만 테이블의 렌더링 속도를 향상시키기 위해 테이블 층 설정 : 고정; 그것이 도움이되는지 보려면 ..
다른 브라우저마다 JavaScript/CSS 성능이 크게 다르므로 여기에서 일반화하기가 매우 어렵습니다. 예를 들어, IE7은 충격적으로 느린 엔진을 가지고 있으며 Chrome 's는 마음이 빠르게 빠릅니다. Firefox는 그 사이 어딘가에 있으며 2 또는 3을 사용하는 경우 Depending입니다.
나는 여기서 가장 중요한 측면으로 렌더링 속도를 취하지 않을 것입니다. HTML 테이블은 테이블 데이터를 위해 만들어집니다. 그것을 많은 div에 넣는 것은 내 이해에 완전히 잘못 될 것입니다.
위의 답변의 대부분과 마찬가지로, 레이아웃 (CSS3 사용)을 제어하려면 표 형 데이터와 DIV를 표시하는 경우 테이블도 사용한다고 말합니다. 믿음과는 달리, 테이블은 div보다 렌더링이 느리지 않습니다. ColGroup과 같은 몇 가지 속성을 설정하고 레이아웃을 고정으로 유지하는 경우. 다음 링크에서 방법에 대한 자세한 내용을 확인하십시오.
sitees.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata
테이블 형식 데이터의 경우 테이블을 사용하세요.테이블에는 다음과 같은 모든 종류의 멋진 기능이 포함되어 있습니다. <thead> 그리고 <tfoot> 태그, 범례, 제목, 캡션 등테이블을 테이블로 만드는 데 필요한 모든 것.
또한 CSS가 작동하지 않거나 로드되지 않거나 중요하지 않은 경우에도 테이블은 여전히 원하는 대로 보이고 작동합니다.
개인적으로 내가 읽은 바에 따르면, 실제로 테이블 데이터를 제시하는 경우 테이블이 작업에 더 적합합니다. 저는 개인적으로 사실이라는 것을 알았습니다.
"더 빠른"것의 원시 수는 @SkaffMan이 언급 한 바와 같이 브라우저에 따라 다릅니다. 그러나 "올바른"것은 테이블 데이터에 테이블을 사용하는 것이 합리적입니다.
