• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Performance optimization - Advanced techniques

Performance optimization - Advanced techniques






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • The goal of a page must be to download all resources as fast as possible in order to improve the Time to First Impression and Time to onLoad. <br /> Long running JavaScript executed when the file is loaded cause the browser to suspend download of remaining network resources and therefore slows down the overall page load time. <br /> Script blocks that execute longer than 20ms are considered to have potential for improvement. <br />
  • First Impression - great if &lt; 1s, acceptable if &lt; 2.5s and slow if > 2.5sThis is the time from when the URL is entered into the browser until the user has the first visual indication of the page that gets loaded. <br /> onLoad Event - great if &lt; 2s, acceptable if &lt; 4s and slow if > 4sThis is the time until the browser triggers the onLoad event which happens when the initial document and all referenced objects are fully downloaded. <br /> Fully Loaded - great if &lt; 2s, acceptable if &lt; 5s and slow if > 5sThis is the time until all onLoad JavaScript handlers have finished their execution and all dynamically or delay loaded content triggered by those handlers has been retrieved. <br />
  • As the getElementsByClassName method is missing in IE 6 and 7, frameworks like jQuery simulate this functionality by iterating through the whole DOM and checking every single DOM element whether it matches the class name of not. Depending on the size of the DOM this can become a very lengthy operation. <br />
  • A mistake that is often made is that too much information is fetched dynamically with too many calls. Browser only has a limited number of physical network connections it opens to each domain (2 parallel connections recommended by HTTP 1.1). When you make a lot of AJAX calls in IE 6&7, the browser keeps all the requests in a queue and executes two at a time. So, if you click on something to try to navigate to another page, the browser has to wait for running calls to complete before it can take another one. <br /> JSON: lightweight, trivial to parse to a JavaScript data structure <br /> HTML: easy to inject to the page <br />
  • DOM manipulation is a common performance bottleneck in rich web applications. Changing the class name on the body tag causes the browser to re-evaluate all elements on the page to find out if the reflow or repaint process should re-run. <br /> A DOM tree – representation of the page structure <br /> A render tree – representation of how the DOM nodes will be displayed <br /> Repaint –When a DOM change affects the style of an element <br /> Reflow – When a DOM change affects the geometry of an element <br />
  • Traditional event handlers are inefficient. They can potentially cause of memory leaks and performance degradation - the more you have, the greater the risk. Event delegation improves the overall performance of large-scale web applications. <br />
  • If you notice your page stalling while loading, all those $(document).ready functions could be the reason why. You can reduce CPU utilization during the page load by binding your jQuery functions to the $(window).load event, which occurs after all objects called by the HTML (including content) have downloaded. Functionality such as drag and drop, binding visual effects and animations, pre-fetching hidden images, etc., are all good candidates for this technique. <br />

Performance optimization - Advanced techniques Performance optimization - Advanced techniques Presentation Transcript