Top ten root causes of WEB 2.0 application client performance issues

Original http://www.infoq.com/cn/news/2010/08/web-performance-root/

The promotion of Web 2.0 apps brings a whole new experience to users, while also giving developers more attention to client performance issues. Recently, a senior Web performance diagnostic expert, one of the founders of well-known tools Dynatrace Andreas Grabner based on his work experience, summed up the Web 2.0 application client performance issues Ten root causes, Infoq Chinese station to summarize these 10 issues, For Web developers to learn and think.

1. The CSS selector (selector) in IE is running slowly

Web developers typically use CSS selectors provided by JavaScript frameworks such as jquery to implement lookup functions, such as var element = $ (". ShoppingCart"), but IE 6 and 7 do not provide a native implementation of this lookup method. So, the JavaScript framework has to go through the entire DOM tree to achieve its purpose. This approach takes much more time than it consumes in other browsers and relies heavily on the size of the DOM tree. IE 8 provides better support for CSS lookups, so it is best for web workers to upgrade the appropriate JavaScript framework version to take advantage of these new features.

2. Duplicate CSS lookups for the same object

As the 1th says, a single CSS lookup is expensive, in which case the performance problem can be imagined if you want to repeat the same object multiple times. is a typical Web page in which the CSS lookup function calls statistical results:

(from the Dynatrace blog, the middle column looks up the total execution time of the function, in milliseconds, the last column of function calls)

For this kind of problem, Andreas Grabner recommends that the results of the first lookup be saved to a variable that can be reused at a later time, without having to repeat the lookup.

3.XHR too many calls

JavaScript and XMLHttpRequest are the foundation of Ajax technology, and many JavaScript frameworks provide a very convenient way to use it, and web developers take advantage of their asynchronous communication advantages to achieve such effects as page loading, avoiding the entire page.

Andreas Grabner, according to his own experience, found that this approach was abused--too much information was accessed dynamically through excessive calls. For example, in a page that displays 10 items, the developer might want to load the details of each item separately. This means that you need to communicate with the server 10 times to get all the information, but also to the back-end system pressure. In this case, he suggests, combine 10 calls into 1 times to reduce communication pressure.

4. Costly DOM operations

Manipulating the DOM is a necessary technique for Web page interactivity. With the addition of DOM elements, there are many implementations, each of which has different performance effects due to the size of the browser type and number of elements. We suggest that we carefully analyze and compare different methods and adopt the techniques suitable for their own situations.

Too many 5.JavaScript files

For a typical web site, it's not uncommon for more than 40 separate JavaScript files to exist, says Andreas Grabner. He points out that there are two problems with JavaScript files: One is that the browser needs to switch contexts through the JavaScript engine when loading the files, and the second is to download the files for additional network traffic. The workaround: Reduce the number of JavaScript files!

6.DOM Large Scale

Dom size has a significant impact on page performance, as shown in:

• Memory occupied by
• The cost of changing the style from the root node to the child node
• The performance problem of CSS lookup in IE
• Performance issues with DOM traversal operations

So, be wary of your DOM tree!

7. Too many event handler bindings

Binding event handlers are one of the daily tasks for Web developers. Andreas Grabner reminds you of its impact on performance:

• The binding operation itself consumes time (such as finding objects, registering an event manager, and so on).
• When an event is triggered, the event manager needs to find the element that registered the event and invoke the correct event handler.
• When you switch pages, remember to unbind the events to avoid DOM-related memory leaks.

8. Slow execution of external services

Many Web pages embed external content (such as ad banners, etc.) or invoke external services, and web developers often need to include JavaScript files published by third-party providers in their pages, often with the previously mentioned performance issues, which we need to eyes peeled, If there is a problem, give feedback to the third-party vendor to modify the optimization.

9. Misuse of visual effects

Many JavaScript frameworks provide brilliant visual effects, such as dynamic pop-up forms, some of which work well in the sample code, but are unsatisfactory in actual pages, especially when the DOM is large. Andreas Grabner recommends that Web developers focus on the negative impact they have on the browser's CPU, rendering engine, and overall site performance as they introduce visual effects.

10. Log and monitor granular granularity

There are a lot of good logs and monitoring tools, but if you set the granularity too thin (such as recording the details of each mouse movement), the information collection process can be an additional burden on the JavaScript engine and the network.

Web 2.0 application Client performance issues ten root causes to introduce to you, the original author Andreas Grabner is not only one of the founders of the Web Performance Diagnostic Tool Dynatrace, but also participates in many enterprise-level Web application performance optimization projects, He concludes that these questions will bring some inspiration to the domestic web developers.

Top ten root causes of WEB 2.0 application client performance issues