jquery: speed difference between .css vs append to head?

Question

We have some kludgy workarounds for an internal app and I was wondering which jQuery/css technique is considered faster / more efficient ...etc.

Technique A

Answer 1

Offsite css is the way to go. with offsite css the browser only needs to make one request which is usually pretty fast.

on the other hand whenever you modify css elements, the browser must reparse the entire dom tree which is probably more expensive.

The other important question is:

Is speed really as important here as you think it is? Maybe the difference is 45ms between these solutions, which is hardly anything you should care about. You should choose a technique which allows you to write code faster and maintain it better, thats where the real time savings will come in.

Answer 2

I would add non-semantic classes via jQ. Such as: 'float-right', 'margin-right'. This is a lot cleaner to maintain imo.

Answer 3

jQuery's .css is faster than appending to head with the sample you provided. I have created a test case which demonstrates this here: http://jsperf.com/jquery-css-vs-append-to-head

As far as offsite CSS, its not comparable, because offsite css speed is dependent on the users internet connection, along with your server speed ect. If you have a wicked server and broadband users, I say offsite is much better, otherwise for speed you can only reliably count on javascript.