preface
Title incompetence, please put down your butcher’s knife, pierced the heart of the down to see, see can’t help please mercy.
The introduction
You see clearly, I am an Internet company technology development, thirsty drink coffee, hungry eat takeout, fainted on the hospital kind of. The mortgage is unpaid, the car is my own, I work overtime when people are on vacation. And most importantly, I’m single. Don’t think about being single. Your mom and dad will slap you in the face.
My story is in four words: Performance optimization.
I know that my friends watching this place at this moment will be sweating palms, frowning, and staring dangerously at their phone screens. Come on, I’m not afraid. Performance optimization is not good, still want to find a partner?
I had an interview question the year before last
Interviewer: What did you do to optimize performance?
A: Lazy loading, caching, offline packages, parallelization
Interviewer: How is the offline bag designed?
Answer: make a snapshot of the home page and give it to the local path where native children’s shoes are put into the package when the App is packaged.
Interviewer: Do you have any specific strategies for lazy loading or caching?
A: Yes. Skeleton screen, SSR.
Interviewer: What are the advantages and disadvantages of skeleton screen and SSR?
A: A skeleton screen is suitable for use when page load latency is high, but the grey tofu blocks of the skeleton screen require a visual cut, which needs to be cached on the client. If skeleton screens are used extensively, the client may cache too many images. SSR will be more expensive to implement and is not recommended for pages that are not particularly important. When the network environment is very bad, there is still a downgrading process, which is client rendering.
Interviewer: Do you have a specific solution to the first white screen?
My inner OS: My inner MMP is starting, and what I said before is not the solution?
A: There are many ways, but it depends on the environment of the company. After all, not all means can be used. But it’s important to do a good job of caching the first screen. For example, make good use of HTTP caching…
The subtotal
In those days, interviews were almost always about the interviewer cracking a whip and me responding with a shiver. Answering questions about performance optimization is basically the same old four. The problem is, these answers could have been given by another person. To put it bluntly, what you say is not really yours. Then, a little higher, you don’t get a chance.
The interview happened yesterday
Interviewer: How is the performance monitoring platform built?
A: Confirm the performance indicators. Examples include first screen render time, page white screen time, second lag rate, FPS, average request time, etc.
(Interrupted because the interviewer got the point he was interested in)
Interviewer: How do you calculate your FPS?
A: FPS (Frames Per Second). Generally FPS in 60 or more, the page is smooth, not carding. But that’s not the case. Let’s say you’re playing a game (chicken, King of Glory) and the FPS is below 60, but we felt it was smooth and not stuck.
FPS below 60 does not mean a lag, and FPS above 60 does not mean a lag. For example, the first 60 frames are rendered very quickly (one frame in 10ms) and the next 3 frames are rendered very slowly (one frame in 20ms), resulting in an average FPS of 95, which is above the 60 standard. Is this going to get stuck? It’s obviously caton.
So the key to getting stuck is whether it takes too long to render a single frame.
The difficulty is that in the browser, we don't have an interface that takes time to render a single frame. So we can only use FPS, and as long as FPS is stable and low, it's fine. We've set the standard for it to be at least 20 FPS for three frames in a row and keep it steady.
(The interviewer’s eyes are beginning to light up.)
Interviewer: Just write it down.
// ** Start writing code online. 支那
// Take h5 as an example
/* Take advantage of the fact that requestAnimationFrame is executed 60 times per second (without a lag), assuming that the page loads X ms and the requestAnimationFrame executes N times during that time, the frame rate is 1000* N/X, FPS. * /
/* However, different clients vary greatly, and compatibility needs to be considered. Here we define fpsCompatibility to represent compatibility handling, using setTimeout to emulate requestAnimationFrame when browsers do not support it. Finish the FPS calculation in fpsLoop. Finally, the fpsList is traversed to determine whether the FPS is less than 20 for three consecutive times. * /
const fpsCompatibility = function () {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
}
);
}();
const fpsConfig = {
lastTime: performance.now(), // Performance is a browser-provided API
lastFameTime: performance.now(),
frame: 0
}
const fpsList = [];
const fpsLoop = function () {
const first = performance.now();
const diff = (first - fpsConfig.lastFameTime);
fpsConfig.lastFameTime = first;
const fps = Math.round(1000 / diff);
fpsConfig.frame = fpsConfig.frame + 1;
if (first > 1000 + fpsConfig.lastTime) {
const fps = Math.round((fpsConfig.frame * 1000) / (first - fpsConfig.lastTime));
fpsList.push(fps);
console.log(`time: The ${new Date()}FPS is: `, fps);
fpsConfig.frame = 0;
fpsConfig.lastTime = first;
};
fpsCompatibility(fpsLoop);
}
fpsLoop();
function checkFPS(fpsList, below = 20, last = 3) {
let count = 0;
for (let i = 0; i < fpsList.length; i++) {
if (fpsList[i] && fpsList[i] < below) {
count++;
} else {
count = 0
}
if (count >= last) {
return true}}return false
}
checkFPS(fpsList);
// If the FPS is less than 20 three times in a row, it is considered a lag.
Copy the codeInterviewer: Yes, that’s fine. How do you report things like these performance metrics?
Answer: manual burial point, automatic collection, visualization burial point
Interviewer: Do you have any ideas on how to design a performance SDK?
A: Performance SDK design, one is the access design, the other is the SDK running design.
- SDK access design
- You can encapsulate the script from the previous first screen, white screen, and lag collection. And let the script run automatically.
- Make SDK use/help documentation to improve ease of use
- The whole performance analysis assistant can quickly locate some simple basic problems
- SDK running design
- Compatibility issues, using native JavaScript to write performance indicator collection, to achieve cross-end collection
- Fault tolerant mechanisms, such as try catch, and then report the exception
- Testing THE SDK performance can confirm the model distribution according to the actual usage of users
Interviewer: As for the abnormal reporting you mentioned, how did you design your reporting strategy?
A: After collecting performance indicators, you are advised to filter the abnormal data. But report strategy design, divided into several parts.
- Log Data Filtering
- Filter the abnormal data first
- Abnormal data includes calculation errors, legal outliers, maximum values, minimum values and so on.
- Data sampling strategy
- Whether the data to be reported is full or sample depends on the daily activity.
- The general daily life is less than 10W, you can choose the full amount. With a 1000W APP per day, you need to sample.
- Report model selection
- In the case of a strong network, the logs are reported directly. In the case of a weak network, the logs are stored locally and then reported in the strong network environment.
- Others include APP startup report, batch data report, etc.
summary
About 10 performance optimizations what the hell is 10? What the hell is rescheduling to continue performance optimization? In the days that followed, I became friends with the interviewers and finally got answers to my nagging questions.
She likes strawberry coffee and milk tea, but she prefers strawberry ice cream. Next to the sale sign was the price of strawberry ice cream, and I ignored it. People pointed at that you can not see, hear to want to point cheap secretly happy, you really when people silly?
I’ll start over by replacing “her” with “interviewer.”
Interviewers love to ask you what you did to optimize performance, but they want to know what you did that others didn’t. Next to the old four is written for what kind of scene, but I turn a blind eye. People pointed at that you can not understand, hear to listen to simple secretly happy, you really when the interviewer silly?
So, please believe, blind date from the first side began to cross swords. The one who loses first loses the initiative. If you get high, you lose the ability to be observant enough. Human nature is the same. It is easy to be unguarded about what it likes, and wary of what it doesn’t.
In the end, anything deep enough is a knife. Performance tuning is no exception.
(I wish you all the best.)