WEB 2.0 Application Client performance issues top ten sources of "reprint"

Objective

The promotion of WEB 2.0 applications brings a whole new experience to the user, while also giving developers more attention to client performance issues. Recently, one of the founders of Dynatrace , a veteran Web Performance diagnostic expert and well-known tool , Andreas grabner According to their work experience, summed up the Web 2.0 application Client performance problems ten root causes,InfoQ Chinese Station to summarize these 10 issues, for the web developers to learn from and think.

1. IEin theCSSSelector (selector) runs slowly

Webdevelopers typically useJavaScriptframework (such asJQuery) provides theCSSSelector to implement the Find function, such asvar element = $ (". ShoppingCart"), butIE 6and the7the native implementation of this lookup method is not provided. So,JavaScriptthe framework had to traverse the entireDOMtree to achieve the purpose. This approach takes much more time than it consumes in other browsers and relies heavily onDOMthe size of the tree. IE 8theCSSLookup provides better support, soWebpersonnel should upgrade the correspondingJavaScriptFramework version to take advantage of these new features.

2.repeat for the same objectCSSFind

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.XHRtoo many calls

javascript and xmlhttprequest ajax The foundation of technology, many javascript web

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 ten items, the developer might want to load the details of each item separately. This means that you need to communicate with the server to get all the information, as well as pressure on the back-end system. In this case, he suggests, combine the 1 calls to reduce the communication pressure.

4.High-costDOMOperation

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.

5.JavaScriptToo many files

Andreas Grabner says it is not uncommon for a typical web site to have more than a single JavaScript file. 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 these files . The second is the additional network traffic due to the download of the file. The workaround: Reduce the number of JavaScript files!

6.DOMLarge 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, andWeb Developers often need to include JavaScript files published by third-party providers on the page . In general, the performance issues mentioned in these files are usually the same, and we need to eyes peeled, if there is a problem, to 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 browser's CPU when introducing visual effects , The negative impact of the rendering engine and the overall site performance.

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 a Web Performance Diagnostic Tool Dynatrace is one of the founders of the company and has been involved in performance optimization projects for many Enterprise Web applications, and he concludes that these issues are believed to be on the domestic Web Developers to bring some inspiration.

WEB 2.0 Application Client performance issues top ten sources of "reprint"