Shulou(Shulou.com)06/02 Report--

How to carry out H5 front-end performance testing, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

When it comes to the H5 test, it is all too familiar to the students who do the WEB test. It includes the page H5 functional test, the front-end performance test, the browser compatibility test, and the server-side performance test. Then this article is about the H5 front-end performance test, and hope that after reading this article, we can know: what is the H5 front-end performance test? How to find the problem and the corresponding optimization rules.

1. Browser rendering engine

Browsers are tools for Html parsing and final presentation of pages, so it is essential to understand how browsers work before testing H5.

The main functions of the browser

The main function of the browser is to render the web resource selected by the user. It needs to request the resource from the server and display it in the browser window. The format of the resource is usually HTML, including PDF, image and other formats. In the browser component, the rendering engine is the part that is directly related to the user and presents the page that the user needs. So start with the rendering engine to understand HTML parsing and page display.

Rendering engine Workflow

Dom tree construction: starting from the parsing of html tags, various tags are parsed into nodes in the dom tree. There is an one-to-one correspondence between the tags and the nodes in the dom tree.

Render tree construction: parses the style information in the CSS and style tags into a render tree, which consists of rectangles with attributes such as color and size, which will be displayed on the screen in the correct order.

Render tree layout and rendering: the render tree determines the exact location of each dom node on the screen and draws the web page according to the color and other information in the render tree.

It is worth noting that this process is completed 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 parsing is completed before building and laying out the rendering tree. After parsing part of the content, it displays part of the content, and at the same time, it may also be downloading the rest of the content through the network.

2. Test concern metrics related to Http: 1. Number of Http requests

Statistics show that 80% of the time when a web page arrives at the end user is the http request of js,CSS, picture, mp3,flash and other resources. On the other hand, the number of http requests is also limited. Browsers have a limit on the number of connections to the same domain name. The number of requests varies with different browsers and versions, and most concurrent requests are 6.

It seems that by controlling the number of http requests, reducing the http request time, and reducing the web page loading and rendering time, we can bring a better user experience.

Optimization scheme:

Sprite: CSS Sprite, also known as CSS wizard, is a CSS image merging technology, which combines a small icon and a background image into a picture, and then uses the background positioning of the CSS to display the part of the picture that needs to be displayed.

For example, there are 16 icon in the figure. Each time an image is fetched, a http request is required. If the 16 resources are merged through CSS sprite image, and then the small areas in the sprite image are located through background-image and backgorund-position, all the images can be obtained with only one http request.

Picture map: it is a way for small pictures to merge large pictures, similar to Sprite, but only different in principle. Sprite presents a part of the picture through CSS, while the picture map controls the display area from the way of html code.

Js CSS merge: merge several small js and CSS into one large js and CSS file to indirectly achieve the purpose of reducing http requests.

2. Whether the component is compressed

Compression method: set the compression method in the http request, compress the Response resources on the Server side and then transmit them to the browser. GZIP is generally used to set the content-Encoding field. Compressed object: compression can be set for html,js,CSS,xml and other resources returned from http requests. It is worth noting that we do not need to set compression for resources such as pictures and music, because these resources themselves have been compressed, and the benefit of re-compression is not high, and increases the burden on CPU. Js,CSS we usually remove spaces and enter to compress, and then through GZIP compression, we can achieve a good compression effect.

Generally speaking, component compression is a way to increase the CPU compression and decompression time to reduce network transmission consumption, and usually network resources are more tense than cpu resources, so setting compression for appropriate objects can achieve good benefits.

3. Is the format and size of the picture appropriate

Picture format: among the better picture formats, there are several common picture formats such as webp, jpg and png24/32. Generally speaking, webp images are the smallest, but there may be compatibility issues that need to be resolved in systems below iOS or android4.0.

Picture size: the specific display scene of the picture should be taken into account when obtaining the picture size, such as 480 × 800,600 × 1024,720 × 1280800 × 1280, etc., commonly used in mobile devices, to ensure that the picture can be rendered from the original image. Instead of zooming in or out of the picture through the code.

Image compression: for jpg,png format pictures have already been compressed, which is not enough for scarce bandwidth resources, we also need a more optimized compression algorithm, through a series of image compression tools such as TinyPNG, Smush.it can get better compression and picture quality unchanged.

4. CSS on top

It is mentioned in the browser rendering process that after the dom tree is built. The CSS should be placed before the end of the head tag at the beginning of the html code. If the page is dynamically generated, the page can be output after the head code is completed, so that the browser can parse out the contents of the head more quickly and start downloading the CSS file resources. While the CSS at the bottom will cause redrawing, the user side will feel the "splash screen" bad experience.

5. JS is at the bottom.

JS causes two problems when downloading: blocking the display of web content and preventing other resources from downloading. In the section "reducing the number of http", we mentioned that the downloads of various resources are parallel, and the number of parallel browsers varies according to different domain names, so when downloading js, the parallel download mechanism is invalid. And js may include [xss_clean] and other operations to change the layout of the page, so the rendering engine will wait for the js download to complete before starting rendering. So the user-side page loading time becomes longer because of waiting.

6. JS & CSS compression

First of all, to give an example, I believe that when you use jquery, you will notice that there are two files, jquery-1.4.2.js and jquery-1.4.2.min.js, and the min.js here is the result of js compression. The specific compression methods are as follows:

The first step: "simplify", removing information such as spaces and line breaks and comments from the js file, making the js code compact without losing its semantics. Such as:

The second step: "confuse", express the method name and variable name in a shorter way, for example, the variable can be represented by one character. Such as:

Advantages: compression from the source of the js&CSS file reduces the data size of the http transfer process.

Disadvantages: after two-step compression, it is very difficult to read the js&CSS source code. And the compressed code and another compressed code may cause syntax errors due to the sharing of variables.

Finally, the compressed script files are compressed by setting GZIP compression on the server side, which can make the files shrink more incisively and vividly.

7. Whether to add cache or not

As a way to reduce http requests, there are two ways to set caching. When testing, pay attention to whether caching is set when common resources request resources:

Cache-Control

"no-cache" indicates that request or response messages cannot be cached (HTTP/1.0 is replaced with Pragma's no-cache)

"no-store" is used to prevent important information from being inadvertently published. Sending in a request message causes both the request and response messages to be cached. Based on cache timeout

Expires indicates the existence time, which allows the client not to check (send a request) before this time, which is equivalent to the effect of max-age. But if it exists at the same time, it is overwritten by the max-age of Cache-Control.

Setting method: set expires and cache-control through HTTP's META

8. Avoid non-200 return values

Each http request has a relative return status indicating whether the current request is completed on schedule, such as:

1xx: the request is received, and these status codes represent a temporary response.

2xx: the operation was successful, and this type of status code indicates that the server successfully accepted the client request.

3xx: redirect, the client browser must do more to implement the request.

4xx: client error, error occurred, client seems to have a problem.

5xx: the server encountered an error and the server could not complete the request because it encountered an error.

Therefore, if there is a http request that returns a non-20000 status code, we think that this request is meaningless and takes up scarce network resources, so we should avoid non-200return status codes.

9. Use CDN

The CDN content distribution network (Content Delivery Network) publishes the content of the origin server to the "edge" node closest to the user, so that the user can get the required content nearby and improve the response speed and success rate of user access. To solve the problem of high access latency caused by distribution, bandwidth and server capacity, and provide a series of accelerated solutions. Therefore, if H5 users are scattered all over the country, it is recommended to allocate resources to CDN as much as possible, such as Tencent Cloud CDN.

Time dependent:

White screen time: the time when the user sees the content of the web page for the first time, that is, the completion time of the first rendering process.

First screen time: it means that the user sees the first screen, that is, the area at the top of the entire web page is the size of the current window, showing the complete time.

Download time of the first resource: the time from the beginning of the download to the completion of the first resource download, excluding the page drawing time.

Total resource download time: the time from the start of the download to the completion of the download of all resources, excluding the page drawing time.

User actionable time: the time it takes to load from the page to the responsive time of the user action.

The above-mentioned time indicators should be selected according to the specific conditions of the current H5.

WebView related:

When testing H5 performance on android and IOS, testers should also pay attention to the general app performance metrics caused by loading H5.

Memory: memory changes before and after loading pages, which can indirectly reflect the number and size of resources in H5, such as the number of dom, picture size.

CPU: when the resource style on the page is complex and visual effects are emphasized, the tester can observe the CPU occupancy rate to reflect the H5 drawing quality. If CPU has a high occupancy rate for a long time, you can consider reducing the visual effects of high computational complexity.

FPS: frame rate, especially in H5 with video and animation effects, testers should focus on preventing serious stutter outflows.

III. Common tools

If you want to do a good job, you must first sharpen its tools. Before doing the H5 front-end performance test, choosing the right tool can make our testing work get twice the result with half the effort. There are two types of tools to be mentioned in this article:

One is bag grabbing tools, such as Fiddler, Charles and so on. Such tools can not only grab the package, but also modify the package, dynamically display the waterfall flow, and debug the web. When we do the H5 front-end performance test, I feel that as long as we do not modify the package, do not debug H5, we can give up using such tools, not bad tools, but overqualified.

There is another category, which focuses on platform tools such as Page Speed, PCAP Web Performance Analyzer, and WebPagetest. We can quickly test the H5 front-end performance data, views, and give a certain degree of optimization suggestions.

(* the above are personal opinions. If there are any omissions and mistakes, please correct them in time.)

Take Mobile Manager Dragon Boat Festival operation activity H5 as an example, attach the test results page of the above tools, of course, here is only a list of the results. Specific analysis still needs to be done by testers to measure whether it meets current operational requirements.

WebPagetest

Page Speed:

PCAP Web Performance Analyzer:

Chrome DevTools:

Examples of frequently asked questions:

Also take the operation activity H5 of Mobile Manager Dragon Boat Festival as an example: (it only takes about 20 minutes to complete the whole loading performance test)

1. Too many HTTP requests

The figure shows the result of parsing the pcap package by PCAP Web Performance Analyzer. In the figure, we can see that 7 of the 21 http requests are from statistical points. Here you can consider the combination of statistical points and the first screen to reduce the number of reported statistical points.

2. There is too much blank space in the picture.

The picture needed here is only shared as the upper right corner, but the whole picture is complete in the picture we requested.

You can consider asking for a small cut image to control the display position of the picture through CSS.

3. Picture size

In the following background picture, we can see that the size is 1080X1919, and then the main Android models on the market are 480x800, 480x854, 540x960, 720x1280, 800x1280. Therefore, it is not necessary to provide a picture of 1080X1919 for every mobile device.

4. Unused resources

In the following picture, you can see the request response in chrome DevTools and download it successfully, but it has not been used in the actual H5 activity.

5. The return code is not 200.

A non-200 return code means that there is no substantial gain for this request, as shown in the above figure for two non-200 requests:

404: 404 appears when the image is requested above: on the one hand, the image itself may not be displayed in H5, so just remove the extra connections here. On the other hand, the picture may be needed in H5, and the result of the visit happens to be 404, which locates the existence of a bug.

302: 302 redirection occurs when requesting music: it can be clearly seen from the figure that the background music is not obtained until two requests are made. It may be perceived from the user that the music loading speed is slow.

6. CDN is not used and cache is not set.

If the operational activity is national and has a large number of users, it is very likely that users on the "edge" of the network will not be able to access the H5 activity normally.

7. Resources are not compressed

The various uncompressed image resources are listed in detail here. The compression of the image to be recommended here, such as the test results above, can reduce the image resource size by 16K after compression. You can also consider whether to use image maps to reduce http requests.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.