Surely performant isn’t a word

High Performance JavaScript by Nicholas C Zakas

My loan of this from the library was almost finished before I’d had time to finish it – I had the choice of reading it in one day or not reading it at all. Thankfully I chose to read it in a couple of sittings, and I’m really glad I did.

The book consists of ten chapters on different aspects of writing high performance JavaScript enabled web sites and covers a range of issues around this topic. I’d heard bits and pieces of the advice from various sources such as blogs in the past, but it was nice to find the information all in one place.

Chapter one offers advice for getting the page to render quickly, predominantly by moving the script elements to the end of the page near the closing of the body element. Other techniques are also covered: deferred scripts in IE, and delayed loading of script using XHR or other methods and then loading the new code using a <script> element which is added to the DOM.

Chapter two drills into the implementation of JavaScript, in particular scope chains for the activation records and prototype inheritance for the objects, and uses this to explain why some coding patterns are slower than others. The book is really good in measuring the performance improvements across a number of browsers and displaying the speed different using graphs to give the reader a clear feel for the impact of the suggestions.

Chapter three covers the implementation of the DOM, emphasising that the DOM and the JavaScript engine often live in different dlls with a fairly slow communication path between thees two parts. The chapter looks at the actions that cause repaints and reflows by the browser, and DOM queries that are blocked while this happens. This leads to a discussion of techniques for batching activities to avoid the engine having to wait for the DOM layout.

Chapters 4 and 5 look at slow language constructs including loop performance, if-then versus switch and lookup tables. There’s a discussion of stack overflow and the stack sizes in the various browsers, and some techniques to avoid it happening. Writing efficient regular expressions is covered in some detail.

Chapter 6 looks at how the single-threadedness of a browser affects the perceived performance. The UI rendering and the execution share a single thread in most browser implementations. If the JavaScript blocks for more than 100 milliseconds, then this is going to cause the user to feel that the page is unresponsive. The chapter looks at how we can use setTimeout to schedule a long activity as a set of tasks that can be executed part by part whilst allowing the browser to catch up with rendering between the tasks. The behaviours of the different browsers is covered – information that I’ve not seen before. The chapter also contains details of the originally HTML5 web workers proposal which allows long running activities to happen on their own thread with a mechanism to communicate results between the main thread and the worker thread.

Chapter 7 looks at Ajax and the different in performance when using the data formats XML, JSON, JSON-P, HTML compared to custom data transmission formats. Response caching using HTTP headers is also covered.

Chapter 8 covers practices to get good performance including lazy loading and using native methods for good performance.

Chapters 9 and 10 round off the book by talking about the tooling for building and deploying the sites, and for analysing the performance of both the JavaScript (using a profiler) and the page download (by looking at the order of resource download and the techniques for compressing and merging the code files).

The book is fairly short but covers the material with a good amount of detail, making it both a quick and an informative read.

Advertisements
This entry was posted in Books. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s