• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Java script performance tips

on

  • 859 views

 

Statistics

Views

Total Views
859
Views on SlideShare
855
Embed Views
4

Actions

Likes
5
Downloads
42
Comments
1

2 Embeds 4

https://twitter.com 2
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Java script performance tips Java script performance tips Presentation Transcript

    • JavaScript Performance Tips SHAKTI SHRESTHA shakti.shrestha@gmail.com
    • 1. Define local variables When a variable is referenced, JavaScript hunts it down by looping through the different members of the scope chain (nesting of object). Simply, the deeper the engine has to dig into this scope chain, the longer the operation will take. Since local variables are first in this chain, they’re always faster than globals. So anytime you use a global variable more than once you should redefine it locally
    • 1. Define local variables Difference
    • 2. Use closures as less as possible Also can be called as inline function.  JavaScript treats a function as an object. It causes a huge performance hit.
    • 2. Use closures as less as possible What we do mostly What is good Code using closure Refer to a function Common event handler
    • 2. Use closures as less as possible http://jsperf.com/javascript-performance-02
    • 3. Object properties and array items are slower  When you reference an object property or array item multiple times You can get a performance boost by defining a variable. This applies to both reading and writing data. Similarly don't dig too deep into array. It cause a performance hit. If you constantly reference foo.bar you can get a performance boost by defining var bar = foo.bar;
    • 3. Object properties and array items are slower What we do mostly What is good Referring through deep nest Improved method
    • 3. Object properties and array items are slower http://jsperf.com/javascript-performance-03
    • 4. Avoid function based iteration  To allow function based looping, the iteration setups up a function for each item in the loop which causes a performance issue.  In javascript a function = an object.
    • 4. Avoid function based iteration Function based iteration Normal For loop Function based iteration. Classic For loop.
    • 4. Avoid function based iteration http://jsperf.com/javascript-performance-04
    • 5. Always Descend From an #id  The fastest selector in jQuery is the ID selector ($('#someId')).  This is because it maps directly to a native JavaScript method, getElementById().  Selecting multiple elements means: DOM traversal and looping something that is slow. To minimize the performance hit, always descend from the closest parent ID.
    • 5. Always Descend From an #id Not good Good NG OK
    • 5. Always Descend From an #id http://jsperf.com/javascript-performance-05
    • 5. Always Descend From an #id http://jsperf.com/javascript-performance-05-01
    • 6. Cache jQuery Objects  Set a reference of the jQuery object to a variable.  var $active_light = $('#traffic_light input.on');  As a standard set $ as prefix of jQuery object (can be quickly identified as jQuery object) var $active_light
    • 6. Cache jQuery Objects jQuery object NOT cached jQuery object cached Object Not Cached Object Cached
    • 6. Cache jQuery Objects http://jsperf.com/javascript-performance-06
    • 7. Harness the Power of Chaining  Less code  Better organized
    • 7. Harness the Power of Chaining jQuery object cached only jQuery object cached & chaining Using cached object Chaining
    • 8. Use Sub-queries  JavaScript allows us to run additional selector operations on a wrapped set.  This reduces performance overhead on subsequent selections  Reason we already grabbed and stored the parent object in a local variable (aka object caching).
    • 8. Use Sub-queries Using query selector Object caching & sub-queries jQuery & query selector Sub-queries JavaScript & query selector JavaScript & Sub-queries
    • 8. Use Sub-queries http://jsperf.com/javascript-performance-08
    • 9. Limit Direct DOM Manipulation DOM operations are resource-heavy because of reflow. Reflow is basically the process by which the browser re-renders the DOM elements on the screen. For instance, if you change the width of a div with JavaScript, the browser has to refresh the rendered page to account for this change. The basic idea here is to create exactly what you need in memory, and then update the DOM. This is not a jQuery best practice, but a must for efficient JavaScript.
    • 9. Limit Direct DOM Manipulation
    • 9. Limit Direct DOM Manipulation http://jsperf.com/javascript-performance-09
    • 9. Limit Direct DOM Manipulation Another good option is using documentFragment For detail on use of documentFragment please check below link http://ejohn.org/blog/dom-documentfragments/
    • 10. Leverage Event Delegation Also known as Bubbling  When an event is triggered on an element, for example, a mouse click on a button, the same event is also triggered on all of that element’s ancestors. This process is known as event bubbling
    • 10. Leverage Event Delegation
    • 10. Leverage Event Delegation What we generally do Event Delegation Query selector Event delegate
    • 10. Leverage Event Delegation http://jsperf.com/javascript-performance-10
    • References: http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from- nicholas-zakas http://www.artzstudio.com/2009/04/jquery-performance-rules/#descend- from-id  http://ejohn.org/blog/dom-documentfragments/  http://www.yuiblog.com/blog/2006/04/11/with-statement-considered- harmful/ http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_B est_Practices
    • Thank You