APM Best Practices: WEB 2.0 and Ajax four optimization strategies

This article is aimed at the 4.4 optimization opinions on the existing monitoring technology problems in the market, which is designed to help Web 2.0 developers to solve these problems effectively using APM solutions.

As the speed and efficiency of Web applications grow fast, websites have become the first way for businesses to interact with their customers-in some cases even the only way. The explosive development of online e-commerce sites is a concentrated manifestation of this situation.

According to a recent report by Forrester Research, the total sales of online retail in the U.S. will reach $370 billion trillion by 2017 – the equivalent of more than 10% per cent of the annual CAGR in the US online retailing industry over the next few years. In order to remain competitive, retailers operating physical stores have been forced to shift their focus to online sales channels, thus avoiding being a free display facility for Amazon.com and other ecommerce sites. Of course, the trend is far more than the retail sector.

Websites can bring products and services to customers at lower cost solutions, which are clearly more cost-effective than traditional mechanisms for providing on-site services in physical locations.

The trend of it consumerization also plays an important role in the development of network economy system. Consumers want to be able to access more services from any location, from any device. According to Flurry Analytics, the popularity of smart devices is more than 10 times times faster than the PC revolution of the 80 's, even though the internet craze of the 90 's and the social network coverage in recent years have only reached One-second and One-third of its speed, respectively.

In view of this, the online experience – and the demands on the site for speed and functional diversity – has become the key or even the core. A series of trending features have been shown in the design of Web applications, typically implemented by Web 2.0 technologies, such as JavaScript and Ajax, including:

reduce the number of page loads . Many e-commerce sites simplify the entire purchasing process by reducing the number of pages that users need to browse and checkout. For example, in the process of filling out a computer configuration sheet, consumers can completely change their options without reloading the entire page, thus quickly matching the assembly machine solution that meets the requirements.

asynchronous page loading mechanism . Usually, we use HTML pages, which can greatly improve the performance of Web pages. In particular, the system will first load the smaller size of the HTML code, and then asynchronously gradually loaded other more bulky elements. For example, the main page is loaded quickly, and all information and functionality is delivered asynchronously to the user. After that, the advertising and content area information (which usually needs to be displayed after the action) is progressively loaded and displayed asynchronously in front of us.

Pure Client processing . The rendering of each event in the page is now done without having to interact with the backend server at all. In this case, the corresponding content is delivered by the Web server as part of the page, but it is not displayed directly-unless the event is triggered in the operation. For example, when a user hovers over a drop-down menu, the corresponding option is displayed.

Content Distribution Network (CDN). Typically, HTTP requests from the browser are filled in by a CDN or other caching technology, which avoids the performance discount that comes with the backend Web server at all times. This approach is designed to provide better performance for static content such as images. For example, Akamai (Network access Accelerator service) caches all pages at the edge of Akamai.

call the third-party service provider's solution . Another common scenario is that a browser-generated call directly points to a third-party service provider and therefore does not touch the appropriate Web server at all. Examples of these include embedded social media plugins and Google Maps tools for providing location information.

single-page application . This is a newly emerging asynchronous interaction mechanism in which the entire suite of applications is housed within a single page, and its experience is very similar to desktop applications. The loading process of this page consists of a series of asynchronous calls, and is triggered entirely by the user's operation implementation. This type of solution is completely out of the traditional mechanism of sending single calls to the server based on what is needed, significantly improving performance and reducing network load. Gmail is an excellent representation of this kind of solution.

Despite its obvious advantages, Web 2.0 has brought many challenges to the APM landscape. Before the advent of Web 2.0, it was easy to track user activity by simply monitoring HTTP page requests and their associated responses. At that time, the Web server responds to the user's browser with the returned content as a full page. In view of this, the monitoring mechanism only needs to focus on the independent requests in the advanced pages, that is, the overall and single request performance can be monitored at the HTTP request level. Since all requests are sent back to the Web server, we can perform the monitoring task efficiently through the proxy mechanism in the Web server layer or by sampling packets transmitted over the cable. This is also a common approach that APM solutions have used in the early days.

In the Web 2.0 era, various browsers have the ability to execute embedded code within a single Web page, eliminating the need for code execution to call back-end application servers. JavaScript is currently the most popular language option in such applications, with its own advantages in terms of speed, efficiency, and reduced network load (by running on top of the end user's local hardware), and it is still popular even in all major programming languages. JavaScript has a wide range of applications, including handling page animation elements, playing audio and video, validating Web input data, and more.

The popularity of AJAX (ie, asynchronous JavaScript and XML) programming trends further expands the browser's ability to handle asynchronous requests, allowing it to update only specific parts of the page without reloading the entire page. For example, when the user processes the checkout page and the freight request, he or she can directly view the price change without re-loading the entire page after communicating with the expert.
Ajax and JavaScript are incredibly powerful, but they also pose challenges for managers who use traditional methods to monitor Web applications.

Here are some of the main blind spots related to the above methods, including: lack of code-level analysis, and the traditional approach to APM is focused on monitoring the execution of code by installing an agent mechanism within a data center server. But now such programmes can only echo part of the reality.

In modern Web applications, about 80% of code execution is done inside the browser. There is a similar situation with bytecode within the application server, in other words, the test tool must be turned to the browser to effectively monitor JavaScript execution and error status.

Incorrect page response time. Today, simply monitoring the network traffic itself is unable to accurately measure the actual response time of the page. In this way, only the HTTP requests and responses that are raised by each individual object (or click) are returned to the Web server (or origin), and the time check is taken. However, in the Web 2.0 era, many requests do not return to the origin at all, and are more routed to the CDN or are populated in other environments using caching techniques.

We also cannot use network sampling to manipulate calls to third-party web services, such as Google Maps tools. In order to conduct a full survey of ads, maps, shopping carts, network analysis, social media modules, CDN and DNS response times, it is possible to review the page loading time through a monitoring program inside the browser.

Insufficient background information

Under ideal conditions, network traffic monitoring is able to correlate back-end calls with the pages it emits. For traditional applications, the background information is enough to be used for troubleshooting, but it doesn't work well in the Ajax world. In an AJAX environment, a single page can make hundreds or thousands of calls. Even more challenging is that a large number of JavaScript events (such as mouse click menu options) do not create a call to the Web server at all, leaving such pure browser events out of view of the network sampling scheme and the Web server monitoring mechanism.

As the site's own reliance on dynamic content and third-party services continues to improve, the actual experience of the end-user is often only measured by the browser itself.

Four ways to get your APM strategy to the modern track

With the advent of a range of emerging technologies, WEB 2.0 presents a huge opportunity as well as challenges. While traditional methods have not been able to accomplish their tasks alone, the exciting new detection techniques complement and, in turn, combine with the original solutions to provide insight beyond the previous level. Let's introduce four kinds of APM strategy upgrade ideas that are enough to deal with the new challenges in the new era of Web 2.0.

1. Capturing functional issues and setting up background information
Performance is not the only focus that needs to be focused on when dealing with external-facing applications. The application's functional problems are much more frequent than performance issues, which is the primary reason why users abandon or even switch to other sites. Because Web applications often act as the only channel through which an enterprise interacts with its customers, it is often unlikely that the troubleshooter will communicate with the user personally to see what is wrong.

Imagine that an error occurred because of a flaw in the design of the application and its handling of the postal code information at the beginning of zero.

In this case, the use of a solution that captures browser events, such as mouse clicks and keyboard input data, clearly reproduces the user's session activity, helping us proactively identify and resolve these issues.

2. capturing JavaScript errors and troubleshooting them
Consider a scenario where a business would like to launch a new AJAX feature that would allow it to place a single operation on the web, but will continue to return JavaScript errors. All of this may not be reflected in the Web log, and all response times look very normal. As a result, the troubleshooter couldn't even feel the problem-until the customer's complaints were overwhelming. In this case, confusion is no longer a blessing, but a large outflow of potential revenue.

Our APM solution should be able to detect and warn JavaScript errors, urging technicians to proceed as quickly as possible.

3. focus on details from the page load time
In order to accurately incorporate factors such as advertising, maps, shopping carts, network analysis, social media modules, CDN and DNS response times, we must pay close attention to page load times within the browser. Fortunately, now the next generation of IE, Firefox and Chrome have already provided HTML 5 navigation timing. It is able to split the full page load duration into specific items such as DNS lookups, redirects, SSL handshakes, processing, and cache access duration. Be sure to select a set of APM solutions with such capabilities.

650) this.width=650; "title=" 1.png "style=" Float:none; "alt=" wkiol1qh_rotfmeqaaf27pgxl6s465.jpg "src=" http:/ S3.51cto.com/wyfs02/m01/48/6d/wkiol1qh_rotfmeqaaf27pgxl6s465.jpg "/>

4. isolate the problem to a specific page element
The information that the browser can now capture is also limited to full page loading, which means that timing information cannot be provided for individual pages, such as loading images or images, CSS stylesheets, and the time taken to back-end calls to Web servers or rest APIs. The Network sampling tool with web analytics capabilities can timing HTTP requests and responses to individual page objects, helping the troubleshooter to pin issues to specific page elements. When choosing a network monitoring solution, it is important to make sure that the product you are purchasing has this capability.

How APM implements monitoring for Web 2.0 applications

Good APM products are customer-centric and can work with APM to bring more accurate answers to it and business units beyond data. In addition, we can choose to combine it with database, virtualization or network performance monitoring mechanism, so as to further develop APM in the overall enterprise monitoring strategy of all-round strength.

650) this.width=650; "title=" 2.png "style=" Float:none; "alt=" wkiom1qh_q_xylxraakb6t28zhg236.jpg "src=" http:/ S3.51cto.com/wyfs02/m01/48/6b/wkiom1qh_q_xylxraakb6t28zhg236.jpg "/>

Combining many of the advantages of traditional and modern solutions, APM products should have the following outstanding features:

The ability to capture every click of each user and reproduce the actual activity of the Web user, thus truly replicating the user experience, enabling background information forensics and troubleshooting.
Map our applications to infrastructure affinity with a powerful application runtime schema auto-discovery mechanism.
Ensure accurate problem area identification, detailed response time decomposition, and complete transmission path visualization-from the application layer to the end user, the entire process is under control.
Keep all users and traceability information in a single, general-purpose framework that's "transactional"-to ensure that data and workflows work seamlessly together and provide a unique visual display.
Bridging the impact of virtualization and shared resource conflicts on Web applications ensures that data and relationships are harmonized across all transactional dimensions-from the browser to the database, from the code layer to the hypervisor.
Leverage a granular root-cause analysis mechanism to pull out code-tier bottlenecks inside Java and. NET application servers.
Tracks the call stack for each request and captures supporting evidence, including memory (heap) Statistics, method parameters, and SQL binding variables.
Provide out-of-the-box analysis and visualization solutions with rich monitoring data and high scalability analysis mechanisms.

Summarize

The Web 2.0 technology architecture, which is represented by JavaScript and Ajax, provides a significant processing speed for Web applications, while also bringing performance and execution efficiencies to the next level. It is hoped that APM products will help developers.

This article is from the "Listen to Cloud Platform" blog, make sure to keep this source http://tingyun.blog.51cto.com/9285830/1548706

APM Best Practices: WEB 2.0 and Ajax four optimization strategies