Performance Factors and Tuning Tips for JavaScript RIA - PowerPoint PPT Presentation

PUG ¡Challenge ¡Americas ¡2011 ¡ Performance ¡Factors ¡ and ¡Tuning ¡Tips ¡for ¡ JavaScript ¡RIA ¡Frameworks ¡ Presented ¡by ¡Dustin ¡Grau ¡ 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ 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 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ 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 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ January 2010 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ April 2011 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ January 2010 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ April 2011 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ January 2010 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ April 2011 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ January 2010 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ April 2011 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ January 2010 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ April 2011 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ January 2010 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ April 2011 6/5/11-­‑6/8/11 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡ 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 ¡ Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡