一个html中有很多div

Question

我有一个实验问题.我想用很多东西制作图像div,div有一个1px width和height.我得到了图像的像素数据canvas context,创建div并给每个div赋值background-color,这意味着div的数量等于图像像素数,但是如果有一个图像例如100x56分辨率就可以了,但万一更多比这个,浏览器渲染html非常慢.下面的部分代码

    var fragment = document.createDocumentFragment();
    var data = context.getImageData(0, 0, canvas.width, canvas.height).data;
    for (var i = 0; i < data.length; i += 4) {

        var red = data[i];
        var green = data[i + 1];
        var blue = data[i + 2];

        var div = document.createElement('div');
        div.style.width = '1px';
        div.style.height = '1px';
        div.style.float='left'
        div.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
        fragment.appendChild(div);

    }
   cnt.appendChild(fragment)

我知道这个问题不太适用,但我想知道是否有任何案例可以在浏览器中更快地渲染大量元素(我使用Chrome)或者它是否与浏览器无关？

Ps:我的同事说"Silverlight没有这样的问题,你甚至可以添加50000个元素,它会很好用",我想给他"我的回答"

谢谢

Answer 1

您不应该在每个循环上附加。使用输出构建一个字符串，然后执行一个附加操作。我还会删除 document.createElement 并手动构建它。

另一个问题是每次循环时都要声明 RGB 变量。如果可能的话，在循环外部声明任何变量。