TechHui

Hawaiʻi's Technology and New Media Community

It's said that 80-90% of end user response time is on the front-end so as a front-end developer, I think it's really important to learn and understand front-end optimization.  In addition to the obvious, such as reducing http requests and optimizing your Javascript (check YSlow for some pointers), here are a few tips I've picked up over the years.

Minimizing Browser Reflow
Browser reflow is a change in the render tree that causes the browser to recalculate the positions of DOM elements.  Reflows can be more expensive than most developers realize. Watching this video helped me visualize exactly what is involved.

So how can you minimize browser reflow?

Google suggests a few things to reduce reflow including decreasing DOM depth. In documents with a deep DOM tree, a change in size of a single element can affect all its descendants (children, children of children, etc.) as well as its parent. As you can imagine, this is a computationally expensive operation. Anchoring elements with position:absolute can reduce reflow by ensuring parent elements don’t have to be recalculated, but it can also lead to less flexible layouts.

Paul Irish on the Google Chrome team discusses reflow and how specific JS methods can trigger reflow in the browser such as offsetWidth() and offsetTop(). Watch his video for more info if you are interested.  In a nutshell, when you manipulate the DOM tree, trigger events like scrolling or cause size changes via dynamic swapping of element styles, you are initiating reflow.

Paul suggests that if you need to do a ton of DOM manipulation, you should set the DOM element to display:none, which causes one reflow, and then do all your manipulation so as to avoid multiple reflows (no reflows occur on hidden elements.) Unfortunately, this doesn’t work on IE, so the use of documentFragement is generally considered best practice. Alternatively, if you are using jQuery, you can .detach() your element before making changes and .append() it to its parent when complete.

Javascript Optimization Tips
Nicholas Zakas from Yahoo frequently writes and speaks on the subject of high performance Javascript. I recommend his book to anyone developing JS heavy applications.

Just some quick pointers that I picked up include:
- avoid with because it offsets the scope chain
- use local var because they are higher in the scope chain than global vars.
- Instead of

   $('#something').css({color:'red', border:'1px solid #FFFFFF'});
  just do
   $('#something').addClass('myclass');
  This is more maintainable anyways.
- Avoid for-in loops
- Decrease the amount of work in loops.
   //slower
   for ( var i=0; i < values.length; i++) {};
   //faster
   var len = values.length;
   for ( var i=0; i < len; i++) {};

I recommend Nicholas’ slides which contain more information on this subject.

jQuery Optimization Tips
I use jQuery frequently. It makes DOM manipulation super easy, but it also can be expensive if you don't optimize.  Here are just a few tips for jQuery optimization:
- optimize selectors
   //slower
   $('#yo p')
   //faster
   $('#yo').find('p')
 The second is faster because you aren't making jQuery go through the Sizzle engine (which incurs additional call overhead.)
- Another selector tip: be specific on the right and less specific on the left
   // unoptimized
   $('div.mydiv .myclass');
   // optimized
   $('.mydiv td.myclass');
- cache your jQuery objects if you use it more than once
- use .detach() while doing intensive DOM manipulations
- Use the new .on and .off since it makes event delegation easy
  //slower.  This adds an eventHandler to each tr object which is expensive
  $("#dataTable tbody tr").on("click", function(event){
      alert($(this).text());
  });
  //better.  Adds only one eventHandler to the tbody and bubbles up.
   $("#dataTable tbody").on("click", "tr", function(event){
      alert($(this).text());
   });

Her are some additional resources to help you learn about jQuery optimization tips:

http://www.learncomputer.com/optimizing-jquery/

http://24ways.org/2011/your-jquery-now-with-less-suck



Learn how the browser works
Finally, for a long time, the way that the browser works was a big mystery to me and much of it still is.  However, an investment in learning what goes on behind the hood provides you with a better understanding of how to create well structured pages and high performance scripts.

This html5rocks article is a really good read. I recommend it to anyone involved in web development. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Views: 1229

Tags: JavaScript, Optimization, Performance, browser, jQuery, reflow

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by Kevin Luttrell on March 6, 2012 at 9:42am

The web development paradigm is changing as the avalanche of new  HTML5 capabilities are adopted and integrated into modern browsers. Unfortunately, many developers are unable to keep pace with the rapid moving target and operating on what was current 3 or 4 years ago.  Great article and tips.

Comment by Daniel Leuck on February 23, 2012 at 9:20am

Great post Scott. People who are serious about web development should take the time to understand how browsers render HTML including which operations are heavy (e.g. reflow for large DOM component trees.) I see more and more clever HTML5 sites that have unnecessarily slow performance because they are doing operations on visible elements. Hopefully Paul Irish's advice will reach the masses!

Sponsors

web design, web development, localization

© 2014   Created by Daniel Leuck.

Badges  |  Report an Issue  |  Terms of Service