许多许多 css 背景性能答案

【问题标题】：Many many css backgrounds performance许多许多 css 背景性能
【发布时间】：2012-07-19 05:29:08
【问题描述】：

我正在尝试不同的方法将图像转换为代表每个像素的 div。

一种方法是使用 php imagecolorat 创建带有background-color 的 div，效果很好。

但是，如果我有 数千个 div width:1px;height:1px; 每个都具有相同的 css background-image 并增加背景位置怎么办？

这会对性能造成什么影响？即：浏览器是多次绘制整个图像还是仅绘制作为背景可见的部分？注意原始图像有几百 kb。

谢谢

【问题讨论】：

我没有答案，但我真的很好奇你为什么要这样做。
拥有数千个动态生成的 div 很可能会影响您的页面性能。特别是如果您想为每个“像素”添加一些花哨的 efx
@Justin 当我有工作时，我很乐意链接到一个站点。我希望能够使用 javascript 以像素为基础操作图像，这样我就可以对扫描过滤器等进行动画处理。到目前为止，使用 php 方法效果很好，并且通过使用 AJAX 在页面加载中加载它并不是两个坏事。理想情况下，我可以制作这个客户端
哎哟。每个鼠标事件对象也包含坐标，绝对不需要大量的 div 元素。
哈哈，它就像 100,000 个 div。令人惊讶的是，性能并没有那么糟糕。我希望图像是完全可操作的。即，围绕像素随机播放，更改单个颜色等

【解决方案1】：

应该只绘制图像的一部分，但是绘制操作的调用次数与像素数量一样多，因此会影响性能。您是否尝试编写任何测试代码并测量其工作方式？

【讨论】：

【解决方案2】：

上千个 div 无论如何都会影响你的性能，因为浏览器必须解析每个 div，将其添加到 DOM，然后渲染它。

不同浏览器的实际性能会有所不同。只会绘制被请求的图像的一部分，但会为每个 div 调用绘制图像的渲染函数。特定浏览器的实现是否可以更快地渲染图像的一个像素或解析字符串并打印图像，或多或少。如果浏览器在内存中有图像，则差异可能没有实际意义。但是如果浏览器每次都必须打开图像文件，那么磁盘访问会杀了你。

话虽如此，我敢打赌有更好的方法来做你想做的事。您可以使用 JavaScript 获取鼠标单击/悬停/等的像素，然后在该特定点添加一个绝对 div 以创建您正在谈论的“过滤器”。此外，如果两个相邻的像素被标记，您可以只扩展前一个 div，而不是创建一个新的，这将大大提高性能

换句话说，只需加载带有img 标记的图像，然后使用 JavaScript 执行您想要执行的操作。

【讨论】：

嗯，这是一个有趣的想法。我使用了数千个 div，因为我希望图像是可破坏的。即：爆炸然后与javascript动画一起回来。当时我想不出任何方法来分割标签。如何使用
同样，可能，但<canvas> 支持各不相同，每当您说“数千个 ”时，您都会处理性能问题。您应该尝试找到限制需要创建的对象数量的方法。如果您只是为爆炸制作动画并重绘，请考虑生成 GIF 图像，然后将其隐藏，在需要时显示动画等等。这只是另一个想法。如果您不想要性能杀手，则需要找到限制您使用的对象数量的方法。