Stop Paying Your jQuery Tax
samsaffron.com
Stop Paying Your jQuery Tax
1–10 of 90 posts
Re: Stop Paying Your jQuery Tax
#2That is a great point!
An interesting question is, why not just put ALL scripts at the end of the tag, after the HTML of the page has loaded and the CSS probably did as well?
The only thing I can think of is if you have code ON the page which uses these scripts. But why not just put that code at the end of the page, too?
Re: Stop Paying Your jQuery Tax
#3So is the article saying you are basically putting an alias for jQuery's `$` in the header and so if you need to put `$(function() {});` or `$(document).ready(function(){})` elsewhere in your page you rely on that alias and then once jQuery has loaded, map the `$` to it?
Re: Stop Paying Your jQuery Tax
#4That is a great point! An interesting question is, why not just put ALL scripts at the end of the tag, after the HTML of the page has loaded and the CSS probably did as well? The only thing I can think of is if you have code ON the page which uses these scripts. But why not just put that code at the end of the page, too?
The main reason this happens is that most MVC platforms generate pages piecemeal, say for example you are generating a 'product' page:
It has a 'template' that contains your header,footer and scripts that everyone relies on.
Then the product piece may also need a script or 2 and finally it may need to add some dynamic love to the page like say: $(myMagicHelper(779,'magic');), in general people are used to just inlining these kind of mini-scripts close to the bit that generates the product html. It can be migrated to a system that defer generates it in the footer, but usually would involve a larger amount of change (at least on projects I worked on). I guess this trick saves you a bit of time migrating some inline scripts to the bottom.
Re: Stop Paying Your jQuery Tax
#5"Chrome seems to be able to do it under 10ms, IE9 and Opera at around 20ms and Firefox at 80ms (though I probably have a plugin that is causing that pain). IE7 at over 100ms.
On mobile the pain is extreme, for example: on my iPhone 4S this can take about 80ms."
I'd be very interested in seeing some more concrete benchmarks for this.
Re: Stop Paying Your jQuery Tax
#6So is the article saying you are basically putting an alias for jQuery's `$` in the header and so if you need to put `$(function() {});` or `$(document).ready(function(){})` elsewhere in your page you rely on that alias and then once jQuery has loaded, map the `$` to it?
That is one technique you can use to assist you in pushing your jQuery include to the bottom, the others are having a smart script registration piece that takes care of it for you or running code that rewrites the html like blaze.io does
Re: Stop Paying Your jQuery Tax
#7How does Pushing jQuery to the footer solve the "constant tax"?
Re: Stop Paying Your jQuery Tax
#8How does Pushing jQuery to the footer solve the "constant tax"?
you get to see your content on the page rendered before jQuery is parsed and compiled. There are other approaches like asyc or defer that are preferred but harder to implement and you could go for a leaner jQuery like say jQuip
Re: Stop Paying Your jQuery Tax
#9"Chrome seems to be able to do it under 10ms, IE9 and Opera at around 20ms and Firefox at 80ms (though I probably have a plugin that is causing that pain). IE7 at over 100ms. On mobile the pain is extreme, for example: on my iPhone 4S this can take about 80ms." I'd be very interested in seeing some more concrete benchmarks for this.
Here's an interesting chart I came across recently: https://docs.google.com/spreadsheet/ccc?key=0Aq_a4WNAMuCEdDd... (via http://blog.pamelafox.org/2011/11/porting-from-jquery-to-zep...)
Re: Stop Paying Your jQuery Tax
#10How does Pushing jQuery to the footer solve the "constant tax"?
you get to see your content on the page rendered before jQuery is parsed and compiled. There are other approaches like asyc or defer that are preferred but harder to implement and you could go for a leaner jQuery like say jQuip
What you just said is this article summed up I think. Getting to read the content before the jQuery is parsed is the key and solves the cache issues. The other part where you collect all the jQuery functionality and you push it to the array/.ready loader at once, forces you to be organized.