1

Regarding inline v. internal v. external CSS, I understand the cacheing issues, and the tradeoff between multiple downloads and single downloads of larger files. What I would like to know is how rendering speed varies, based on the three places you can put CSS.

In other words, what takes the least time to actually draw the page? I assume that external is the slowest, because even if it's cached, the browser still has to retrieve the rules, parse them, and apply them to the current elements. I also assume that internal (in the page but inside style tags) would be second slowest, because there's still the process of parsing the rules and determining which rules to apply to which elements. And I assume that inline (applied directly via style attribute) is the fastest, because the browser can skip the process of matching rules to elements.

Anybody ever looked at this in depth? I know that I've had some rendering problems on large pages with complex CSS that could only be solved by going inline. (Please, no lectures on the evils of large pages with complex CSS.)

Gullbyrd
  • 1,545
  • 1
  • 16
  • 14
  • possible duplicate of [External CSS vs inline style performance difference?](http://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference) – Diodeus - James MacFarlane Feb 15 '12 at 22:18

2 Answers2

1

either way, once the actual rule text is loaded, it's run through the same css parser - there aren't different parsers for external v.s. internal css. it's all just css. External might be a bit slower to get applied because it'll require an extra HTTP request to fetch that file, but once it's transferred to the host browser, it'll parse just as fast as if you'd physically embedded the same rules in an inline <style> block.

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • Sure, I agree, but that doesn't address true "inline" styles; i.e., a style attribute inside an element. Even though they're frowned upon, they have to be faster, don't they? Because the browser doesn't have to do any mapping. – Gullbyrd Feb 17 '12 at 04:42
  • 1
    If the inline style changes sizing/positioning on the element, it may trigger a reflow of the document. If the style had been loaded earlier, that could be avoided. – Marc B Feb 17 '12 at 04:46
1

I don't think you should care which mode is fastest. HTML, CSS and JS are not meant to be fast in any case.

I think you should worry about readability and maintainability, think about managing a webpage with styles directly applied inside HTML tags. You wouldn't be able to manage anything complex in that way.

What you are asking mainly depends on browser implementation (with respect to the css file that could be downloaded separately according to which solution we are talking about). In any case I don't think the difference is so much considerable just because they all need to be parsed by the same parser.

If a page is really too complex to be styled with a stylesheet and requires inline style then the problem should be solved not by having inline css but refactoring things at a different level.

In addition I would say that many performance issues could be caused by writing CSS just without any kind of structure, just adding things day by day without even considering having strict/clever selectors. Developing things while thinking about them (that is something that is usually left behind in web development, especially with front ends) usually is the best way.

Jack
  • 131,802
  • 30
  • 241
  • 343