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

▶
performance factors and tuning tips for javascript ria
SMART_READER_LITE
LIVE PREVIEW

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

Aug 21, 2023 252 likes •702 views

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

slide-1
SLIDE 1

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 ¡

slide-2
SLIDE 2

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…
slide-3
SLIDE 3

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
slide-4
SLIDE 4

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
slide-5
SLIDE 5

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

slide-6
SLIDE 6

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

slide-7
SLIDE 7

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)
slide-8
SLIDE 8

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

slide-9
SLIDE 9

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

slide-10
SLIDE 10

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

slide-11
SLIDE 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
slide-12
SLIDE 12

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)
slide-13
SLIDE 13

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

slide-14
SLIDE 14

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

slide-15
SLIDE 15

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

slide-16
SLIDE 16

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

slide-17
SLIDE 17

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

January 2010

slide-18
SLIDE 18

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

April 2011

slide-19
SLIDE 19

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

January 2010

slide-20
SLIDE 20

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

April 2011

slide-21
SLIDE 21

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

January 2010

slide-22
SLIDE 22

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

April 2011

slide-23
SLIDE 23

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
slide-24
SLIDE 24

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

January 2010

slide-25
SLIDE 25

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

April 2011

slide-26
SLIDE 26

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

January 2010

slide-27
SLIDE 27

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

April 2011

slide-28
SLIDE 28

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

January 2010

slide-29
SLIDE 29

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

April 2011

slide-30
SLIDE 30

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)
slide-31
SLIDE 31

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

slide-32
SLIDE 32

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
slide-33
SLIDE 33

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)

slide-34
SLIDE 34

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

slide-35
SLIDE 35

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

slide-36
SLIDE 36

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

slide-37
SLIDE 37

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
slide-38
SLIDE 38

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!

slide-39
SLIDE 39

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

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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

slide-42
SLIDE 42

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
slide-43
SLIDE 43

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

slide-44
SLIDE 44

Performance ¡Tuning ¡JavaScript ¡RIA’s ¡ BravePoint, ¡Inc. ¡

PUG ¡Challenge ¡Americas ¡2011 ¡

6/5/11-­‑6/8/11 ¡

Any ¡Questions? ¡

Thank ¡you ¡for ¡attending! ¡ dgrau@bravepoint.com ¡