Life's Too Short - Write Fast Code (part 2)
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about loading JavaScript asynchronously, avoiding blocking inline scripts, and speeding up page rendering.
Recommended by 1 people across 1 different months, 2010 to 2012.
What it is
A Google Tech Talk by Steve Souders, creator of YSlow, covering three web performance best practices from his book Even Faster Web Sites: coupling asynchronous scripts, using iframes sparingly, and flushing the document early. It is the second of two talks, following one on splitting the initial payload and loading scripts without blocking.
What people said
Recommends Luka · 2012-06 · Stack Overflow · on “JavaScript - head, body or jQuery?”
It is possible to download javascripts in parallel by doing something like this: (function () { var ele = document.createElement('script'); ele.src = " [LINK] "; ele.id = "JQuery"; ele.onload = function () { //code to be executed when the document has been loaded }; document.getElementsByTagName('head')[0].appendChild(ele); })(); In the example it downloads minified JQuery v1.7.2 from Google, this is a good way to download JQuery since downloading it from Google is like using a CDN and if the user has been on a page that used the same file it might be cached and therefor doesn't need to be downloaded There is a really good Google tech talk about this here [this video]
Cites John Kalberer · 2010-06 · Stack Overflow · on “Asp.Net MVC Combine and remove inline scripts during response”
I know that I would have to traverse the page at every request but I am wondering if the benefit of removing all the inline scripts and thus removing a lot of blocking in the page would outweigh that performance hit. Steve Souders said as much in a few of his talks [this video] He talks of minimizing inline scripts but I want to eliminate them. I have implemented a solution similar to SquishIt which uses the Closure Compiler [LINK]
Cites Ken · 2010-11 · Stack Overflow · on “Load javascript async, then check DOM loaded before executing callback”
Problem: Load js files asynchronously, then check to see if the dom is loaded before the callback from loading the files is executed. edit: We do not use jQuery; we use Prototype. edit: added more comments to the code example. I am trying to load all of my js files asynchronously so as to keep them from blocking the rest of the page. But when the scripts load and the callback is called, I need to know if the DOM has been loaded or not, so I know how to structure the callback. See below: //load asynchronously (function(){ var e = document.createElement('script'); e.type = "text/javascript"; e.async = true; e.src = srcstr; // a little magic to make the callback happen if(navigator.userAgent.in