[Interview Question] When the interviewer asks you about front-end performance optimization, what does he want to ask?

Front-end performance optimization has always been a hot topic examined during the interview process.

There are endless related technical blogs, and we can always find many such articles.

Start analyzing every aspect of an application, the various means of optimization, and the various effects achieved.

Often the longer it is and the more detailed it is, the more popular it is.

However, during interviews, when asking such questions, candidates often give unsatisfactory answers. Most people will recite the optimization measures they can think of.

The more you memorize, the better. For the candidates themselves, they feel guilty. After memorizing, the interviewer has no expression because this is not the answer they want.

Let’s think about it from the interviewer’s perspective.

 Front-end interview question bank ( essential for interviews) Recommended: ★★★★★            

Address: Front-end interview question bank

 My cousin made her own five-star red flag National Day avatar with just one click. It’s super nice.

What is the interviewer looking for?

• This easily examines the breadth and breadth of a candidate's skills.

• • You can ask about your understanding of the boundaries of front-end knowledge from the network level, packaging level, and rendering level.
  • You can also conduct an in-depth investigation on one aspect, such as http2, tcp head-of-line blocking problem, webpack subcontracting strategy, etc.

• Examine a person's ability to do things and the way he thinks.

• • If it has been done, how was it implemented, how did it cooperate with other departments, what problems were encountered, and how were they solved.
  • If you haven't done it, how will you plan and promote this matter?

• This will not leave the candidates with nothing to say.

• • During the interview process, it is easy to fall into an embarrassing situation where the interviewer cannot ask the question and the candidate cannot answer the question. This kind of performance optimization question can give both parties something to say.

Of course, interviews are a metaphysics. In fact, during the interview process, the focus of technical questions will be different depending on the status of the interviewer.

So as a candidate, how should you answer to stand out?

How did the candidate respond?

First of all, the first question is, have you done it before?

Just answer truthfully. If you have done it before, talk about the process of doing it. If you have not done it before, talk about how you plan to do it.

The big principle is: bring a little breadth and highlight depth.

We need to classify the two situations and discuss them.

if done

Or you have to pretend you did.

Clear scope

Then you need to clarify the scope of scenarios you want to optimize the front-end, or what type of application you want to optimize.

• A toC pure H5, used in browsers and WeChat
• A toB system, or an internal operating system
• Hybrid used in embedded apps
• Company official website
• Cross-end applications, small programs, etc.

Each of the above categories of optimization methods requires different measures and methods according to the scenario.

In the process of answering, it is necessary to clarify this basis.

For example, for an offline loading h5, the benefits of offline loading should be highlighted from the network level, rather than the optimization of resource volume.

clear goal

Performance optimization requires a goal, and this goal must be a quantitative data.

This examines the candidate's grasp of front-end page performance data.

For example, for frequently asked questions, how do you set goals during the optimization process, or how do you troubleshoot blocking problems?

This question is actually asking you how to collect page data.

There are two types of performance data collection

• Laboratory performance data collection

• • Google's lightHouse helps us analyze the six attributes of the page
  • First contentful paint First content painting (FCP)
  • Largest contentful paint Largest contentful paint (LCP)
  • First input delay First input delay (FID)
  • Time to Interactive Time to Interactive (TTI)
  • Total blocking time Total blocking time (TBT)
  • Cumulative layout shift Cumulative layout shift (CLS)

• • Google Chrome's performance panel performs specific link blocking analysis.

• Online real data collection

• • Online access to web-vitals for user data collection
  • Connect to some third-party SDKs such as sentry to collect performance data

set a strategy

In the process of analyzing the entire front-end page performance optimization link, we need to find a blocking point, or entry point.

Take the scene of nesting h5 in webview in an app

We need to find out which stages it has gone through from the time the user clicks to jump to the display, and which stage takes how long, which has become the main problem blocking the page, and then talk about what optimizations have been implemented to address the problem.

For example, in the following question, users reported that the white screen takes too long to open the H5 page in the APP. How should you deal with it?

We cannot answer that the user's network is not good.

There are also optimization methods to address this problem:

1. For WebView initialization: When the client just starts, you can initialize a global WebView in advance and hide it for use.
2. For sending interface requests to the backend: When the client initializes the WebView, the Native directly starts the network request for data. When the page initialization is completed, the data requested by its proxy is obtained from the Native.
3. Dynamic splicing of HTML for loaded js (single-page application): multi-page packaging, server-side rendering, and pre-rendering during construction can be used.
4. Regarding the size of the loaded page resources: You can use lazy loading and other methods to separate the parts that require larger resources, and then asynchronously request the separated resources after the entire page is rendered to improve the overall page loading speed.

Of course, I am just giving an example. You still need to highlight the key points when answering.

If you have a good grasp of the network, let’s talk about network level optimization.

If you are familiar with packaging tools, let’s talk about volume level optimization.

If you are familiar with browsers, let’s talk about optimization at the rendering level.

If you are familiar with all three aspects, you probably won’t read this article.

If you haven't done it

If you haven’t done it, you must have understood it.

If you don’t understand, read this article.

Answer mainly from three aspects

transmission

• Use CDN to cache static resources.

• • So what is CDN back-to-origin and preheating?
  • What is the difference between using a CDN and not using a CDN?
  • How to determine whether the current resource hits the CDN?
  • How do you use CDN in your project?

• Using http2, multiplexing features, header compression, request priority

• • How does http2 solve the header blocking problem of http1.1?
  • Has http2 completely solved the head-of-line blocking problem? What other problems does he have?
  • How to configure nginx to make it effective
  • Do you know about http3?

• Take advantage of browser caching strategies

• • The difference between strong caching and negotiated caching
  • How to configure cache fields in nginx
  • Sub-package loading, how to avoid one line of code modification causing the cache of the entire bundle to become invalid

volume

• Turn on gzip compression and process text resources

• • In addition to gzip compression, what other compression schemes are there?
  • How to configure gzip compression

• Compress JS resources

• • How to compress js resources and what libraries are available.
  • What is the difference between compressed code and uncompressed code?
  • What are the differences between sourcemap online environment, test environment and local environment?

• Image size optimization

• • Use webp format to replace the original png/jepg

• On-demand loading and on-demand packaging of third-party libraries

• • How to support tree-shaking in compiled code?
  • What were the problems before on-demand packaging?

rendering

When it comes to rendering, we need to understand the rendering process and how our front-end code is displayed in the browser.

• Parse html into DOM tree
• Parse from CSS to CSS tree
• Combine DOM trees and CSS trees to merge rendering trees
• Determine the location layout information of the DOM tree based on the rendering tree
• Then render each node in the browser

Therefore, it is necessary to reduce the number of renderings, which is what we call redrawing and rearranging.

Speed ​​up the parsing of html and css.

In fact, there are many points that can be expanded upon, and it needs to be analyzed based on specific scenarios.

• Preloading of critical resources and delayed loading of non-critical resources

• • The difference between preload and prefecth
  • The difference between async and defer
  • dns-prefetch is used to pre-resolve domain names.

• Request caching to avoid repeatedly requesting the interface when switching pages in the short term

• • Where is the cache? Do you know what caching methods are available and which caching method should be used?

• Anti-shake and throttling to reduce rendering times.

• • Explain the usage scenarios of anti-shake throttling
  • Otherwise, write an anti-shake function by hand

at last

In fact, I didn’t say the answers to any questions in the article.

It just provides an idea. Following the idea of ​​performance optimization, we can learn about computer network knowledge, browser caching, nginx configuration, webpack subcontracting strategy, page parsing and rendering, image optimization, and offline Loading knowledge.

If you want to answer this question well, you should still find one or two aspects to study in depth.

 Front-end interview question bank ( essential for interviews) Recommended: ★★★★★            

Address: Front-end interview question bank

 My cousin made her own five-star red flag National Day avatar with just one click. It’s super nice.