在网页上设计最快的方法

Question

我需要在一个网页上使用javascript动态绘制4000个矩形，我尝试使用divs，SVG和canvas，但最大的问题是调整页面大小，因为我必须重绘这个页面可能需要5秒钟。

哪种方法是在一个网页上设计矩形的最快方法？

修改

我有两张像这样的桌子

当设计'images'时，页面的滚动非常好，但问题是我必须调整wole页面的大小以适应窗口大小。

实时我必须在一些数据的基础上更改图片，这是一个结果的例子

你可以看到每个矩形的内部图像不一样，所以我不仅可以改变它的颜色。

现在我有75列和61行，可以生成4575个单元格

Answer 1

• 需要jQuery

我写了一个简短的小提琴，对我来说似乎相当复杂。

$(document).ready(function () {
    var markup = new Array();
    for (var i = 0; i < 4000; i++) {
        markup.push("<span />");
    }
    $('#container').append(markup.join(""));

});

An example of creating 4000 divs as rectangles

问题是，你究竟想做什么？你能提供有问题的例子吗？

Answer 2

问题已解决canvas！

我创建了一个JSON变量来存储所有矩形的值，并在每次重新调整大小的事件中重绘页面。

尝试之后我发现不是使用

context.rect(posX, posY, width, height);
context.fill();

我应该使用

context.fillRect(posX, posY, width, height);

速度更快，我可以使用Internet Explorer在大约100毫秒内渲染出大量的矩形，我觉得它非常棒。