How do I eliminate unnecessary reflows in the JQuery library?

Question

So, I just ran Google's Page Speed on my website and received the following notice:

Can someone please tell me what that means? And how to "eliminate" those unnecessary reflows?

I also tried to use http://code.jquery.com/jquery-1.6.2.min.js instead, but it tells me the same thing.

Plus, I want to use https over http, so I'd rather stick with Google's CDN.

I hope this isn't a case of premature optimization? Just curious.

Answer 1

A reflow happens any time the page changes. This means that the page re-renders. This can happen when you add something to the dom or change a property on an element. One of the best ways to eliminate reflows is to detach elements from the dom, make your changes, and then reattach.

Answer 2

Well you are trying to access Google CDN the wrong way. The correct way will be

<script type="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>

Note the lack of protocol. Per section 4.2 of RFC 3986, when the protocol is not specified, the protocol of the page will be used instead.

Read this: http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/