Application performance optimization of e-commerce based on WebSphere Commerce (2) Suggestions for shop page design

Shop Page Design Suggestions

As the amount of information and network scale exploded on the Internet, the performance of the website became the key to the user's experience and the success of the market. Unlike ordinary software products, the performance improvement and quality assurance of WEB products is not only dependent on testing and modification at the late development and implementation stages, but on performance considerations in the Web design and development phases.

Yahoo Company for the performance optimization of the site put forward a series of recommendations, as the current Web developers generally follow the rules. These rules all look simple and easy to implement, however, in the actual web design, especially in the design to meet the needs of the Chinese market, we need to be flexible to adopt and apply according to the actual situation.

Based on the specific implementation of the Chinese sample store in IBM WebSphere Commerce product (China store Mayujoy), this article presents a performance-related design from the background and foreground of the Web page design from two perspectives to the development and testing of the actual examples in the process. The key considerations include the back-end asynchronous, the front-end delay loading (Lazy load) and CSS Sprite, the content compression in the Operation dimension, dynamic caching and so on. At the end of the article, the paper also introduces the automation tools for the design of the auxiliary page performance.

Key factors affecting the performance of shop pages

Page rendering is the entire process in which the browser parses, loads, and displays the HTML code in the browser window, based on the rules defined by the CSS. Therefore, in order to identify where the page design can be improved, it is necessary to take a brief look at the browser rendering model and its process of loading an HTML page (for example, in the FireFox browser):

The user enters the URL, the browser sends the request to the server, the server returns the content of the requested document;

The browser starts loading HTML code, parsing and building the document tree (DOM model)

Browsers parse the style information in external CSS files and style tags, and these style information and the visibility directives in HTML are used to build another tree-the render tree (rendering). The rendering tree consists of a number of rectangular elements that contain visual attributes such as color and size, and the tree is built to draw the contents of the document in the correct order.

After the rendering tree is built, the layout process (layout or reflow) will be executed, which will determine the exact coordinates of each node on the screen. The next step is to draw, that is, to traverse the render tree and draw each node using the UI back-end layer.

The drawing process is step-by-step, and for a better user experience, the rendering engine will render the content to the screen as early as possible, and will not wait until all the HTML has been parsed to complete and then build and lay out the render tree. It shows a portion of the content as it is parsed and may also download the rest over the network.

Rendering engine re-executing the layout process (reflow) is unavoidable, as long as the page parsing process caused by some elements of the page space, positioning mode, margin and other attributes of the behavior, will cause it inside, around or even the entire page of the rendering. Some common situations such as: the mouse on the page to cause changes in the dynamic effect of the page, or manually update the external CSS file.

In all of these steps, we enumerate the steps that the user spends time waiting for and the relevant optimization techniques, and take China Store as an example to introduce the principles and ideas of implementation. These include:

Acceleration for non-first-access pages in step 1-Dynamic caching

Parsing and loading of HTML code in step 2--content compression

Loading of multiple HTTP requests in step 5-Asynchronous, deferred loading, and CSS sprites

Optimization of re-rendering in step 6-optimization of pictures and JavaScript

Asynchronous

The concepts of asynchrony and synchronization are related to the response mechanism of a message. Synchronization is when a function call is made and the call is not returned until the result is received, and the caller cannot get the result immediately after an asynchronous procedure call is made. When the part that actually handles this call is completed, the caller is notified by status, notification, and callback. Generally speaking, when we say synchronous, asynchronous, especially those who need other parts to collaborate or need a certain amount of time to complete the task.

In the field of Web development, the biggest advantage of asynchronous invocation is that the front-end user experience is improved so that users do not have to wait for the server to respond, the browser's address bar and status bar do not display the "Loading" status (small rotating icon), the entire browser does not "pause" or "stuck" feeling When the background application executes, for some of the more time-consuming operations, including IO operations, database operations, etc., we can consider whether to use asynchronous invocation according to the current scenario, and can change the design of the service to improve the system response speed according to the client's concern about the result. Also note that unreasonable asynchronous calls can increase the complexity of the client program and may affect system performance.

There are two main types of asynchrony that are common on e-commerce sites: An asynchronous return for back-end event processing, in this paragraph, the process of ERP in the order process as an example of the specific story; another is to split a small number of child requests into a large front-end page (or request), using AJAX technology to make asynchronous calls to avoid script blocking, To speed up the rendering of page elements, this article will be detailed in the later part of the delay loading section.

This article uses the Chinese sample store order process to explain the implementation of the order asynchronous processing of the ERP system after the order is submitted.

The user submits the order in the shop, the order system saves the order to the ERP system at the same time in the electronic commerce system;

The user does not need to wait for the ERP system processing result return, completes the order directly in the store, waits for the delivery and so on system's next processing, simultaneously the user may carry on other operation in the shop;

After the ERP system receives the order, carries on the update to the stock, the order carries on the status tracking processing, like collection, delivery, distribution and so on;

ERP system will be based on the system design (timing or on demand) of the E-commerce system inventory and order synchronization, so that E-commerce systems and ERP system data to maintain consistency;

E-commerce background system uses the message mechanism to send notifications, SMS and other users get the latest status of orders.

This kind of typical ERP process asynchronous processing enables the user to carry on the shopping experience without blocking in the front-end store, does not need to care about the backstage processing logic, and obtains the news notification promptly.