Hello.
The question is:
When browser performance is better :

  1. Elements of panels and buttons are drawn using CSS3 (gradients, curves, etc.);
  2. A drawing that weighs 3-5KB (if for a button, then one drawing for the button is pressed and the button is not pressed).

And how much does the performance differ? Those. The question, in principle, also sounds like this: Does the difference between the "1" method and the "2" method have a lot of weight?

PS
For those who will be interested, why I care about this issue: an application for mobile phones.

  • Interest Ask! I think it's best to make two pages and potestit. By the way, instead of the second method, it would be more correct to use the sprite method, i.e. ship one large image, instead of heaps of small ones. This will at least reduce the load on the server. Yes, and the browser is likely to be easier to work with one picture, positioning it, than to keep a bunch of resources in memory, IMHO. - invincible
  • one
    Yes. It is necessary to put another question, how to test the speed of the browser. - Anton Mukhin
  • Not strong in this matter, but, purely for myself, ask: are mobile browsers normally related to CSS3 at the moment? - DemoS
  • It depends on what, if you take browsers for Android, iOS and Windows Mobile, then normally, they are almost full-featured, many even have flash. And if the usual java, I do not think that it is necessary to focus on them at all. - invincible
  • Android 2+, iPhone (in my opinion, from the 3rd), Blackberry (I don’t know from which OS version). - Anton Mukhin

4 answers 4

Consider a high-end user interface. For example, for button elements you will specify your own rules for active, hover and focus + of course, the styles of the button itself. I read the question (that the picture is one), but I try to give the most general answer

Suppose we use images: there is a high probability that we want for each state to want to use their own image, and the image is a request to the server, while without dancing with a tambourine, when you first load the page, the button on each state will flash (until the answer comes from the server ), which is not very beautiful. And of course - +3 requests to the server (which is not so significant, but nonetheless). The advantages of this approach are that you always get exactly the kind of display that you draw (up to a pixel), when using css3, sometimes the display will be slightly different.

As for the description of buttons by means of css: as soon as the page is loaded, all the states of the button are complete, regardless of whether this is the first visit to the page or not, IMHO is quite important. Another plus is that you can reuse the rules you have written (and for these buttons the situation will be exactly the same). And, of course - there are no requests to the server.

As for performance, a little more productive (usually) will be css because compiling css is very, very fast in all mobile browsers without exception + there is no need to pull pictures from the server. Although, frankly, the increase will be insignificant.

Now about your situation - choose according to the situation depending on your needs.

If we are talking about the development of a mobile device, I personally would choose the option with css. Yes, and if you use css, we can write button state rules without problems, so we can improve the user interface and, significantly, do not lose in performance. I would also like to add an important point - the ability to very quickly change the current display of buttons , when it comes to pictures - you have to redraw the picture, which is IMHO - very, very uncomfortable and, personally, I am very annoying.

In general, it is precisely in terms of speed and performance that there will be no difference. (Or rather, it can be ignored because it is rather similar to pseudo-optimization or nano-optimization)

  • one
    Sprites - is it considered to be dancing with a tambourine? Strange, I always thought they were a quick and elegant solution to flashing buttons. = / - knes
  • Kakby yes - it is dancing with a tambourine =) I did not say that this is a bad decision, but nonetheless. For me personally, the main factor in choosing one or another solution is that images need to be redrawn, with css everything is much easier - Zowie
  • Wow! Thanks for the detailed answer! - Anton Mukhin

Given the speed characteristics of the mobile Internet, IMHO is the best option - css, in any case, the text will weigh less than the graphics, another plus - there is no unnecessary request to the server, another plus - there is no extra load (albeit a tiny one) on the server, well, minus - crossbrowser problem!

  • There everywhere, except for Windows Mobile, there is a webkit engine, so no cross-browser compatibility :) - Anton Mukhin
  • cross-browser compatibility?)) we're talking about mobiles =) - Gorets
  • Yes that you stuck, I do not secuy in mobile WEB =) I thought in a mobile phone as well as on AXES. - DemoS

I do not think that this difference will save you performance and speed. It seems to me that method one is good because the drawing takes place on the client side and therefore saves traffic, and the second way is good because the picture will not change with any browser and its CSS3 capabilities.

  • Thanks for the opinion. Let's see what the others say, or agree with you, putting a plus. - Anton Mukhin
  • one
    The picture is nice, of course, but I don’t envy you if the customer wants, for example, to change the site’s hue;) I think it’s better to spend some time on cross-browser CSS than to redraw the entire design. - invincible
  • @invincible, thanks, good advice. But the question is in performance. This is above all. Well, the speed of work, too. - Anton Mukhin
  • one
    it's hard for you to answer this, because if you have a processor (100% of performance) is idle, and you load it by 2% or 25%, you still won't notice these brakes, and even now such a time that the problem is "of such magnitude "irrelevant - Gorets

Here is exactly what you were looking for: Performance test

CSS3 turned out to be a bit faster. Although there was not used technology sprites, which significantly reduces the number and time of the request to the server.

  • Thank. I will study. - Anton Mukhin