浏览器中的图像表现为背景重复CSS

Question

有没有人知道哪个浏览器在这两个选项之间加载时间会更好:

background-image:url('1by1px.png');

要么

background-image:url('10by10px.png');

为div重复1px乘1px半透明png.或者更大的一个说10px乘10px.

必须要进行某种循环才能在浏览器中显示重复的图像,所以我想知道1px by 1px导致很多循环的图像是否显示图像显示它实际上可能比较大的图像速度快尺寸较小的图像,循环次数较少？

当然,计数器参数是1by1的图像尺寸小于10by10,但并不意味着它更小更好,因为多次循环可能不会像稍微小一些地循环大图像尺寸那样好.

有没有更多关于哪个会更好以及浏览器如何处理这样的情况？

Answer 1

不重复背景图像时,渲染所需的时间仅取决于最终缩放的图像,而不是原始图像.

文件中的图像被压缩为PNG格式,但在浏览器加载后,它采用RGBA位图格式(像素为4个字节).当重复背景时(假设在Intel x86上),浏览器的本机代码将使用REP MOVSD将位图数据从RAM移动到视频内存(这是标准序列,可能在图形驱动程序或特定GPU的各种实现上有所不同).

假设包含背景的HTML DIV的尺寸为100x100.

对于唯一的1像素图像:浏览器程序必须执行1万条"REP MOVSD"指令.

对于10x10图像:对于每个重复的图像,浏览器程序必须仅执行"REP MOVSD"10次(1次调用"REP MOVSD"可以渲染图像的1像素行(像素行)).因此,在这种情况下,执行的"REP MOVSD"指令的数量仅为10x100次(1张图像中的10次,100次重复图像).这需要1千'REP MOVSD'.

因此,基于较大图像的最终背景将更快地呈现.

更多注意事项: 上述说明并不意味着10x10图像的性能正好好10倍.'REP MOVSD'(例如CX = 9999)只有1个单CPU指令,但仍需要9999x4字节通过数据总线传输.如果使用9999个简单的'MOV',那么大部分数据仍然必须通过'数据总线,但是,CPU必须执行更多的9998指令.一个更聪明的浏览器将为具有复制图像的背景创建预渲染位图; 因此,每次需要传输到视频内存时,它只需要100'REP MOVSD'(100是最终背景中的像素行数,假设如上)而不是1万或1千.

Answer 2

我同意保罗的回答.我最近使用谷歌Chrome开发工具进行了一些粗略测试.我在背景图像上使用了不同大小的半透明png图像,并使用页面绘制时间来查看刷新屏幕需要多长时间.

结果如下:

没有-webkit-transform hack(舍入)的时候刷新:

2x2图像:65-160ms

10x10图像:60-150ms

100x100图像:55-135ms

1000x1000图像:55-130ms

使用-webkit-transform hack(舍入)刷新时间:

2x2图像:40-120ms

10x10图像:30-90ms

100x100图像:30-90ms

1000x1000图像:30-90ms

就像Paul所说的那样,较大的图像比较小的图像需要更短的加载(刷新)时间.但是,在图像变得超过10px后,它似乎变得不那么有效了.我没有看到100x100和1000x1000之间有太大差异.

在我看来,巨大的图像不会给你一个明显的结果,它可能会增加加载时间.所以,我认为任何大小在10到100之间的尺寸都足以满足性能和加载时间.

但是,不同的图像可能会有不同的结果,我认为您应该使用Google Chrome开发工具中的页面绘制时间工具测试您的网站,以获得准确的结果.