在浏览器中的图像性能为背景重复CSS [英] Images in browsers performance for background-repeat CSS

问题描述

是否有任何人知道这将是这两个选项之间的浏览器加载时间更好的：

Does any one know which is going to be better for a browser loading time between these two options:

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

或

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

一个由1px的半透明PNG重复股利1px的。或一个较大的人士说，10px的10px的。

A 1px by 1px semi transparent png repeated for the div. Or a larger one say 10px by 10px.

必须有某种循环的一个必须完成的在浏览器中显示重复的图像，所以我想知道，如果这是 1x1像素使图像循环，以获得图像显示，它实际上可能比大标注尺寸图像少迅速用更少循环？的很多

There must be some kind of looping that has to be done to display the repeated image in the browser, and so I wondered if the image which is 1px by 1px causes alot of looping to get the image displayed that it may in fact be less speedy than a larger dimensioned image with less looping?

当然，相反的观点是图像尺寸相比10by10为1by1所在较小，但并不意味着它能够更好地更小，因为循环多次可能不作为扩展循环较大的影像略较少好。

Of course the counter argument is image size is smaller for 1by1 compared to 10by10, but doesn't mean its better to be smaller because looping many times might not scale as good as looping a large image size slightly less often.

任何是否知道更多关于这将是更好的和浏览器是如何处理的情况也是这样吗？

Does any know more about which would be better and how browsers handle situations like this?

推荐答案

在不重复的背景图像，渲染所需的时间取决于最后只能缩放图像，而不是原来的。

When not repeating the background image, the time required to render depends on only the final scaled image, not the original one.

在一个文件中的图象为com pressed为PNG格式，而后通过浏览器被加载时，它是在RGBA位图格式（4字节为一个像素）。当重复的背景下，（让说在Intel X86），浏览器的原生code会使用 REP MOVSD 以位图数据从RAM显存移动（这是标准序列，可能是在显卡驱动程序或特定GPU）的各种实现不同。

The image in a file is compressed as PNG format, but after being loaded by browser, it is in RGBA bitmap format (4 bytes for a pixel). When repeating a background, (let say on Intel x86), the native code of browser would use REP MOVSD to move the bitmap data from RAM to video memory (this is standard sequence, might be different on various implementations of graphics driver or specific GPU).

假定HTML DIV的包含背景的尺寸将是100×100。

Assume that the dimensions of the HTML DIV which contains the background would be 100x100.

有关唯一-1像素的图像：浏览器程序已给exec 10000'REP MOVSD说明

For the only-1 pixel image: the browser programme has to exec 10 thousand 'REP MOVSD' instructions.

对于10×10的图像：与每个重复图像，浏览器程序有给exec'REP MOVSD只有10次（1次打电话来REP MOVSD可以使图像的1个像素行（像素行））。所以在这种情况下，执行REP MOVSD'指令的数量将是唯一10x100倍（10倍于1图像，100反复图像）。这完全需要的千'REP MOVSD

For the 10x10 image: with each repeated image, the browser programme has to exec 'REP MOVSD' only 10 times (1 time calling to 'REP MOVSD' can render 1 pixel line (pixel row) of the image). So in this case, the number of 'REP MOVSD' instructions executed would be only 10x100 times (10 times in 1 image, 100 repeated images). This takes totally 1 thousand 'REP MOVSD'.

因此，基于更大的图像最终的背景将呈现更快

更多注意事项：
的以上的解释，并不意味着性能是完全为10×10图像的10倍。 A'REP MOVSD（与CX = 9999为例）仅1单CPU指令，但仍需要9999x4字节通过数据总线被转移。如果使用9999简单的MOV的，很多数据的还是要直通数据总线，但是，CPU必须执行9998指令的详细。一个更聪明的浏览器会创建用于复制的图像背景的pre-渲染的位图;所以每次需要转移到视频存储器时，它只需要仅100'REP MOVSD'（100是像素行中的最后的背景的数目，上面所假定的），而不是10000或1万。的

这篇关于在浏览器中的图像性能为背景重复CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！