preface

First, meituan.

Most people have used Meituan takeout. The customer has to place an order and pay, and the merchant will take the order. The delivery rider arrives at the store, and the delivery is delivered to the address filled by the customer. This process should be familiar to everyone, we can call this process performance service. The experience problems and performance problems in the whole contract performance process have a great impact on service quality, compared to the competition next door. If one of them fails, the client goes to another.

So, let me say something about the chestnut.

• Customers click on the takeaway business and perceive a blank screen. Be mine?
• Knight received the order notice, click into the page blank screen for a while, what will happen?
• The knight called the client and said he would be there in 2 minutes, but it took 5 minutes. Be mine? Will the client feel that there is something wrong with the knight’s sense of time? But is it really the takeaway rider?

Let’s talk more about the recent Tmall 618.

I mentioned in the previous article that the performance index of second opening rate was put forward by the front end team of Ali Tao Department. Because business scenarios are complex enough, they have a deep understanding of performance. On 618, you may have seen ads on many external apps, such as Zhihu, Weibo, Alipay, Douyin, and other major advertising platforms. If you click on 618, you will be reminded of your Tmall APP. Then some components need to be initialized when the Taobao/Tmall App is activated, which leads to the poor page experience compared to the H5 in the end.

Let’s talk about Aliyun. The birth of Ali Cloud is a legend. This paper will mention the performance monitoring scheme of Ali Cloud, also known as ARMS performance monitoring scheme. It is a solution to improve the site performance experience by monitoring Web scenes through page opening speed. Note that Web scenarios are not just pages, but also environmental and interaction factors.

Start the text.

How meituan did it.

Meituan generally adopts Hybrid development mode. The front-end team of Meituan adopts:

• EnhanceHybrid(Enhanced hybrid) programme,
• SSR
• Offline technology

To optimize performance.

SSR and offline technology you can check out the previous article. This article will not cover much more.

But EnhanceHybrid is definitely a highlight, contributing the most to the first screen time, which is awesome and has the title of zero white screen time (because it can theoretically do that).

EnhanceHybrid is a view-switching preloading solution. Don’t understand the opposition all of a sudden? It’s okay. I’ll just give you a simple chestnut.

Let’s look at some pseudocode.

import renderPage from 'Native'
function PageA () {
   
  
   const onTouchStart = (e) = > {
       // code...
   }
   
   const onTouchEnd = (e) = > {
       // The current page can be processed first logic.
       
       // Step 1 The system will implicitly open a new WebviewRenderPage Native (shopping cart);// Step 2 Enable loading state (can be loading animation)
       loading = true;// Step 3 Suspend the task and wait until the pre-rendering is complete.Native. RenderPage (shopping cart). End (() = >{Native. GotoPage (shopping cart); })}return <div>// The contents of page A<div onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>The shopping cart</div>
   </div>
}
Copy the code

A quick look at didiot makes it clear that this is the user clicking the jump button and waiting for the new page to render. Once the new page is pre-rendered, the client will notify H5 to update the page view. At this point, you’ll find that there are no more resource requests and DOM renderings that take time to cause a white screen.

So, this solution solves three problems.

• The original page (PageA) waits for a long time.

• Unable to load and render a new page before jumping to a new page (PageB)

• Unable to get render progress for new page (PageB)

So while you’re trying to optimize resource requests and render times for your current page, someone else is waiting for you in the atmosphere.

So how did Meituan do that and where did he start to solve the problem?

In terms of front-end performance optimization, Meituan will improve:

• The first screen time
• Bad time
• Page load completion time
• Fluency is tested
• Second open rate

Conduct monitoring. Are you asking where and how? Bao, of course, there must be a performance platform first! Take a look at the previous article on how to build a performance platform. I’m not going to do much here.

What did Ali do

The ARMS performance monitoring scheme was mentioned earlier.

In THE ARMS performance monitoring scheme, Apdex is defined to represent the performance experience level standard, and its calculation formula is as follows:

T is the blank screen time. The default value is 2s. So, plug in the formula:

In the formula, the number of satisfaction is 0 ~ T, the number of tolerance is T ~ 4T and the number of dissatisfaction is > 4T.

Other performance indicators:

• The first screen time
• Second open rate
• Bad time
• Interactive time
• DomReady time
• The Load time
• …

Talk about the computational logic of ARMS.

1. mutationObserverListen for changes to page elements
2. Perform depth-first traversal algorithm.
   • If the child element is visible, the parent element is visible, and no double counting is required.
   • If the last element is visible, the previous sibling element is visible, without too much calculation.
3. Iterate over each new element and calculate the total score of the element. Element visibility score+ 1, otherwise,+ 0 。

Oh, this is to improve the performance of the collection script. You see see You, where to go deep algorithm 😂😂😂

theARMSHow to access?

• CDNAccess.Please refer to the official help document for details

<script> ! (function(c,b,d,a){
c[a]||(c[a] = {});
c[a].config ={ 
pid:"Your pid".appType : undefined.imgUrl : "https://arms-retcode.aliyuncs.com/r.png?".uid: "Your USER ID"
};
with(b)
with(body)
with(insertBefore(createElement("script"),firstChild))
setAttribute("crossorigin"."",src=d)
})(window.document."https://retcode.alicdn.com/retcode/bl.js"."__bl");
</script>
Copy the code

• npm 包

npm install alife-logger --save
Copy the code

We’ll come back to 618 at the end. Performance problems mainly focus on the following aspects:

• Problems of low-end Android computers in complex network environment

• APP is aroused by h5 outside the end, resulting in poor performance of H5 inside the end

• Venue marketing campaign page, due to the low secondary visit rate, due to cache data expiration caused by repeated rendering and page element jumping problems.

The subtotal

Ali cloud in the performance index acquisition and SSR program to achieve some of the forefront. Because you’ve been through enough…

Meituan EnhanceHybrid solution solves the performance problem with low cost.

Also, this is probably my last article on performance tuning.

Finally, a final summary of performance tuning:

1. Build a performance platform
   • Establish performance indicators
   • A formula to calculate
   • Scene preset
   • Analysis of performance indicator data
2. Develop a detailed performance optimization plan based on the feedback of the performance platform.

(Good luck, girl interviewer.)