SegmentFault Technology Weekly - How to optimize performance?

In this issue of Technology Weekly, let's take a look at how to optimize performance? , welcome to read~

文章推荐

"Recent Summary of Front-End Performance Optimization" Author: Nancheng University Front-end

Front-end performance optimization is an essential ability for every front-end development engineer, whether in interviews or in the actual development process. This article summarizes my understanding of front-end performance optimization in my years of development experience, and I hope it will be helpful to you. Because there are many optimization directions involved, I will not explain some details in detail. If you are interested, you can learn more about it. I won't say much. , the text begins.

"Performance Optimization Essentials - Flame Graph" Author: Gugu Chicken

This article mainly introduces the flame graph and its usage skills, and learns how to use the flame graph to quickly locate the performance stuck point of the software.
Combined with best practice cases, it helps readers to have a deeper understanding of the structure and principle of flame graphs, understand CPU time consumption, and locate performance bottlenecks.

The current state of affairs Assuming no flame graph, how did you tune your program code? Let's take a swipe.

"Advanced Performance Optimization: Let Your Mobile Web Page 1s Render" Author: wxp686

Today's consumers are increasingly relying on mobile devices to access content and services more than ever. When they weigh the experience on your website, they not only compare you to your competitors, but also rate your app after using it.

However, the experience that many websites bring to users is not very good, resulting in the loss of potential customers. Therefore, performance is the key to retaining users.

"Front-end promotion defense - performance optimization paradigm" author: Hu Ge has something to say

This article strives to provide you with a paradigm for discussing performance optimization-related work when you take part in your promotion defense. To put it simply, if you prepare and elaborate according to this paradigm, you can win the recognition and love of the promotion judges.

The front-end that is obsessed with writing page UI is the same, and the front-end that knows how to quantify revenue is one in a thousand.

It is no longer the primitive front-end era of slash-and-burn cultivation. Being able to implement page UI with high fidelity is a basic skill for every front-end. The phrase "no credit and hard work" is no longer applicable to front-end promotion. Your hard work may be seen in the eyes of your immediate leader, knowing that you stay up late and work overtime every day for business, which will make your year-end performance better, but in the promotion defense, especially the promotion of senior classmates, it is basically a cross Department, or channel judges, they will not think that these repetitive labors, like assembly line work, have any important value.

How to make them realize the value of your work in a short period of time, this is a question you should think about before promotion!

"Complex Data Transformation with normalizr" by jump__jump

The author once developed a small program for data sharing, and the sharing logic is similar to Baidu network disk. The current data can be processed by the shared person and then continue to share (you can control the expiration time of the data, whether the data can be processed and continue to share).

The shared data is a deeply nested json object. When the user reads the shared data, it is stored in the Mini Program cloud database (the shared data is different from the business data, and the business server is not used for maintenance). If you get the data and store it directly, the cloud database will soon become very large, and secondly, we will not be able to analyze each item and retrieve each item of sub-data to sharers.

"How do I end up with a million data run batches in half an hour" by Issues

The task of running batches is to process these data regularly. The whole batch of data cannot continue to operate because of an abnormality in one of the data, so it must be robust; and we can perform compensation processing for abnormal data in the future, so It must be reliable; and usually the amount of data to be processed by batch tasks is large, we can't let it take too long to process, so we must consider its performance processing; to sum up, our batch applications need to do The requirements are as follows

Robustness: For abnormal data, the program cannot crash Reliability: For abnormal data, we can follow up on large data volume: For large data volume, it can be processed within the specified time Performance: It must be implemented within the specified time to avoid interfering with the normal operation of any other application

""Performance Optimization" adds off-screen rendering and caching to virtual lists to improve rendering speed" by Pi Xiaodan

The ability to render off-screen and compress and cache image thumbnails in virtual lists is added as a feature enhancement.
The purpose of optimization:
Support 2000 sku+ can operate normally at the same time;
The loading time of entering the page is within 2-3s, the scrolling display is not stuck, and the operation feedback is normal;
Faster page loading speed;

Main processing:
Add an Avatar component that uses off-screen rendering to compress images, and replace the original Avatar component;
Added LRU Cache to cache compressed images;
Experimentally added Web workers to prevent the main thread from being stuck when compressing images;
Use the more powerful react-virtualized instead of the original react-virtual-list
The following mainly shares the solution design and the implementation of the core code, hoping to help everyone.

"The performance of the version number of a show operation is improved by 300%" by Gopher Zhibei

The logic of CompareVersion is clear and simple, and according to the flame graph, the performance is mainly consumed in the strings.Split function, so Lao Xu's first goal is to try to optimize the strings.Split function.

At this time, the first method that Lao Xu thought of was Baidu Dafa and Google Dafa. Finally, he found the strings.FieldsFunc function in an article. According to the description of the article, the strings.FieldsFunc function splits strings much faster than the strings.Split function. . So whether we can replace the strings.Split function with the strings.FieldsFunc function, please see the test results below.

问答推荐

Unanswered:

• The arcgis/core dependency file is too large and the rendering time of the first screen is very long. Is there any way to optimize it?
• The treemap shows that there are many unused codes, but js is a packaged chunk. I don't know the specific situation. Is there any way to optimize it?

Most frequent:

• When there are many react components, drag and drop encounters performance problems, causing the page to freeze
• May I ask if vue loads the icon from other people's website and writes it like this, will it cause the page to freeze and affect performance?
• May I ask why a data size causes huge performance issues?
• Is there a performance difference between defining a variable inside a loop and defining a variable outside the loop?
• How to implement a high-performance time-conditioned querier?

---

# SegmentFault Technology Weekly#

"Technology Weekly" is a series of technical content specially launched by the community, with a weekly theme.

Update every Tuesday, welcome to " follow ". You can also leave a message on the topic you are interested in in the comments, and recommend excellent articles related to the topic.

If you have any questions, you can add Ms. WeChat~