브라우저에서 큰 격자를 효율적으로 표현하십시오.

Question

브라우저에서 최대 10,000 개의 간단한 셀 (예 : 100 x 100)의 격자를 표시하고 조작해야합니다. 이 셀들은 기본적으로 단지 색깔있는 직사각형입니다. 조작이 행에 셀 그룹을 포장 셀 당 1 개 사업부, 1 DIV를 사용하는 등 각 셀에 클릭을, 취급, 자바 스크립트를 사용하여 셀 색상을 변경 포함, 나는 기본적으로 10,000 DOM 요소까지 얻을 수 있습니다,하지만 여전히 아주 많이. 나는 getElementById 같은도 빠른 DOM 기능의 성능에 대한 걱정.

초기 질문 : 필요한 모든 DOM 요소 참조를 자바 배열 (예 : 10,000 요소 배열, 각 셀에 대해 하나의 요소)에 저장하고 요소 단위로 CSS를 조작하면기도가 있습니까? DOM이 말하자면 200-500 개 요소가있을 때처럼 빨리 될 수 있습니까?

그래서이 100x100 격자를보다 효율적으로 표시 할 수있는 방법에 대한 제안을 찾고 있습니다. I는 canvas를 사용하여 자바 스크립트를 사용하여 각 셀을 그리기 간주하지만 세포의 스타일을 편집 할 수있는 시간을 제공 특히 나는이 사실이 얼마나 더 빨리 모르겠어요했습니다. 어떤 점에서 나는 아마이 일이 IE 호환 확인해야합니다 : 그것은 완전히 상호 호환되지이기 때문에이 또한 canvas로 갈 너무 경사가 아니에요 (@ # % $ IE를 보내고 읽기).

귀하의 의견은 무엇입니까?

Answer 1

가치가있는 경우 국경을 사용하여 하나 이상의 <div>을 세 개 이상의 영역으로 나타낼 수있는 가능성이 있습니다. 이 브라우저 간 호환성을 보장하기 위해 어색 할지라도 (삼지창, 도마뱀 붙이, 웹킷과 프레스토의 차이점을 부여).

프레젠테이션에 셀이 기본적으로 테이블 형식 인 이유가 있다면 표를 사용할 수 있습니다. 어느 것이 당신의 유스 케이스에 따라 비 의미 론적 일지라도 조금 단순화 할 것이다.

또한 개인적으로 테이블, divs, 목록 (아마도 ul이지만 사용할 수있는 옵션이 있음)을 사용하여 테스트 해보겠습니다. 물론 사용 사례에 따라 달라집니다. 당신이 찾은 것을 가지고 다니는 것이 가장 빠릅니다.

일부 대역폭을 절약하기 위해 예측 가능한 높이 너비가 될 것이라면 각 셀의 배경/색칠에 CSS 스프라이트를 사용하는 것이 좋습니다. 코멘트의 질문에 응답

---

:

div 하나는 100 픽셀의 각각 div 고정 높이/폭을 가정하면, 세 영역의 색상을 생성해야한다.

div#3areas 
{width: 100px; 
height: 100px; 
background-color: #f00; /* for the vertically-centred area */ 
border-top: 100px solid #00f; 
border-bottom: 100px solid #0f0; 
} 

같은 것을 생성해야합니다 : 인해 브라우저가 국경을 처리하는 다른 방법으로,

+------------------------+ 
|      | 
|  border-top  | 
|  (#00f   | 
+------------------------+ 
|      | 
|  central content | 
|  area (#f00)  | 
+------------------------+ 
|      | 
|  border-bottom  | 
|   (#0f0)   | 
+------------------------+ 

을하지만 아마하지 않습니다, 참조 : http://www.cssplay.co.uk/boxes/borders.html (이것은 밖으로 외 오히려입니다 불구하고 IE6, 모질라 1.5 및 Netscape 7 주석의 가치가있는 것으로 간주 될 때 날짜)에 기록된다.

Answer 2

jsgraphics은 2D 드로잉을 위해 div를 사용하는 방법을 보여줍니다. 최악의 경우 각 div는 픽셀이며 캔버스에서 수천 개를 관리 할 수 ​​있습니다.

또 다른 대안은 사용자가 그 당시에 볼 수있는 것을 표시하는 것입니다. 가상 스크롤 영역 라이브러리와 같은 것이 유용 할 수 있습니다. 아이디어는 사용자가 볼 수있는 영역에 대해서만 렌더링 (div 만들기)하는 것입니다.google

Answer 3

JavaScript data grid for millions of rows를 참조하거나, 짧은에, SlickGrid를 사용 - http://github.com/mleibman/slickgrid