performance$factors$ and$tuning$tips$for javascript$ria ... · • when in javascript use json...
TRANSCRIPT
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Performance Factors and Tuning Tips for
JavaScript RIA Frameworks
Presented by Dustin Grau
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Introduction • Who am I?
• Presentation first given at BravePoint’s 2010 VI conference
• Inspired by a true client case
• A lot has changed in a year…
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Purpose • Follow-up to 2009 VI presentation (SmartClient/OpenEdge)
• Expose those considering a JS RIA FW to common issues
• Assist those already experiencing degraded performance
• Help WebSpeed developers learning JS-OO frameworks
• Offer tips, tricks, and tools for debugging JavaScript code
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Agenda • Establishing performance factors
• Looking at the numbers
• A real-world client example
• Useful debugging tools in action
• Examining the client’s solution
• Wrap up and Q&A
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Performance Factors • “You want to do what with that table?”
• Pitfalls of AJAX applications
– Page reloads are swapped for many smaller queries
– We tend to think smaller == faster, and neglect optimizations
• Waiting is Waiting
– Server may be bogged by multiple requests, even small ones
– An overloaded server can still drag down an AJAX application
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Coping Methods • Disguising Processing Time
– “Loading” messages during requests are an interruption
– Users should continue work while actions occur transparently
• Quantifying Acceptable Performance
– Varies by user, developer, organization
– <1 second is an often-used target
– 10ms is fast for an operation, but not if repeated 1,000 x’s
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Lies, Damn Lies, and Statistics • Dual-core Intel 2.8GHz, 8GB RAM, Apache 2.2.x
• Windows 7 VM, 1 CPU, 1GB RAM, April 2011 browsers
• Originally benchmarked browsers from mid-Jan 2010
• Ran tests using 500-10,000 records in increments of 500
• Records were a uniform size/format (10 columns = 238b)
• Ran tests 5x, high/low discarded, remaining averaged
• All data packaged as JSON (XML not considered, see next)
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Why Not XML? • When in JavaScript use JSON (JavaScript Object Notation)
• Significantly more time-consuming to parse than JSON
• Payload size is larger due to extra tags for formatting
• Even server-side is faster in OE10.2B
– Used Sports2000 DB for benchmarks (orderline table)
– All read/write operations used longchar
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Connection Terminology • Key terms according to Firebug Net panel
– Connecting - Elapsed time to create a TCP connection
– Waiting - Waiting for a response from the server
– Receiving - Elapsed time to read entire response
• Overhead - Elapsed time to compress response data
• Latency - Delta time between generated data vs. served file
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
HTTP Compression • Used mod_deflate for Apache web server
• Allows compression of data, in addition to physical files
• Measured server latency for zero/low/mid/high levels
• Focus is on overhead, measured as time to first byte
• Graph does not include actual download time for data
• Even at lowest setting, increased wait time is negligible
• Can reduce file and data packet size by 50% (YMMV)
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Adding Data Compression • Notable module options (for your .conf file)
– AddOutputFilterByType DEFLATE <mime type>
– DeflateCompressionLevel 1
• Mime type can be any valid text type
– application/json
– application/json-rpc
– text/plain
– text/html
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
JSON Processing • Time to convert a string result into a JavaScript object
• Measured processing time for a data packet using EVAL
• Compared to native JSON parser in capable browsers
• Native JSON replaces json2.js library (using EVAL method)
– var myParsedObject = JSON.parse(jsonString);
• Works best when JSON is properly formed
– Free of HTML and other embedded formatting/tags
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
January 2010
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
April 2011
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
January 2010
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
April 2011
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
January 2010
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
April 2011
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Table Generation • Time to display JSON object as a table
• Generated tables using 2 common processes:
– Document Object Model (DOM) manipulation
– String arrays and innerHTML manipulation
• Use of innerHTML is faster, but less powerful than DOM
• This is where most JS frameworks take the most time
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
January 2010
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
April 2011
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
January 2010
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
April 2011
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
January 2010
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
April 2011
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Case Study (Part 1) • Built an RIA using JQuery for order entry by salesmen
• Designed to be run on netbooks at trade shows (via wifi)
• Issue involved use of the Flexigrid component for grids
• Returning thousands of records caused major slowdowns
• Several workarounds were attempted to deal with the issue
• Demo: Look at part of the actual application (data grid)
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Proposed Solutions • Prompt for or apply additional filters for data requested
– Not possible—client already returned filtered results
• Page results within the UI, and request on demand
– Already tried—client desired all data on a single page
• Request small chunks of data from server as needed,
• or display data to the user only as they view it
– If it could be determined what rows were being viewed
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Before We Proceed • We should explore various debugging tools available
• Establish cause of performance issues in application
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Firebug • http://getfirebug.com
• Highly recommended for developers using Firefox
• Better than using alert() or hand-coded timers/debugs
• http://getfirebug.com/wiki/index.php/Console_API
– console.log(object[,object,…])
– console.time(name)
– console.timeEnd(name)
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Firebug Demo • Sample Application examined with Firebug tools
– Using Console API commands within your code
– Setting breakpoints within the plug-in
– Using automatic error breaking
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Firebug Derivatives • Firebug Lite
– http://getfirebug.com/lite.html
– Available for IE, Opera, Safari
– Limited, but still useful, version of original Firefox plugin
• Firebug Plugins (Firefox Only)
– FireQuery – JQuery debugger
– FireCookie – Cookie manager
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Built-‐in Dev Tools • Offer features similar to Firebug, native to each browser
• Internet Explorer
– Tools -> Developer Tools (F12)
• Safari
– Preferences -> Advanced -> Show Develop menu in toolbar
• Chrome
– View (Wrench Icon) -> Developer -> Developer Tools
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Google Chrome Extensions • Speed Tracer
– http://code.google.com/webtoolkit/speedtracer
• Offers timeline of page events, recommendations, and tips
• Demo: Using Speed Tracer to view application events
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Syntax Validators • Online
– jslint.com - JavaScript Code Validator
– jsonlint.com - JSON Structure Analyzer
• Offline
– jslint4java - https://code.google.com/p/jslint4java/
– Combine with Apache ant for automated parsing!
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Other Tools • WANem – http://wanem.sourceforge.net
– Linux LiveCD based on Knoppix
– Available as a Virtual Appliance (VMWare)
– Simulates network conditions (speed, packet loss, etc.)
• Eclipse IDE – http://www.eclipse.org
– Web Tools Platform (WTP) and Aptana Plugin
– Both offer JavaScript perspective with syntax checking
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Case Study (Part 2) • Discover if server-side logic was slow (already optimized)
• Check for use of content-type compression (not enabled)
• Compare data packets (XML) to alternate format (JSON)
• Profile JavaScript code for source of bottlenecks
– Table generation was largest portion of processing
– JQuery not using native JSON parsing when supported
– Data packets contained large amounts of HTML formatting
– Flexigrid repeatedly consulted the DOM, did not use variables
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Solutions Found • Cache all data returned from the server in a local variable
– Data returned from server was already the quickest action
• Monitor the user’s position within the scrollable grid area
– Required pre-calculation of the total table height in grid
• Calculate the view area and number of records to display
– Distance from top of DIV gave row position of scroll event
• Display the corresponding rows for the user’s view
– Rows were only drawn with contents for the viewable area
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Summary • Use compression for data streams (text, xml, json, etc.)
• Most HTTP optimizations still work for AJAX applications
– mod_expires and mod_headers can provide cache control
• Keep data clean—do any formatting in code AFTER parsing
• Examine third-party libraries for native JSON processing
• Keep your code/data clean by using JSLint and JSONLint
• Avoid downloading large datasets in the first place
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Summary (continued) • If you must download a large dataset, try the following:
– Attempt to transparently batch/page data from the server
– Download all data, but display only as needed to the user
• JavaScript development tools available for every browser
• Don’t assume:
– Small data requests will be quick, especially multiple requests
– Your user has a fast machine, connection, or current browser
Performance Tuning JavaScript RIA’s BravePoint, Inc.
PUG Challenge Americas 2011
6/5/11-‐6/8/11
Any Questions?
Thank you for attending!