There’s a 50% chance that every front-end developer in your interview will be asked: How do you do front-end performance optimization? Now, what was my answer?

Reserve knowledge

  • Webpack packaging
  • Server side rendering
  • HTTP cache
  • Browser local cache

Now I will answer from the perspective of the first person and coordinate with the text layout

Interviewer: How do you optimize performance

Me: I’ve made some summaries about front-end performance optimization, including three:

  1. Optimization on first access (making the first load faster);
  2. Optimization on the NTH access (caching already accessed resources);
  3. Let users feel fast, very smooth (through interactive means to optimize the experience);

What are the first ways to access optimizations?

  1. Compress resources through Webpack
  2. Resource splitting via Webpack
  3. Image/icon resource processing
  4. Server side rendering

Me: When I first visited the site, the main purpose of our optimization was to [speed up rendering]. Generally, we would use Webpack to compress or split files with large resources. Generally, uglifyJS can be used to compress JS files to make the file size smaller.

Me: If the file is still large at this point, we can also use the Webpack plugin to split the third-party library (don’t need to remember the name, just know that the plugin is there).

Me: As for resources such as pictures and ICONS, they can also be configured in Webpack, and files of a certain size can be converted to Base64, or ICONS can be rendered using Ali’s font icon library

If you want to do SEO optimization, you can also use server-side rendering to speed up the rendering of the first screen;

Resource compression and splitting

  • Browser local cache
  • HTTP cache
  • indexDB
  • Service workers

1. Use webPack to compress (HTML, JS, CSS) resources

  • Compression of HTML: HtmlWebpackPlugin
  • Uglifyjs-webpack-plugin is used to compress JS
  • Optimize – CSS -assets-webpack-plugin
  • In addition to using plug-ins, you can also enable GZIP on the server for resource compression

2. How do I split resources?

  • Compress through webPack plug-ins: CommonsChunkPlugin, Dllplugin, DllReferencePlugin, SplitChunksPlugin (webPack4 built-in)
  • Asynchronous load import of routes (/* webpackChunkName: name∗/{name} */ name∗/{path})

3. Image/icon resource processing

  • Images of a certain size range are processed into Base64 through Webpack
  • Icon class picture, can use Ali iconfont processing for font icon
  • Sprite (older method, not recommended)

4. Server rendering

  • Return the rendered page directly from the server without waiting for the page to load JS
  • SEO optimization

What are the ways to optimize the NTH access?

Me: In general, if you want to speed up access to pages/resources that have been visited later, you can think of ways to use caching or local storage;

Me: The front end itself we can use localStorage or sessionStorage through different business logic

I: how to involve the service side, we also can use HTTP caching, generally there are two ways, one is strong buffer cache, the other is a negotiation, strong cache cache priority is higher than negotiation, we can go through the relevant key Settings cache time (so many attributes may not remember, but must know this thing)

In addition to local storage and HTTP caching, try using indexDB for front-end data storage

In addition to indexBD, Service Workers can also be used as a caching scheme

Portal to Help everyone:

The use of localStorage

The use of the sessionStorage

Thoroughly understand strong and negotiated caches

HTTP interviews are a must: mandatory caching and negotiated caching

IndexedDB

Service worker concepts and usage

How to make users feel fast

  • Skeleton screen, lazy loading
  • Loading optimization
  • Anti-shake and throttling
  • Etc etc.

Me: It makes the user feel fast. As the name implies, it does not actually improve the speed, but optimizes the user experience. I can use skeleton screen, lazy loading, reasonable loading, anti-shake, throttling (reduce unnecessary requests) and other ways to make the user’s waiting more comfortable

These are the common answers I used to answer performance optimization questions in interviews. From these answers, you can also derive webpack questions, HTTP cache questions, HTTP/HTTPS questions, closure questions, etc