一个HTML中有很多个div元素

Question

我有一个实验性问题。我想用许多 div 元素制作图像，每个 div 的 width 和 height 都为 1px。 我从 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），还是与浏览器无关？

附注：我的同事说：“Silverlight没有这样的问题，您甚至可以添加50000个元素，它仍然可以正常工作”，我想给他“我的答案”。

谢谢

- Taron Mehrabyan

---

实验是仅使用HTML元素。 - Taron Mehrabyan

是的，但我应该在画布中绘制，但在这种情况下，我使用div创建图像。 - Taron Mehrabyan

这只是一个猜测，但是我没有看到任何换行符，所以我假设cnt已经具有正确的大小。也许是float造成了性能问题 - 我建议尝试将其改为绝对定位，并设置left和top属性。 - Kobi

但我认为问题不在元素样式上，而是在DIV的数量上，这对浏览器的渲染来说很困难。没有换行符，因为cnt具有与图像相同的固定大小。 - Taron Mehrabyan

你应该将元素写入DOM中，而不是文档中。 - Milche Patern

Milche Patern：我不明白你说的“不是文档”是什么意思？ - Taron Mehrabyan

Answer 1

不应该在每次循环中添加。将输出构建为一个字符串，然后进行一次添加。我还会删除document.createElement，直接手动构建。

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

- Papa

---

这里讲到的是关于编程的内容。在比较DOM操作和字符串连接时，后者更加快速且性价比更高。使用documentFragment可以提高DOM操作的效率，但与字符串连接相比，它仍然要慢得多。 - Tommi

@Tommi 没错。另外，如果您需要对DOM进行更改，删除元素，请先将其作为一个大块移除，然后进行更改，最后再一次性添加回去。 - Papa

但我不是每次都添加，我会创建一个 documentFragment ，最后再将其添加到容器中。 - Taron Mehrabyan

由于您在使用 DOM 操作，因此速度仍然会很慢。对于大型 HTML 操作，字符串拼接是最快的，因为它需要很少的 CPU 就可以放置在页面上。每次您添加一个子元素时，浏览器都必须进行处理。不妨试试！ - Papa

Answer 2

如果实验只使用HTML元素，我建议您从画布中获取Base64图像，然后将其添加到img标记中。

var src = canvas.toDataURL();
var img = document.getElementsById('image_id');
img.src = src;
img.onload = function () {
  console.log('image loaed');
};

如果您需要动态创建图像

var src = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = src;
img.onload = function () {
  document.body.appendChild(newImg);
};

- davidforneron

---

不，experinet 是使用许多元素来创建一张图像。 - Taron Mehrabyan

好的，我误解了这个实验。 - davidforneron