Reprinted-best practices for improving web application performance

Guidance:As a developer, the speed of loading or Refreshing Web pages is critical to their websites. Adjust performance problems in the browser than in Java applicationsProgramIs more difficult. There are much less methods for developers to debug Javascript in various browsers. For example, in Mozilla Firefox, you can use firebug to debug JavaScript, but still cannot adjust many performance problems, such as browser rendering time consumption. To solve these problems, it is necessary to develop browser plug-ins to monitor the time response and determine other corresponding solutions, such as partial rendering or delayed loading.

This article is excerpted from the series on IBM developerworks to Improve the Performance of Web applications.ArticleThis article uses best practices for Web application performance to help developers better understand the factors that affect the performance of web applications and learn how to diagnose performance problems in Web applications, locate the bottleneck in the client content and determine the solution.

I. Six Basic Ways to Improve Web Application Performance

1. Reduce the number of HTTP requests

Each HTTP request has an overhead, including querying DNS, creating a connection, and waiting for a response. Therefore, reducing unnecessary requests can reduce unnecessary overhead. To reduce the number of requests:

• Merge files.Merge scripts that are always used at the same time into the same file, without reducing the total size, but reducing the number of requests. You can also merge CSS files and images in the same way. Files can be merged automatically:
• In the build phase.Use the <Concat> flag to merge files by running ant.
• In the runtime stage.Enable the mod_concat module. If httpserver is Apache, Pack: tag is used as the JSP tag library to merge JavaScript and style sheet files. (Pack: tag is a JSP-taglib that can reduce, compress, and merge resources, such as JavaScript and CSS, and cache them in content or common files .)
• Use CSS Sprites.Combine the background image into an image and use the CSS background-image and background-position attributes to display the required image. You can also use Inline images to reduce the number of requests.

2. Post-Load components

Only the required components are displayed; the remaining components can be waited. It is best not to present too many components at a time.

In some cases, you can use Post loading. Because components outside the visible area of the browser can be loaded in the rear, the initial rendering will become invalid shortly after these components enter the visible area.

Some javascript can be loaded after the onload event, such as dragging an element after the initial rendering in JavaScript.

3. Pre-Load components

You can use the browser's free time to request components (such as images, styles, and scripts) that will be used in the future through the pre-loading component ). When a user accesses the next page, if most components are loaded in the cache, the page loading will be much faster.

There are two types of pre-loading:

Unconditional: When onload is triggered, additional components are obtained.

Conditional: based on the user's actions, the user's next direction is estimated and the corresponding pre-loading is performed.

4. Put the script at the bottom

Scripts may cause problems because they may impede parallel download. When the script is downloaded, the browser does not start other downloads, even if those are on different hosts. Place scripts, such as style sheets, at the bottom to ensure that they are downloaded after other downloads are completed.

You can also use a latency script, which is only supported by Internet Explorer. The defer attribute indicates that the script does not contain document. Write (). This tells the browser that they can continue rendering.

5. Use the cookieless domain component

When a browser sends a request for a static image and then sends a cookie, the server does not use those cookies. Because these cookies only cause unnecessary network traffic, make sure that no request is sent to the static component. Then, use the subdomain and host to save these static components.

6. Place JavaScript and CSS outside

In the real world, using external files usually makes the page run faster, because JavaScript and CSS files are cached by the browser. JavaScript and CSS in the HTML document will be downloaded every time the HTML document is requested. This reduces the number of HTTP requests, but increases the size of HTML documents. On the other hand, if Javascript and CSS are in the external files cached by the browser, the HTML document size will be reduced without increasing the number of requests.

2. Improve the Performance of RIA Widgets

Mainstream Ria Ajax frameworks, such as extjs, Yui, dojo, and others, all provide sophisticated widget libraries to enhance user experience. Compared with other frameworks, dojo is more powerful in enterprise development because:

• Object-Oriented Programming (OOP) Encoding
• Cross-platform
• Offline dojo API support for local data storage
• DataGrid, 2d, and 3D graphics (Chart components provide a simpler way to display reports in a browser)

Dojo is widely used in many websites. Here we will use the dojo example to analyze the performance of the RIA widget. You can use the dojo widget adjustment tool as needed, including page speed, rock star optimizer, and jiffy. Yslow and firebug are strongly recommended.

Yslow

Yslow analyzes Web page performance by checking all components on the page, including those created by JavaScript, based on a set of high-performance web page rules. Yslow is a Firefox plug-in integrated with firebug web development tools. It provides recommendations for improving page performance, summarizes component performance, displays page statistics, and provides tools for performance analysis.

The figure shows information on the yslow grade tab.

Yslow web pages are built on 22 testable rulesThese rules are arranged by importance and effect below. According to the following rules, the response time of web pages can be increased by 25% to 50%:

• Minimize the number of HTTP requests.
• Use content publishing network (CDN ).
• Add the expires or cache-control header.
• Use gzip to compress the content.
• Place the style sheet on the top.
• Put the script at the bottom.
• Avoid using CSS expressions.
• Place JavaScript and CSS externally.
• Reduce DNS search.
• Simplified JavaScript and CSS.
• Avoid using redirection.
• Delete duplicate scripts.
• Configure etags.
• Make Ajax cacheable.
• Use get for Ajax requests.
• Reduce the number of DOM elements.
• Eliminate Error 404.
• Reduce the cookie size.
• Use a cookie-free domain for the component.
• Avoid using filters.
• Do not measure the image size in HTML.
• Make favicon. ICO as small as possible and can be cached.

Yslow statistics in the figure compares the page size of users who access the blank cache with those who previously visited the page.

The components tab displays each component and related performance information. For example, if the component is compressed by gzip or the etag has content (if any), you can see it. The component size and expiration time are also displayed on the components tab ,.

Firebug

Firebug is integrated with Mozilla Firefox. A large number of development tools are available when you browse the website. Allows you to instantly edit, debug, and monitor CSS, HTML, and JavaScript on Web pages.

You can use the firebug net panel to monitor HTTP traffic generated by web pages. It shows you all the collected and calculated information. Each entry indicates a back-and-forth request/response to the page.

Firebug console panel, which provides two types of monitoringCodePerformance method.

Profile

Use profiler for a specific function. Javascript profiler is a firebug feature that can be used to measure the execution time of each JavaScript code. Use JavaScript profiler to improve code performance, or to see why a function runs too long. It is similar to console. Time (); but JavaScript profiler can provide more internal process details.

console. Time ()

for specific code segments, use console. Time (). The console displays the result of the command you entered into the command line. You can use the console. Time (timename) function to measure the execution time of a specific code or function. This feature is very useful for improving the performance of JavaScript code, as shown in the following example:

   
  


    
   
 var timename = 'measuringtime'; 

    
   
 console. Time (timename); // start of the timer 

    
   
 for (VAR I = 0; I <1000; I ++) {

    
   
 // do something 

    
   
 console. timeend (timename); // end of the timer 

   
  
 

measuringtime: xxms is displayed on the console.

conclusion

in this article, developers learned how to identify some problems or bottlenecks in Web applications. Developers should understand some tools, tips, and skills to adjust and improve user performance.

from: csdn