Web and WebView performance analysis

Some explanations:

1. Webview is the browser of mobile phone, not H5

2. Android4.4 uses chrome as the default webview browser

Chrome analysis tool introduction

Steps:

1. Open the chrome

2. Open the F12

3. Send the HTTP request again

4. Find data analysis in network

Network in Chrome

[

Clipboard924 67.2 x 632 KB

] (ceshiren.com/uploads/def…).

1. Disable cache Indicates whether to disable the cache

2. All, XHR (AJAX), JS, CS represent different request types.

3. Requests in name are presented in order of precedence. The first request must be www.baidu,com

4. The blue line represents the point in time when the DOM was successfully constructed

5. The red line indicates the point in time when all resources are loaded

6. The bottom shows how many requests there were, how big the resource was, how long it took to complete all the requests, and the dom and the point in time the resource loaded

Red and blue lines

1. Xpath is found in the DOM

2. CSS is from the red line image to find after loading, more stable, find faster, dom is difficult to find ah, slow speed

Details for each request (see figure below)

[

Clipboard807 8.17 x 412 KB

] (ceshiren.com/uploads/def…).

1. The queued at 878.59 ms

A www.baidu.com request, turn to get this resource in front of the queue time

2. Queued at 878.59 ms

The Queueing time is 878.59ms+1.25ms=879.85ms

3.Queueing

The browser is thread limited and requests cannot all be sent at the same time, so the time between adding to the pending queue and actually starting processing. Chrome normally supports six threads

4.Stalled

  • It is the time between the time the browser receives the instruction to issue the request and the time the request can be issued. It is generally the time for proxy negotiation and the release of reusable TCP connections. It does not include the time for DNS query and TCP connection establishment
  • Detailed explanation: When the HTTP request, request a GIF resource, for example, the server receives the request, need to return a TCP response, the response is TCP ack response, after the client receives, will know that need not repeat to send the request, if the client in a certain period of time don’t get this request, will resend the request, Windows seemed to expect to deliver five times. If the server did not send a TCP response five times, TCP was disconnected and re-launched TCP’s three-way handshake, so lengthy stages of its own cost were often caused by packet loss and meant network or server problems.

References:

cnblogs.com 3

Analysis of Chrome’s timeline cost – control

During an operation activity in the company, PM always complained about the slow access speed, which affected the operation effect. However, from the perspective of the front end, I have made the following optimization: CSS, JS merge compression, image compression, Sprite image, static resources on the CDN. But it’s still slow and confusing

Blog.csdn.net/sinat_21455…

5. The DNS Lookup:

Time to perform a DNS lookup. Each new domain pagerequires DNS looks up a complete round trip. DNS query time, when the local DNS cache is not available, this time can be a length, but for example once you set DNS to host, or second access, because the browser’s DNS cache is still available, this time is zero.

6. Inital connection:

The time for establishing a TCP connection is the same as the time from the client to the end of the TCP handshake, including DNS query time +Proxy time +TCP handshake time.

7. The request sent:

The time before the first byte of the request is sent to the time after the last byte is sent, which is the upload time

8. Waiting (TTFB) :

Time To First Byte after a request is sent, from the Time when a request is sent To the Time when a response is received. This time period represents the network delay time for the server to process and return data. The goal of server optimization is to make this time period as short as possible.

9. The Content Download:

The time between the first byte of the response received and the last byte received is the download time

How to monitor webView performance on mobile

Use the Chrome Remote Inspect tool

Steps:

1. Prepare Chrome version 62. Bugs such as network are not displayed in other versions

2. Android version 6.0 is ok, mumu is 6 by default, and it also helps you to turn on webView in developer mode

3. If you’re not running android6.0, you’ll need root to enable webview in the developer option

4. Or open the WebView switch in the APP

5. Prepare to climb the wall

6. Enter chrome://inspect/# Devices in the chrome URL

7. Connect to the device and access the WebView website, such as Baidu

8. After losing Baidu, you can click inspect to observe

9. But because my Chrome is not 62, so I can not analyze it, look at the picture, nothing

[

Clipboard1400 66.5 x 438 KB

] (ceshiren.com/uploads/def…).

How to test the performance of H5

Meaning: Actually is the performance of webView, but can use code, not Chrome, can achieve automation and so on. The essence is to analyze the performance of H5 through W3C standards, through specific API, using buried points and other technologies

The w3c’s graphic

[

Clipboard1115 x 660 246 KB

] (ceshiren.com/uploads/def…).

Prompt for unload: Time when the old page is unloaded ● Redirect: time when users log in to a new page ● App cache: check whether the cache is open ● DNS: time for DNS query ● TCP: time when a new page is unloaded ● Redirect: time when users log in to a new page ● APP cache: check whether the cache is open ● DNS: time for DNS query TCP connection ● Request: the browser initiates a request. ● Response: the server sends a response to the client. ● Processing: time points of various states

Buried point function 1. It can detect the request speed of the real server in the network environment and hardware of different users, because I can separate TCP, DNS, Request, processing and other client processing, and only look at the server processing 2. Can observe my current network and hardware, the client will cause network lag, such as DNS problems, or unreasonable redirection caused by

Reference API: www.w3.org/TR/navigati…

Chrome uses the console code to perform the following steps: 1. Enter F12 and initiate request 2. Into the console interface, first the clear () 3. The screen input window. Performance. The timing

[

Clipboard891 12.2 x 374 KB

] (ceshiren.com/uploads/def…).

Get the code for performance using PyCharm:

from selenium import webdriver

driver=webdriver.Chrome()

driver.get("https://www.baidu.com")

print(driver.execute_script("return JSON.stringify(window.performance.timing)"))
Copy the code

The result: the same as Chrome

{” connectStart: “1588594545718,” navigationStart “: 1588594545712,” loadEventEnd: “1588594549759,” domLoading: “1588594546591,” s EcureConnectionStart: “1588594545734,” fetchStart: “1588594545713,” domContentLoadedEventStart: “1588594548960,” responseStart “: 1588594546581,” responseEnd: “1588594546590,” domInteractive: “1588594548960,” domainLookupEnd: “1588594545718,” redirectStar T “: 0,” requestStart: “1588594546501,” unloadEventEnd “: 0,” unloadEventStart “: 0,” domComplete: “1588594549754,” domainLookupStart “: 1588594545715,” loadEventStart: “1588594549754,” domContentLoadedEventEnd: “1588594548973,” redirectEnd “: 0,” connectEnd “: 158 8594546500}

(Article from Hogwarts Testing Institute)

More technical articles can be found at qrcode.testing-studio.com/f?from=juej…