Pro JavaScript Performance Monitoring and Visualization

Transcription

1 Pro JavaScript Performance Monitoring and Visualization Tom Barker

2 Pro JavaScript Performance Copyright 2012 by Tom Barker This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law. ISBN ISBN (ebook) Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the name s, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. President and Publisher: Paul Manning Lead Editor: Ben Renow-Clarke Technical Reviewer: Anirudh Prabhu Editorial Board: Steve Anglin, Ewan Buckingham, Gary Cornell, Louise Corrigan, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Coordinating Editor: Katie Sullivan Copy Editor: James Compton Compositor: Bytheway Publishing Services Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY Phone SPRINGER, fax (201) , orders-ny@springer-sbm.com, or visit For information on translations, please rights@apress.com, or visit Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. ebook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales ebook Licensing web page at Any source code or other supplementary materials referenced by the author in this text is available to readers at For detailed information about how to locate your book s source code, go to ii

3 For my beautiful rabbit. Tom Barker iii

4 Contents at a Glance About the Author...ix About the Technical Reviewer...x Acknowledgments...xi Chapter 1: What is Performance...1 Chapter 2: Tools and Technology to Measure and Impact Performance...13 Chapter 3: WPTRunner Automated Performance Monitoring and Visualization Chapter 4: perflogger JavaScript Benchmarking and Logging...65 Chapter 5: Looking Forward, a Standard for Performance...83 Chapter 6: Web Performance Optimizations Chapter 7: Runtime Performance Chapter 8: Balancing Performance with Software Engineering Best Practices Index iv

5 Contents About the Author...ix About the Technical Reviewer...x Acknowledgments...xi Chapter 1: What is Performance...1 Web Performance...1 Parsing and Rendering...5 Rendering Engines...6 JavaScript Engines...6 Runtime Performance...8 Why does performance matter?...8 Instrumentation and Visualization...9 The Goal of This Book...10 Technologies Used and Further Reading...10 Summary...11 Chapter 2: Tools and Technology to Measure and Impact Performance...13 Firebug...13 How to Install...13 How to Use...15 YSlow...16 How to Install...16 How to Use...17 WebPagetest...19 Minification...23 v

6 CONTENTS Minify...23 YUI Compressor...24 Closure Compiler...24 Comparison of Results...26 Analysis and Visualization...27 Getting Started with R...28 Installing and Running R...29 An R Primer...30 Simple Charting with R...34 A Practical Example of R...38 Using apply()...41 Summary...42 Chapter 3: WPTRunner Automated Performance Monitoring and Visualization Architecture...43 Creating a Shared Configuration File...45 Accessing the WebPagetest API...46 Parsing the Test Results...49 Complete Example...52 Charting with R...53 Parsing the Data...54 Plotting Load Time...55 Plotting Payload and Number of HTTP Requests...57 Open Source...61 Summary...61 Interview with Patrick Meenan of WebPagetest...61 What was the original inspiration for creating WebPagetest?...61 Was it tough getting the project open sourced?...62 What were some of the challenges that you ran into while working on the project?...62 What is the goal of WebPagetest LLC?...62 How long are test results stored?...62 How long do tests take to run on average?...62 Do you recommend a different approach than polling for test complete when using the API?...63 What is the process for tests going through your queue?...63 What are some of the most interesting things you have heard that people are doing with WebPagetest?.63 Could you talk a little bit about the agent architecture?...63 vi

7 CONTENTS How do you use WebPagetest with the applications that you develop?...64 What features are in the near and longer term for WebPagetest? Personally I d love a memory profiler Chapter 4: perflogger JavaScript Benchmarking and Logging...65 Architecture...65 Let s Code!...68 Calculating Test Results...69 Setting Test Result Metadata...69 Displaying Test Results...69 Saving the Data...70 Crafting the Public API...71 Remote Logging...75 Saving the Test Results...76 An Example Page...79 Charting the Results...80 Open Source...82 Summary...82 Chapter 5: Looking Forward, a Standard for Performance...83 W3C Web Performance Working Group...83 The Performance Object...83 Performance Timing...84 Integrating the Performance Object with perflogger...88 Updating the Logging Functionality...93 Performance Navigation...94 Performance Memory...96 High-Resolution Time...98 Visualizing the New Data Summary Chapter 6: Web Performance Optimizations Optimizing Page Render Bottlenecks Script Loading async Compare Results Lazy Loading The Art of Lazy Loading vii

8 CONTENTS Lazy Loading Scripts Lazy Loading CSS Why Not to Lazy Load Images Summary Chapter 7: Runtime Performance Cache Variables and Properties across Scope Creating a New File Creating Tests Visualizing Our Results Property Reference Example Comparison of Core JavaScript versus Frameworks JQuery vs JavaScript: Looping JQuery vs JavaScript: DOM Access The True Cost of Eval DOM Access Queue Changes to DOM Elements Queue Adding New Node The Cost of Nested Loops Summary Chapter 8: Balancing Performance with Software Engineering Best Practices Balancing Performance with Readability, Modularity, and Good Design Scorched-Earth Performance Inlining Functions Closure Compiler Next Steps: From Practice to Practical Application Monitoring Web Performance Instrumenting Your Site Benchmark in Your Test Lab Share Your Findings Summary Index viii

9 About the Author Tom Barker has been a software engineer since the 90s, focusing on the full stack of web development. Currently he is the Senior Manager of Web Development at Comcast, an Adjunct Professor at Philadelphia University, a husband, a father, an amateur power lifter and an armchair philosopher. He is obsessed with elegant software solutions, continual improvement, refining processes, data analysis, and visualization. ix

10 About the Technical Reviewer Anirudh Prabhu is a software engineer at Xoriant Corporation with four years of experience in web design and development. He is responsible for JavaScript development and maintainance in his projects. His areas of expertise include HTML, CSS, JavaScript, and Jquery. When not working, Anirudh loves reading, listening to music, and photography. x

11 Acknowledgments I d like to thank my wife Lynn, my son Lukas, and my daughter Paloma for their patience and love. I d like to thank Ben Renow-Clarke for thinking of me for this project and supporting the direction that the book went in, not just talking about performance and best practices, but also emphasizing the quantification of results and showing readers how to quantify for themselves. I d like to thank Katie Sullivan and Chris Nelson for staying on me and pushing for the good of the project. Several times it was their persistence that kept us going, Katie pushing me to work on chapters in tandem and Chris keeping on me to stay focused and clear with each chapter. I d like to thank Anirudh Prabhu for thinking of cases with the code that I didn t think about. The example code is richer because of his perspective. And finally I d like to thank my team at Comcast for constantly raising the bar and inspiring me to try to be as excellent as you all are. Tom Barker xi