Talk to you about how to optimize the front-end performance

After the New Year has been delayed until now have time to make up the homework, last year on a business trip for a year, it is time to take a good precipitation

directory

• preface
• Design point of view
• The UI perspective
• The development perspective

One, foreword

I have always told the project members in charge of me that the premise of delivering the project to the customer is no delay, and then the user friendliness must be high. Because no matter how good your project is, if you use cards, users will not approve of it. With the accelerating pace of The Times, people tend to do things that are fast, convenient and easy to get started.

1. Excellent user experience

This is very important but let the user feel in general, there is a saying in the product world, the best user experience is to let the user feel no, easy. As for the apps in your mobile phone, most of the user experience is excellent. The product team maintains research every day and monitors the trend of user needs all the time. So what’s the counterexample:

Hello: JUST because I bought a juicer doesn't mean I need more.

I believe you also have this experience. Although I shopped for a long time in order to buy a juicer, after I bought it, I would still be overwhelmed with “intelligent” push products of the juicer. After I read these push products, I would always struggle.

I'm sorry I bought this one. I should have bought this one

A sense that artificial intelligence is getting away from us.

2. Simple and clear interface

Until now, most clients have tended to have flat interfaces, and many companies’ logos have also been designed flat because of simplicity and clarity. With the development of display screen, more and more content can be displayed in the visual area, and it will take users longer and longer to find what they need, so how to design a simple and clear interface has become the general trend. If you open a website and look at it for a few minutes, it’s probably not simple enough

3, convenient and quick operation process

This is one of the things that every product has to consider. If you can do it in two steps, don’t ask the user to do it in three steps, unless you’re developing minesweeper. Here’s an example:

Now most login system, is registered directly login system, and then slowly guide the user to improve personal information, if the other way around. After registering, still need to fill in a pile of personal information to log in the system, the user has been on the edge of collapse is it, silently scold the street, why do you want to check my account.

The central idea is to simplify user operations

Second, the design Angle

What appears to be a performance problem is essentially a poor user experience

1. Wait for data loading

• In my opinion, loading loading effect is essential for each requested data interface. It is absolutely impossible for users to stare silently at a blank space for a few seconds, at least staring at an ANTD’s chrysanthemum. Never mind the users, even your product manager can’t stand it.
• preload
  
  
  
  In development, you might encounter situations like this. You can use preloading when you don’t need resources right away but want them as early as possible.
  
  Preloading is a declarative fetch that forces the browser to request resources and does not block the onload event. You can use the following code to enable preloading
  
  
  
  <link rel="preload" href="http://example.com" />
  
  
  
  Preloading can reduce the loading time of the first screen to some extent, because some important files that do not affect the first screen can be loaded later. The only disadvantage is poor compatibility.

2. Wait for the home page to load

• I once made a system for placing orders in an equipment mall. The home page was cool, but the management system behind it was huge, so it would delay the loading time of the home page. At this time, we gave the solution is to maintain the home page alone, the home page is written with native HTML alone, using the structure of double page application, so that users can visit the home page in seconds, with the system route entrance to do interception authentication
• Home page loading animation this scene is also very common, this time to find a system even if the loading is very slow, but let the user watch the loading animation for 3 minutes will not feel anxious effect. Such as:

• Skeleton screen
  
  
  
  In jd.com’s usual way, for the slow speed of the situation, first made a “fake” interface.
  

  

  Something like this, to reduce user anxiety

3. Page switching transition

Switching from one business to another with cutscenes gives the user a silky feeling, trying to debug the feeling of eating chocolate with Angelababy on a rainy day.

Once in a project, due to time is relatively rich and it is also a product display website, I made a full set of page switching transition effect, encapsulating a layer when the project route switching, before the jump, let the current component fade out, after the jump let the next component fade in. The end result is great, seamless.

4. Proper animation

Each project will add more or less animations used as the transition of operation, a very classic case, shopping cart parabolic problem, want to had taobao Tmall shopping cart Click the goods shopping cart icon when there will be a ball and the bottom right hand corner, with a beautiful parabola falls on the lower right corner shopping cart page TAB, the effect is very good, People can’t help but want to buy a few more products, just want to watch a few more animations. Greatly improve the user experience.

3. UI perspective

We need to know how much we can squeeze out of the UI

1. Large pictures

Reduce the number of pixels that each pixel can display

• Png8 here I directly recommend pNG8 quality format, directly ask the UI to compress the image to PNG8 64 pixels, and then note that we use the development of the image is 200% size, because it needs to adapt to the HD screen, but the purpose of the UI is bigger and higher resolution, if the UI gives you an image size greater than 200%, The question of picture size needs to be raised. Of course, UI no time, recommended Fireworks, operation and its simple, for the front-end of photoShop. In a few steps, the UI will fall in love with you.

• Webp is no surprise, just out of webP when their blown size reduced by 60%, no change in the picture effect, pure algorithm compression. Recently I checked again and found that there are many cross-browser compatible solutions on the web, such as Webp.js. Compatibility issues are well resolved and ready for use.

2. Small and medium sized pictures

• Sprite is called Sprite in the north and Sprite in the south. It is a time-honored way to save bandwidth by requesting a large picture and positioning the position of a small picture through background – position.

• Iconfont won’t explain much, thanks iconfont

• Base64 this is very controversial, the controversy lies in how much of the picture with base64 is good, the debate is arguing that later no one used… Webpack can be configured to encode the following images as Base64 into JS. Control module configured in the limit of size {test: / \. (PNG | JPG) $/, loader: “url? limit=0” }

• SVG tip: When you use a GIF, the UI will render it to you in SVG format. I’m talking about linear.

3. UI does not allow images to move

This situation is also very common, such as product rendering pictures, such as the new rice wine mobile phone, the poster on the official website

At this time decisive: “boss, take money for me to buy a CDN”.

CDN content delivery network, I’ve heard a popular example of this.

Before buying train tickets we can only go to the train station to buy, and then we can buy train tickets in the downstairs train ticket agent.

You’ll understand it by yourself.

Pay attention here, register the CDN account with the boss do not use their own, or it is not good to quit (I am)

4. Image rendering

• Lazy loading is a cliche, loading only images of visible Windows.
• Preloading is not a matter of preloading the next visual window image, not all, just the next visual window. If you’ve done a waterfall stream, you know that. If you haven’t done it, you can explore it yourself according to this idea.

Iv. Development perspective

Choose a structure that fits the cost of the project

Why? Generally speaking, the project architecture of PC stations is heavy for mobile stations, and the further back we go, especially in the era of jquery, this becomes more and more obvious. To address this issue, many frameworks come in a mobile, lightweight version. Most current UI frameworks do not ask this question, such as ANTD, when packaged, only reference components are packaged into the file, not reference components are packaged into the file. Bootstrap is just the opposite.

I think this is also the reason why responsive projects are gradually GG, and fail to resist the 2G 3G era. I believe that if 5G is popularized, mobile terminal projects will not have to consider the problem of frame size.

However, in terms of cost, there is also a more basic concept. According to the development cycle, theoretically, we use some highly encapsulated open source components to efficiently complete the project with a short development cycle. The downside is that references to highly encapsulated open source components are not convenient for future iterations of requirements. On the other hand, long development cycles are exactly what we want.

2. Reduce the algorithm complexity

What most people around me understand about algorithms:

There's no array I can't handle twice through the loop!

We ended up dealing with 1W pieces of data, and some of the underlying components rendered 100W + times, causing the browser to crash intermittently.

In this case, first of all, from a component perspective, the render interception is not properly handled. ShouldComponentUpdate, similar to React.

Then there is the problem of algorithmic complexity. It’s not optimized.

Just like the most basic search algorithm, you should also know which is better, brute force or dichotomy

Algorithm complexity refers to the resources, including time resources and memory resources, needed by an algorithm after it is written into an executable program.

This is worth a single article to talk about, but I temporarily give a direct recruitment standards of many large companies, Leetcode algorithm question bank, Tencent front end requires Leetcode easy difficulty. You can go brush problems, very helpful.

3. Load on demand

Note: this is not for every project

So what kind of projects are suitable for loading on demand?

For display projects, such as xiaomi’s official website, I need to add a menu and an independent display business every time a mobile phone is released.

So what kind of projects aren’t suitable for loading on demand?

Management system, the system as a whole, intermediate parameters series is too malicious, local development no problem, according to the need to package after thrown into the test environment on all kinds of undefined.

4. Data preloading

In development, you might encounter situations like this. You can use preloading when you don’t need resources right away but want them as early as possible.

Preloading is a declarative fetch that forces the browser to request the resource and does not block the onload event, Preloading can reduce the load time of the first screen to some extent, because it can delay the loading of some important files that do not affect the first screen. The only drawback is poor compatibility.

Another way, let’s say I have two tabs. Typically, the user does not retrieve data until the second TAB is clicked. In fact, when the user mouse up can get the data, click the operation is finished, the data has been requested back. This is also great, but watch the throttling, mouse back and forth, make 10,000 requests, the background will think who attacked the server.

5, caching,

Resource files go cache, no wonder, with a good weapon.

My project is unified, all the files that will not change forever are removed from the cache, put them in public manually hash, other automatic hash under SRC.

Webpack can be configured to control which files hash and which files do not, as well as which files hash and which files do not. You can see that.

END

This year has not arranged the business trip task, but I have a hunch that it will soon, someone asked, why don’t you write articles on business trip? Why don’t we all go out sometime, haha. After a wave of precipitation, I will write 4 articles before the end of March, respectively

• Front-end Performance Optimization Communication
• Front-end Code Quality Optimization Communication
• Front-end Code Monitoring Communication
• Front-end Safety Issues Communication

Take a look at last year’s development process. Thank you.