High performance JavaScript : [build faster web application interfaces

Having found Nicholas Zakas' blog to be an excellent resource on JavaScript insights, I was very much looking forward to this book. The fact that he'd also enlisted a whole cast of frontend rock stars to contribute chapters didn't do much to damper my excitement, so I was childishly happy when the book finally knocked on my door! The title of the book is of course a throwback to Steve Souders' epitomous High Performance Web Sites: Essential Knowledge for Front-End Engineers, released a few years back by the same publisher. In much the same way it covers all aspects of performance in its chosen realm. That book gained Souders much appraise for making the web developer community at large aware of the various performance issues connected to the frontend, and how & why optimizing time was better spent there than on the backend which had previously been the prime target for such efforts. Last year Souders piggybacked on that appraise by releasing a sequel titled Even Faster Web Sites: Performance Best Practices for Web Developers (EFWS), where he - along with a group of co-authors, including Zakas - delved even deeper into frontend performance. Souders' first book touched on JavaScript here and there, but in EFWS it plays a much more dominant role, being the focus of half of the chapters. Even though the context is still websites, the insights it offers can easily be applied to any realm in which JavaScript performance is a concern. This is why we used it as course literature for our university course on developing JavaScript RIA applications where it was much appreciated by the students, even though we weren't making websites as such. I myself love the book, and it is one of the most thumb-through tomes on my shelf. My being a part of EFWS fandom was also the reason behind my prime fear regarding HPJS - just how big would the overlap between the two turn out to be? After all, the ideas behind them seem almost identical (minus the website bits); have a team of JavaScript performance ninjas each write a piece on their individual expertise. Would it really be justified to have these two books in the same shelf? Is this town big enough for the two of them? Definitely yes. Although a Venn diagram would show quite a bit of overlap... \* HPJS chapter 1 (Loading and Execution) is largely made up of the same content as EFWS chapter 4 (Loading Scripts without blocking) \* EFWS chapter 7 (Writing Efficient JavaScript) contains the gist of HPJS chapters 4 (Algorithms and Flow Control), 6 (Responsive Interfaces) and 8 (Programming Practices) \* Most of HPJS chapter 9 (Building and Deploying High-Performance JavaScript Applications) can be found sprinkled across various EFWS chapters ...the books have enough diverse content, difference in tone of voice and primary focus, to make for two quite different reads. The question of unique content, I feel, is largely moot anyway, as it is very rare to find a book containing knowledge that cannot be found elsewhere. That's not a bad thing, it's just the way of the web. When buying a programming book, you're paying for the convenience of having lots of related material collected in one place. The research behind HPJS chapter 2 (Data Access), for instance, has been detailed on Zakas' blog, just as Stoyan has already blogged a lot of what ended up in chapter 3 (DOM Scripting). So downrating the book for being a "compilation", as one of the few not-so-positive other reviewers here does, is rather unfair and beside the point. HPJS should be judged, instead, by how well it weaves it all together, and of course by the quality of the individual chapters. In my book, it receives top scores in both of these categories. Some co-authored books while inevitably feel rather fragmented. There are moments in EFWS when the (very) different writing styles of contributing authors gets in the way of seeing the whole picture. Similar moments arose for me while reading the semi-recent jQuery CookBook, which - while excellent - at times feels very schizophrenic. Of course co-authors need to be given some artistic leeway as to how they express themselves, but when they seem to have different takes on the main ideas behind the book, it becomes a problem. This never happens in HPJS, which obviously has been the target of some very loving editing. Even though the different performance aspects have quite a different flavour, as does the writing of the contributing authors, you never lose the sense of context. The fact that the book stays true to its gospel - performance - is one of its biggest strengths. There must have been innumerable temptations to mention non-performance related things that could be made to sort under a chapter's domain, but not fit inside the book as a whole. I'm sure, for example, that Steven Levithan bit his tongue while writing the (brilliant!) chapter on regexes, forcing himself not to share parts of his vast regexp knowledge that doesn't relate directly to performance. Because he and his peers withstood that temptation, HPJS is a better book. Also worth mentioning is how succinct the book is. It is not very thick, but the information density is very high. While maybe not everyone's cup of tea, this is something I very much appreciate. Much like how Crockford's renowned JavaScript - The Good Parts delivers the message in few but well-chosen words without much air between them, HPJS is very clear and efficient in its teachings, with no filler content to increase page count. Another merit is the "general knowledge level" of the content. Mostly, the teachings in the book are applicable to whatever JavaScript coding you're doing, today and in five years from now. We recently sang the praise of Jonathan Stark's new book on iPhone web apps, making that same point - it gives you ideas, which won't be made obsolete when the involved API:s inevitably change a few steps down the path. So, to finally bottom-line this; both books have their place. EFWS and HPJS are partly speaking about the same things, but in different voices under different headlines to different people. Also, HPJS is a bloody brilliant book, and not owning it should be reason enough for ostracication from the frontend community. Oreilly - Javascript (2010) (ATTiCA) 1 Table of Contents 9 Preface 13 The Internet Evolves 13 Why Optimization Is Necessary 14 Next-Generation JavaScript Engines 15 Performance Is Still a Concern 15 How This Book Is Organized 16 JavaScript Loading 16 Coding Technique 16 Deployment 17 Testing 17 Who This Book Is For 17 Conventions Used in This Book 18 Using Code Examples 18 Safari® Books Online 19 How to Contact Us 19 Acknowledgments 20 Chapter 1. Loading and Execution 21 Script Positioning 22 Grouping Scripts 24 Nonblocking Scripts 25 Deferred Scripts 25 Dynamic Script Elements 26 XMLHttpRequest Script Injection 29 Recommended Nonblocking Pattern 30 The YUI 3 approach 32 The LazyLoad library 32 The LABjs library 33 Summary 34 Chapter 2. Data Access 35 Managing Scope 36 Scope Chains and Identifier Resolution 36 Identifier Resolution Performance 39 Scope Chain Augmentation 41 Dynamic Scopes 44 Closures, Scope, and Memory 44 Object Members 47 Prototypes 47 Prototype Chains 49 Nested Members 50 Caching Object Member Values 51 Summary 53 Chapter 3. DOM Scripting 55 DOM in the Browser World 55 Inherently Slow 56 DOM Access and Modification 56 innerHTML Versus DOM methods 57 Cloning Nodes 61 HTML Collections 62 Expensive collections 63 Local variables when accessing collection elements 65 Walking the DOM 66 Crawling the DOM 67 Element nodes 67 The Selectors API 68 Repaints and Reflows 70 When Does a Reflow Happen? 71 Queuing and Flushing Render Tree Changes 71 Minimizing Repaints and Reflows 72 Style changes 73 Batching DOM changes 74 Caching Layout Information 76 Take Elements Out of the Flow for Animations 76 IE and :hover 77 Event Delegation 77 Summary 79 Chapter 4. Algorithms and Flow Control 81 Loops 81 Types of Loops 81 Loop Performance 83 Decreasing the work per iteration 83 Decreasing the number of iterations 86 Function-Based Iteration 87 Conditionals 88 if-else Versus switch 88 Optimizing if-else 90 Lookup Tables 92 Recursion 93 Call Stack Limits 94 Recursion Patterns 95 Iteration 96 Memoization 97 Summary 99 Chapter 5. Strings and Regular Expressions 101 String Concatenation 101 Plus (+) and Plus-Equals (+=) Operators 102 Firefox and compile-time folding 104 Array Joining 104 String.prototype.concat 106 Regular Expression Optimization 107 How Regular Expressions Work 108 Understanding Backtracking 109 Alternation and backtracking 109 Repetition and backtracking 110 Runaway Backtracking 111 The solution: Be specific 112 Emulating atomic groups using lookahead and backreferences 113 Nested quantifiers and runaway backtracking 114 From bad to worse 115 A Note on Benchmarking 116 More Ways to Improve Regular Expression Efficiency 116 When Not to Use Regular Expressions 119 String Trimming 119 Trimming with Regular Expressions 119 Trimming Without Regular Expressions 122 A Hybrid Solution 123 Summary 124 Chapter 6. Responsive Interfaces 127 The Browser UI Thread 127 Browser Limits 129 How Long Is Too Long? 130 Yielding with Timers 131 Timer Basics 132 Timer Precision 134 Array Processing with Timers 134 Splitting Up Tasks 136 Timed Code 138 Timers and Performance 139 Web Workers 140 Worker Environment 140 Worker Communication 141 Loading External Files 142 Practical Uses 142 Summary 144 Chapter 7. Ajax 145 Data Transmission 145 Requesting Data 145 XMLHttpRequest 146 Dynamic script tag insertion 147 POST versus GET when using XHR 147 Multipart XHR 148 Sending Data 151 XMLHttpRequest 151 Beacons 153 Data Formats 154 XML 154 XPath 157 Response sizes and parse times 157 JSON 157 JSON-P 159 Should you use JSON? 160 HTML 161 Custom Formatting 162 Data Format Conclusions 164 Ajax Performance Guidelines 165 Cache Data 165 Setting HTTP headers 166 Storing data locally 166 Know the Limitations of Your Ajax Library 168 Summary 169 Chapter 8. Programming Practices 171 Avoid Double Evaluation 171 Use Object/Array Literals 173 Don’t Repeat Work 174 Lazy Loading 174 Conditional Advance Loading 176 Use the Fast Parts 176 Bitwise Operators 176 Native Methods 179 Summary 181 Chapter 9. Building and Deploying High-Performance JavaScript Applications 183 Apache Ant 183 Combining JavaScript Files 185 Preprocessing JavaScript Files 186 JavaScript Minification 188 Buildtime Versus Runtime Build Processes 190 JavaScript Compression 190 Caching JavaScript Files 191 Working Around Caching Issues 192 Using a Content Delivery Network 193 Deploying JavaScript Resources 193 Agile JavaScript Build Process 194 Summary 195 Chapter 10. Tools 197 JavaScript Profiling 198 YUI Profiler 199 Anonymous Functions 202 Firebug 203 Console Panel Profiler 203 Console API 204 Net Panel 205 Internet Explorer Developer Tools 206 Safari Web Inspector 208 Profiles Panel 209 Resources Panel 211 Chrome Developer Tools 212 Script Blocking 213 Page Speed 214 Fiddler 216 YSlow 218 dynaTrace Ajax Edition 219 Summary 222 Index 223 If you're like most developers, you rely heavily on JavaScript to build interactive and quick-responding web applications. The problem is that all of those lines of JavaScript code can slow down your apps. This book reveals techniques and strategies to help you eliminate performance bottlenecks during development. You'll learn how to improve execution time, downloading, interaction with the DOM, page life cycle, and more. Yahoo! frontend engineer Nicholas C. Zakas and five other JavaScript experts -- Ross Harmes, Julien Lecomte, Steven Levithan, Stoyan Stefanov, and Matt Sweeney -- demonstrate optimal ways to load code onto a page, and offer programming tips to help your JavaScript run as efficiently and quickly as possible. You'll learn the best practices to build and deploy your files to a production environment, and tools that can help you find problems once your site goes live. Identify problem code and use faster alternatives to accomplish the same task Improve scripts by learning how JavaScript stores and accesses data Implement JavaScript code so that it doesn't slow down interaction with the DOM Use optimization techniques to improve runtime performance Learn ways to ensure the UI is responsive at all times Achieve faster client-server communication Use a build system to minify files, and HTTP compression to deliver them to the browser If you're like most developers, you rely heavily on JavaScript to build interactive and quick-responding web applications. The problem is that all of those lines of JavaScript code can slow down your apps. This book reveals techniques and strategies to help you eliminate performance bottlenecks during development. You'll learn how to improve execution time, downloading, interaction with the DOM, page life cycle, and more.Yahoo! frontend engineer Nicholas C. Zakas and five other JavaScript experts—Ross Harmes, Julien Lecomte, Steven Levithan, Stoyan Stefanov, and Matt Sweeney—demonstrate optimal ways to load code onto a page, and offer programming tips to help your JavaScript run as efficiently and quickly as possible. You'll learn the best practices to build and deploy your files to a production environment, and tools that can help you find problems once your site goes live.Identify problem code and use faster alternatives to accomplish the same taskImprove scripts by learning how JavaScript stores and accesses dataImplement JavaScript code so that it doesn't slow down interaction with the DOMUse optimization techniques to improve runtime performanceLearn ways to ensure the UI is responsive at all timesAchieve faster client-server communicationUse a build system to minify files, and HTTP compression to deliver them to the browser