在浏览器中有效地表示大网格 [英] Efficiently representing a large grid in a browser

问题描述

我需要在浏览器中显示和操纵最多达10,000个简单单元的网格（比如100乘100）。这些单元基本上只是一个彩色矩形。操作包括使用Javascript更改单元格颜色，处理每个单元格的单击等。使用每个单元格1个div和1个div将单元格组包装到一行中，我可以深入到基本上10,000个DOM元素，但这仍然相当很多。我担心甚至更快的DOM函数的性能，比如 getElementById 。

I need to display and manipulate, in a browser, a grid of up to 10,000 simple cells (say, 100 by 100). These cells are basically just a colored-in rectangle. Manipulations include changing cell colors using Javascript, handling a click on each cell, etc. Using 1 div per cell, and 1 div to wrap groups of cells into a row, I can get down to basically 10,000 DOM elements, but that is still quite a lot. I'm concerned about the performance of even the faster DOM functions, like getElementById.

最初的问题：如果我将所有必要的DOM元素引用存储在一个Javascript数组中（例如，一个10,000个元素的数组，每个单元格中的一个元素）并且以每个元素为基础操作CSS，这是否有一个祈祷， DOM有200-500个元素？

Initial question: if I store all the necessary DOM element references in a Javascript array (e.g. a 10,000-element array, one element for each cell) and manipulate the CSS on a per-element basis, does this have a prayer of being as quick as it would be when the DOM has, say, 200-500 elements?

所以，我正在寻找关于如何能够更有效地显示这个100 x 100网格的建议。我考虑过使用 canvas 并使用Javascript绘制每个单元格，但我不确定这实际上会有多快，特别是在编辑样式时的细胞。我也不太喜欢用 canvas ，因为它不完全交叉兼容（阅读：@＃％$ ing IE），并且在某些时候我可能需要让这个东西与IE兼容。

So, I'm looking for suggestions of how I might be able to show this 100 x 100 grid more efficiently. I've considered using a canvas and drawing each cell using Javascript, but I'm not sure how much faster this would actually be, especially when it comes time to edit the style of the cells. I'm also not so inclined to go with a canvas because it's not fully cross-compatible (read: @#%$ing IE) and at some point I will probably need to make this thing IE-compatible.

你的想法是什么？

What are your thoughts?

推荐答案

请参阅数百万行的JavaScript数据网格或总之，使用SlickGrid - http://github.com/mleibman/slickgrid

See JavaScript data grid for millions of rows or, in short, use SlickGrid - http://github.com/mleibman/slickgrid

这篇关于在浏览器中有效地表示大网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！