CSS Efficiency Questions [closed]

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 11 year开发者_开发知识库s ago.

Improve this question

For the sake of this question, let "efficiency" mean, more-or-less, page rendering speed. Albeit, we should also take into account performance issues, like smooth scrolling.

Let's say you're putting a striped background on a page. From an efficiency standpoint, is it better to tile an image 100px wide (showing ten stripes), or an image 20px wide (showing two stripes)? Of course... a large image takes more time to load, but I feel like I've encountered trouble when tiling very small images. Is there an optimal point?

I'm starting to think this depends on the browser (and maybe the operating system as well?), especially given part two of this question:

To achieve translucency, is it more efficient to tile a translucent .png file, or work with CSS opacity attributes (again, the question of large vs. small tile comes up)? From my experience, older versions of IE seem to behave better with a tiled, translucent .png than they do with CSS opacity attributes (though I've never done any scientific testing).

Rounded corners are another good example... in some browsers, the use of images instead of CSS attributes or JavaScript implementations seems to make the page much faster, with much smoother scrolling.

This is really a question broader than CSS, but it's just something I've been thinking about lately.

-Peter

---

Yes, this is all OS and browser centric.

For instance, in Safari, it's more efficient to use CSS transformations to animate elements than JS.

In general:

• you want to avoid tiling very small images. A 20px image will tile better than a 1px as the browser is doing a lot less work to repaint the entire screen. Likely not much of a difference between 20px and 100px, though.
• anything that can be done with CSS will likely be more efficient than loading another image. (such as rounded corners, drop shadows, etc.)
• a big caveat is IE's css filters. A lot of those are not efficient and you may be better off reverting to images.

---

Based on my testing, it seems the page renders faster using the smallest image possible, and let CSS do the tiling for itself. The speed at which this takes place is solely dependent on the browser.

As for translucent backgrounds, using CSS would be lighter on bandwidth, but CSS opacity still isn't fully supported, so I would take that into consideration when tackling something like that.

I'd be very curious to know what the results of other people's testing...