Front-end Optimization Tips

It's said that80-90% of end user response time is on the front-endso 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 (checkYSlowfor some pointers), here are a few tips I've picked up over the years.

Minimizing Browser ReflowBrowser 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 videohelped me visualize exactly what is involved.

So how can you minimize browser reflow?

Googlesuggests 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 videofor 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 TipsNicholas Zakas from Yahoofrequently 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:- avoidwithbecause it offsets the scope chain- use local var because they are higher in the scope chain than global vars.- Instead of

jQuery Optimization TipsI 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 objectwhich 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:

Learn how the browser worksFinally, 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.

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

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.

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!