preface

Have you ever seen Los Angeles at 4:00 in the morning?

So, have you ever seen the Bund at 2 a.m.?

1. The second encounter

Worked until 1:00 a.m., stopped by for a drink. I’m not an alcoholic. I just like to drink, just like women like to shop. I just like to drink. Quick drink kneel of time, take out mobile phone taxi.

When the bus passed the route of the outer Ferry Bridge, I clearly saw a girl standing on the bridge. Although also 4, 5 meters, certainly won’t si, but the girl is crying!

The story begins. Because I know that girl, the girl I recruited the other day, 24 years old. I stopped the taxi, possibly because I was drinking. Okay, I do feel like an alcoholic.

She screamed like a frightened rabbit and almost woke me up.

“Well. Okay, there’s a normal reaction. Zha ground, do not adapt to overtime?”

The girl nodded, too scared to reply. I got it. That look was definitely looking out for me. Yes, who would believe that I was accidental?

“Can’t do it?

“No.”

“Stressed?”

“A little.”

“Really? That’s a lot of pressure for a little lowB demand?”

“No, it’s not…”

“Lost in love?

“Well.”

The atmosphere came to an abrupt end. It suddenly occurred to me that I was meddling in someone else’s life. At this age, I have learned not to enter another’s world easily. The bridge was cold, and most of my liquor was gone.

“Is there a dot card on that activity page you wrote?”

I looked into the girl’s eyes, didn’t answer, but there was a flash of tension in my eyes and a little…

Disgust. Yes, anyone who is confronted with a point of weakness, will have a distaste. The girl should also know that I have seen her code, code review is not just talk.

“Today you try to calculate the location of the red envelope margin to transform.”

“Oh. What are the benefits of changing margin to transform? Aren’t they all CSS properties?”

I looked twice at the girl. It is good to be young! I was so sad for a few minutes, and now I can communicate normally. She probably couldn’t see the strange sight that flickered under my eyes.

“What about the browser’s main thread and compositing thread scheduling? In general, the main thread is responsible for running JavaScript, calculating CSS styles, and element layouts, and then handing them over to the composite thread. The composition thread is mainly responsible for drawing, and the main thread is stressed when using width, height, margin, padding and other values as the transition. Instead of setting margin directly, we can use transform.”

In fact, my heart is not the heart. A new girl had to write the campaign page, and I was like a veteran who bullied the recruits.

“But the active page white screen time is also quite long, always feel to white screen 1 second to come out.”

No nonsense, the active page layout is in charge, and the girl waits for the interface data to return before rendering the data.

“Have you ever tried to give your animations a fade in effect?”

“I thought about that. But no matter how good the animation is, it can’t change the white screen time!”

Once again, the atmosphere stops short. Excuse me, I am recruit come in a how dish child shoe? Then the wine, I opened my mouth and finally did not say. I thought to myself, had I been deceived by the lard? I looked more closely at the girl’s face. Not ah! This obviously does not have the feeling of heart!

“Feed! A: hello! Don’t look at me like you don’t like it. After all, my salary is so small, so what’s wrong with a little food? !”

Be righteous. Yes, it is!

2. The third encounter

That night, I couldn’t resist passing on a lot of front-end knowledge to her. The code was significantly better when I did the code review. In fact, tell this story to people, people will not believe it.

Who talks about technology while a girl cries? In fact, I do not have high requirements for girls. Code review is only to ensure that her code can be easily understood by others. At least, the performance optimization at the code level should be done well.

618 that night, busy crazy. The girl’s activity page also passed the test that day. After I complimented the girl, I went to find a place to get drunk.

“Oh, good for you. It’s 1:00 in the morning. Go get some rest. Come on, I’m looking forward to a promotion and a raise!”

After drinking the wine, the old rules take out the phone taxi, the same passing the white bridge. What fxxking that I hate…

Why is that girl on the bridge again? I stopped the master, rolled down the window and took a closer look. Well, not this time. Can’t be a man who just wants some air, right?

Alas. You know what? I’m gonna teach you this time. At night, a girl out to protect themselves.

Get off and climb onto the bridge. The girl was holding a beer can in one hand and wiping her tears in the other.

“There you are. Old B asked me to match a webpack and more entries. I’m not good enough for him. I feel useless. Wow blare……”

What, 🥚? Drunk on a beer? You want to webpack when you’re drunk? You lie to a ghost!

“You knowwebpacktheloader 和 pluginIs there a difference?”

“I want to hear you say it.”

“Listen, I’m only going to say this once. “

• loaderIs focused on file conversion, such as loading non-CommonJS specification files,babel-loaderandbabel-coreThe module is designed to convert ES6 code to ES5,url-loaderandfile-loaderIt is packaging pictures and so on.”
• pluginDone isloaderFunctions that cannot be completed.pluginIt’s also for expansionwebpackThe function, howeverpluginIs applied towebpackOn its own. andpluginIt’s much more than just packaging and resource loading. It is powerful enough to handle a wide variety of tasks, from packaging optimization and compression to redefining environment variables.
• Webpack provides a number of plugins out of the box:CommonChunkPluginIt is used to extract third-party libraries and public modules, avoiding loading on the first screenbundleFiles, or on demandbundleFile size is too large, resulting in a long load time, is an optimization tool. In multi-page applications, code can be created for shared applications across each pagebundle.

The girl sniffed, it seems to be really crying. Cheat to toy with female feelings of man ah cheat to toy with female feelings of man, please you don’t at this time to tell people technology, will get thunder.

“That’s it?

“Well, what else do you want to know?”

“What do you do with all that performance monitoring? It’s amazing! How do you know when a page is white?”

“Yoo-hoo, not a small appetite. I’m afraid you’ll have to stand here for a week.”

“Good ah! No problem. Why don’t you just start today? I have a great capacity for comprehension!”

“Okay, I lost.”

• Establish performance indicators
  • Bad time
    • It refers to the time when the first character appears at the beginning of the page after entering a carriage return (including refreshes, jumps, and so on). The process includes a DNS query, establishing a TCP connection, sending the first HTTP request (which requires TLS authentication if HTTPS is used), returning the HTML document, and parsing the Head of the HTML document. Its standard time is 300ms.
  • The first screen time
    • Bad time
    • Data interface response time
      • So that it can be obtained directly from the back-end service, without the need for the front-end to double compute. Obtain the data and report it to the performance platform.
    • Image loading resources, etc
      • Computing image
  • Visual stability index (CLS, Cumulative Layout Shift)
  • Second open rate
  • Lag, full load time, resource load time… Important is not a high priority.

First screen time seconds on rate standard

type	The first screen time	Second open rate	Opening rate of 1.5 seconds	2 seconds to open rate
SSR	1000ms	80%	95%	98%
In the end	1200ms	65%	85%	90%
The outside	1500ms	40%	60%	80%

“Wow! Second opening rate is the highest only 80%?”

“I… There are only a handful of people in the industry who can do that.”

“Oh. I probably know what you’re saying. But what are the visual stability indicators?”

“The key metrics of interactivity and visual stability are still being explored by the industry, there is no uniform measure and must be collected manually.”

“So you set these performance metrics, and then what?”

“And report it to the performance monitoring platform. Stupid!”

“How will it be reported?”

“Well, I don’t know. Design a performance reporting SDK first.”

steps	action1	action2
Performance SDK Design	SDK access design	1. Encapsulate the scripts of the first screen, white screen and lag collection, and let the scripts be initialized and run automatically.
		2. Provide help documents to improve the usability of the SDK. After all, any library now has help documentation
		3. You can also set a performance analysis assistant to quickly locate some basic problems.
	SDK running design	1. Compatibility policy. withjavascriptTo write the collection method of performance indicators, so that it can be used across the technology stack.
		2. Its own fault tolerance mechanism,try catchCatch exceptions and report them.
		3. Determine according to the actual browser and model distribution ratiotop10%User model and browser type. Then code at the end of each developmentcode reviewThen test yourself using these models and browser types
Report Strategy Design	Log Data Filtering	1. After collecting performance indicators, you are advised to filter abnormal data
		2. Abnormal data is incorrect, including legitimate abnormal data, maximum threshold, and minimum threshold.
	Data sampling strategy	1. The performanceSDKWhether the reported data is full or sample, depends on the daily activity of the App or website. After all, the living10Wand1000WThere is a big difference.
		2. If the day is large, the sample size should be reduced appropriately. For example, on Tmall’s Double 11, Japanese goods are huge, so it is necessary to reduce the sample.
	Reporting Mechanism Selection	1. Select a proper reporting mechanism based on network capabilities. In a strong network environment (Such as 4 g/WIFI), and report directly. In weak network (2G/3G), store the logs locally and report the logs on a strong network.
		2. Select the reporting time according to the busy time of the APP. For example, if the App is idle, it will be reported directly, and the busy state will wait until the idle state (For example, at 2-3 am, user activity is relatively low) and then report.

“Is it that complicated?”

“Ha ha. There’s a performance platform to build. After all, the data is reported, and the data has to be analyzed, right?”

“Boss, stop talking. I have to digest it.”

“That hurriedly get off the bridge, go to front intersection taxi.”

Alas. Is this my own way of comforting people? Do not rely on coax, do not rely on mouth cannon, technology 😂. The girl looked at her phone and saw the time frozen at 3:43 a.m.

“You take my phone, my shoelace is untied.”

I took the girl’s phone, I don’t know if I forgot to lock the screen, her iPhone pushed a wechat message.

Dad: Which hospital in Shanghai to see severe stomach disease! It would cost tens of thousands more…

I ignored it, but it only took me 0.2 seconds to look at it. The girl tied her shoelaces and stood up to take over the phone, saying it was ready to drop. But I clearly saw her eyebrows and eyes again tightly tufted. Probably the most comfortable way for adults to be with you is “I know you but I don’t bother you and I don’t touch my self-esteem.” But it’s also probably the cruelest way to be an adult.

It’s not emotional.

Technology-independent.

This article is still defined as technical, but I still want to say: money, is a person’s most hard confidence.