On 09/23/2013 06:11 PM, Brion Vibber wrote:
Per comments on the article, I wouldn't read much
into it -- the
benchmark is pretty flawed. It doesn't measure anything representative
of typical usage.
Yeah. They inexplicably *only* used a single size, a 17.8kB PNG (18227
bytes). If you're not sure why that's a problem, check the size of some
of the images MW embeds. Examples from a quick grep:
resources/jquery/images/jquery.arrowSteps.head-ltr.png - 303 bytes
resources/jquery.tipsy/images/tipsy.png - 133 bytes
resources/jquery.ui/themes/vector/images/ui-icons_ffffff_256x240.png -
3702 bytes
resources/mediawiki.action/images/green-checkmark.png - 681 bytes
Why does it matter? The main reason to avoid requests for every single
image is to minimize the time, latency, and bandwidth (bytes) used for
HTTP request and responses. The smaller the image, the bigger the
fraction (header size / image size) is, thus the more wasted header time.
What he said about a 814 byte fixed header is also simply wrong. Some
of our data URIs are less than 814 bytes *total*. E.g.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAAAAABtHw/QAAAAGElEQVQIW2P4wMTA9B8Fo5IIGl0EQQIxAEzaGCA3rKnhAAAAAElFTkSuQmCC
is a real example from jquery.ui.dialog.
We should keep this issue in mind (there is a penalty, particularly for
large images), but that article draws a skewed picture.
Matt