CODEWITHSUNDEEP
cssperformance
phuang07
phuang07

Reputation: 981

Which of these CSS rules renders faster?

I am wondering which one out of the CSS rules below renders faster:

#avriable_info table td {width: 250px; font-size: 13px;}

or 

#avriable_info table td {
    width: 250px; 
    font-size: 13px;
}

Upvotes: 1

Views: 156

Answers (3)

Dan Puzey
Dan Puzey

Reputation: 34198

Neither will make any noticeable difference. A couple of newlines in your CSS is gong to make no more than a few CPU instructions difference to the rendering.

Maybe if you had a million lines of CSS you might notice a millisecond's difference, but if you're optimising that much (especially on a webpage!) you have far more serious issues to worry about (and they're not code related! ;-)).

Upvotes: 5

Joshua
Joshua

Reputation: 8212

Neither one will be "faster" to render than the other because most parsers will normalize a file before parsing. e.g. Getting rid of white spaces and new lines and such.

Now, if you have a huge file that isn't being gzipped across the wire then the first one will download faster to the client than the second one which will allow the browser to start rendering it before the larger, slower one.

Upvotes: 7

Scharrels
Scharrels

Reputation: 3055

The difference is two line breaks. This difference is eliminated by the parsing of the file and is unnoticable compared to the parse time of the CSS.

Upvotes: 3

Related Questions