php - 许多许多 css 背景性能

Question

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

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

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

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

谢谢

Answer 1

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

Answer 2

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

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

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

换句话说，看看只是加载带有img标签的图像，然后使用 JavaScript 来做你想做的事情。