Green Felt News » How we hash our Javascript for better caching. One of the problems we use to see frequently on Green Felt happened when we’d update a Javascript API: We’d add some parameters to some library function and then update some other files so that they called the function with the new parameters. But when we’d push the changes to the site we’d end up with few users that somehow had the old version of one of the files stuck in their cache. Now their browser is causing old code to call new code or new code to call old code and the site doesn’t work for them. We’d then have to explain how to reset their cache (and of course every browser has different instructions) and hope that if they didn’t write back that everything went OK.
This fragility annoyed us and so we came up with a solution: It solves the original problem. When the user refreshes the page they will either get the page from their browser cache or they will get it from our site. It’s fast. Everything is cached so it only does the minification and hash calculations once per file. jQuery Anti-Patterns for Performance & Compression.
DOM DocumentFragments. I was playing around with DOM DocumentFragments recently, in JavaScript, seeing what I could make with them. Roughly speaking, a DocumentFragment is a lightweight container that can hold DOM nodes. It’s part of the DOM 1 specification and is supported in all modern browsers (it was added to Internet Explorer in version 6). In reading up on them I came across an interesting point, from the specification: Furthermore, various operations — such as inserting nodes as children of another Node — may take DocumentFragment objects as arguments; this results in all the child nodes of the DocumentFragment being moved to the child list of this node. This means that if you take a bunch of DOM nodes and append them to a fragment then you can simply append the fragment to the document, instead (and achieve the same result – as if you had appended each node individually). I instantly smelled a possible performance improvement here. I set up a simple demo to test the theory.
Normal Append. jQuery Concrete; ConcreteUI programming in jQuery. 17 Hours of JavaScript from the Masters - Nettuts+ Douglas Crockford. John Resig. Peter-Paul Koch. Nicolas C. Zakas. If you recognize these names, you probably know what they all have in common: they're amazingly talented JavaScript Developers. Today, you'll hear from all of them, in this roundup of JavaScript presentations.
Length: 1 hour, 3 minutesSpeaker: Douglas CrockfordSlides (powerpoint) Is JavaScript a hopeless mess, or a robust and flexible standard? Length: 1 hour, 51 minutesSpeaker: Douglas CrockfordSlides (zip) This is the first session in Crockford’s JavaScript Trilogy. Length: 1 hour, 18 minutesSpeaker : Douglas CrockfordSlides (zip) While this video isn’t focused on JavaScript, it’s the second part of Douglas Crockford’s JavaScript Trilogy.
Length: 1 hour, 7 minutesSpeaker: Douglas CrockfordSlides (zip) This is the final installment to Crockford’s trilogy. Length: 1 hour, 11 minutesSpeaker: John ResigSlides (slideshare) John Resig, the creator of jQuery, knows what he’s talking about. Length: 56 minutesSpeaker: Nicholas C. Ask HN: Javascript best practices? The best way to load external JavaScript. Posted at July 28, 2009 09:00 am by Nicholas C. Zakas Tags: Blocking, JavaScript, Performance Not too long ago, I wrote about loading JavaScript without blocking by creating a dynamic <script> tag. When <script> tags are in the flow of an HTML document, the browser must stop rendering and wait for the script file to download and execute before continuing (example).
Creating a new <script> tag via JavaScript avoids this issue because it’s out of the flow of the document, so the script file is downloaded and executed without waiting. The best technique Steve Souders has explored several different ways to load JavaScript without blocking both on his blog and in his books. Create two JavaScript files. That’s it! That’s a tiny amount of code to get your bootstrapped so it will load incredibly fast (especially when gzipped).
The actual code on your page ends up looking like this: Script placement Inlining the first script YUI 3 has you covered YUI 3 is designed around this very premise. Conclusion. Bluff: Beautiful graphs in JavaScript. 75 (Really) Useful JavaScript Techniques | Developer's Tool. Advertisement Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques. We have already1 collected2 various3 JavaScript4 techniques5 in the past – now it’s time for a new portion of JavaScript. Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. However, sometimes we need JavaScript solutions that are a little more involved or specific.
You may want to take a look at the following related articles: 75 Useful JavaScript Techniques Hyphenation in Web11This project collects working solutions for automatic hyphenation in (X)HTML pages. SocialHistory.js13SocialHistory.js enables you to detect which social bookmarking sites your visitors use.