그리드를 그리는 가장 빠른 방법

(아마도 큰) 사각형 그리기가 필요합니다. 어떤 종류의 레이아웃이 가장 빨리 렌더링되는지 궁금합니다.그리드를 그리는 가장 빠른 방법

각 사각형 부동 사각형
실제 테이블
다른을 가득, 각 행에 대해 절대적
DIV 위치?

2014-06-21 Karolis Juodelė

예를 들어 [피들] (http://jsfiddle.net/XeN5k/)이 있습니다. 하지만 2x2 대신 40x40의 그리드가 필요합니다. –

간단한 '인라인 블록'DIV에 투표 할 것입니다. 그러나 성능에 관심이 있다면 여러 브라우저에서 여러 가지 가능성을 실제로 테스트해야합니다. (테이블은 실제로 빠르지 만 테이블이 아닌 사용법에 대해서는 제어가 불가능합니다.) –

@ ÁlvaroG.Vicario, 테이블이 빠른 이유는 무엇입니까? 나는 그들이 다소 복잡한 레이아웃 알고리즘을 사용하고 있다는 인상하에 있었다. 또한, 어떻게 정확하게 이것을 밴 마크 할 수 있습니까? "시작된 그림", "완성 된 그림"이벤트가 있습니까? –

렌더링 시간에 많은 차이가 있는지 확신하지 못합니다. 모두 비슷한 양의 코드를 사용합니다.

절대 위치 지정은 대부분의 CSS를 생성하기 때문에 개인적으로 피할 것입니다.

표 형식의 데이터를 보여 주거나 꾸미기위한 것입니까? 전자의 경우 테이블을 사용하십시오.
후자의 경우, 대신 단일 셀의 배경으로 바둑판 식 그래픽으로 얻을 수 있습니까?

또한 자바 스크립트 루프를 사용하면 각 사각형을 수동으로 작성하는 것보다 코드를 정리할 수 있습니다.

출처

2014-06-21 15:59:43

JS로 생성 된 장식입니다. 렌더링 시간에 코드의 양이 중요한 요소입니까? 몇 백 개 항목으로 브라우저 속도가 느려지는 것을 보았습니다. 읽기에는 시간이 걸리지 않아야합니다. –

타일링 된 배경 이미지가 장식 일 경우 아마도 가장 좋은 방법 일 것입니다. 스타일 시트와 HTML 내용만으로 장식을 유지합니다. 렌더링에 관해서 : 현대의 브라우저에서는 비디오 나 나쁘게 작성된 자바 스크립트 (보통 ajax)와 같은 무거운 것들에 의해 속도가 느려진다. 개인적으로 코드가 매우 간단하기 때문에이 경우 걱정해야하는 것으로 보지 않습니다. –

그리드를 그리는 가장 빠른 방법

답변

관련 문제