javascript - 一个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)中更快地渲染大量元素，或者它是否与浏览器无关？

P.s.: 我的同事说“像这样在Silverlight中没有问题，你甚至可以添加50000个元素也可以正常工作”，我想给他“我的答案”

谢谢

Answer 1

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

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