Performance$Factors$ and$Tuning$Tips$for JavaScript$RIA ... · • When in JavaScript use JSON (JavaScript Object Notation) • Significantly more time-consuming to parse than JSON

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



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…



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



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



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



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



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)



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



6/5/11-‐6/8/11



6/5/11-‐6/8/11



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



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)



6/5/11-‐6/8/11



6/5/11-‐6/8/11



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



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



6/5/11-‐6/8/11

January 2010



6/5/11-‐6/8/11

April 2011



6/5/11-‐6/8/11

January 2010



6/5/11-‐6/8/11

April 2011



6/5/11-‐6/8/11

January 2010



6/5/11-‐6/8/11

April 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



6/5/11-‐6/8/11

January 2010



6/5/11-‐6/8/11

April 2011



6/5/11-‐6/8/11

January 2010



6/5/11-‐6/8/11

April 2011



6/5/11-‐6/8/11

January 2010



6/5/11-‐6/8/11

April 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)



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



6/5/11-‐6/8/11

Before We Proceed •  We should explore various debugging tools available

•  Establish cause of performance issues in application



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)



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



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



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



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



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!



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



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



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



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



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



6/5/11-‐6/8/11

Any Questions?

Thank you for attending!

[email protected]

Documents

Performance$Factors$ and$Tuning$Tips$for JavaScript$RIA ... · • When in JavaScript use JSON (JavaScript Object Notation) • Significantly more time-consuming to parse than JSON