I’m writing this as I read along, so the verbosity of this post is due to me taking reference notes on interesting things as I go.
Chapter 1: Loading & Execution
Nick doesn’t waste any time getting into what the reader wants, fresh tips! Right away we begin to learn the specifics of how browsers react depending on where & how you include your JS. There are many ways that work, but few ways that work well.
- Why is it important to put your <script> includes just above the closing </body> tag?
- What is the browser doing while loading those external files?
- Why should you put all your in-page JS code above your CSS includes? (A: If you put it after a </link> tag referencing an external stylesheet, the browser will block execution while waiting for that stylesheet to download)
- How you can use the defer attribute in <script> tags to delay non-essential execution of code.
- A thorough look at dynamic script loading to import & execute your JS without blocking the browser.
- An overview of some of the common JS loaders used today (YUI3, LazyLoader, & LABjs).
While much of the content in this chapter contains common knowledge among experienced developers, it is important knowledge to cover as it serves as the foundation for the rest of the book. Don’t worry, we’ll get more advanced.
Chapter 2: Data Access
Major topics covered in this chapter:
- Why do global variables perform so slowly?
- Why creating data as local variables as opposed to object properties is 10%-50% faster (depending on the browser).
- Why is it a good idea to create local instances of global variables?
- Why with, try/catch, and eval are bad ideas from a performance perspective. (A: they augment the scope by inserting themselves first on the tree)
- What truly happens under the hood when a variable is found to be undefined?
- Closure scope and why they can cause memory leaks.
- How prototype’s work and performance issues related to traversing up the prototype chain.
- Why is it bad to use deeply nested object members (i.e. foo.bar.baz.bop())?
There were so many “Ah hah! I get it now!” moments in this chapter for me that it alone was worth the price of the book. It took me about 5x as long as it should have to get through this chapter because I was too busy playing with Firebug as I began to learn some of these concepts.
Chapter 3: DOM Scripting
This book contains a few guest author chapters, and this is one of them. In this chapter we learn about DOM scripting by another Yahoo, Stoyan Stefanov.
- Using the non-standard innerhtml is way faster than creating nodes via the native document.createElement() method.
- When looping through a NodeCollection you should cache the length of the node in a local variable because it’s own length property is very slow.
- Iterating through nextSibling() can be 100x faster than using childNodes()
This chapter also goes into a detailed explanation of what repaint & reflow are, when they occur, and how understanding them will improve your application performance. The realization I had after reading the R&R explanation is we do stupid stuff all the time simply because we don’t understand how the browser renders and updates our pages. You know how you’ve always heard using margin-left & margin-right as separate styles is a bad idea? Well, here you find out why. Oh, and did you know there was a cssText property you can use to batch your CSS modifications? I didn’t.
As JS libraries get more & more popular, knowledge of good DOM scripting is becoming increasingly rare. Take event delegation for example. Many developers just presume jQuery’s live() or YUI3’s delegate() methods are just magic. They’re far from it, and are actually easy to understand concepts. When interviewing candidates for front end jobs at Yahoo!, this is one of the primary concepts we expect candidates to understand. They may have never used it, but the good ones will figure it out as they are whiteboarding and we walk them through the challenges.
JS libraries are awesome, but it’s because they abstract out the cross-browser differences & fix a flawed language, not because they allow you to forget what it actually going on under the hood.
Chapter 4: Algorithms & Flow Control
Next up are conditionals, such as if-else and switch. We learn when it is appropriate to use each one, and when they can be ditched for a much faster method, like using arrays as lookup tables.
Finally we come to the topic of recursion. We skip the basics of “What is recursion” and jump straight into browser limitations with call stacks and advanced recursion topics such as memoization to cut out the fat in your stack.
Chapter 5: Strings and Regular Expressions
Another guest author chapter, this time by regex guru Steve Levithan
When most people start out with JS, their concatenation method is likely var str = “foo”; str = str + “bar”; //str = “foobar”, then they discover the += operator and it becomes var str = “foo”; str += “bar”; //str = “foobar”. It turns out that one of those is more efficient when it comes to memory usage, and it happens to not be the latter. This chapter provides some memory allocation table diagrams to explain the difference and how different browsers perform that operation. It should also be noted that another alternate method of concatenation, [‘foo’,’bar’].join(‘’); is the preferred method in IE 6 & 7, so that should be considered depending on your userbase.
The second half of this chapter covers regular expressions, which usually make me cringe. I have no problem writing them, but they’re an absolute nightmare to maintain sometimes. Douglas Crockford has a saying, “If a regular expression is longer than 2 inches, find another method.” I couldn’t agree more.
In this review, I only covered the first half of the book. Here are the remaining chapters:
- Chapter 6: Responsive Interfaces
- Chapter 7: Ajax
- Chapter 8: Programming Practices
- Chapter 10: Tools
If you like what you’ve seen so far, go buy it!