Learning notes

Front-end performance optimization can mainly start from the following three points:

1. Faster network communication

Server communication layer

  • CDN

    • Global load balancing
    • Caching system

  • Reduce requests

    • Resources combined

Data transmission layer

  • Cache: Browser cache

    • Strong cache
      • cache-contorl: max-age=30
      • expires: Wed, 21 Oct 2021 07:28:00 GMT

  • Negotiate the cache

    • etag
    • last-modified
    • if-modified-since
    • if-none-match

  • The compression

    • Data compression: gzip
    • Code file compression: HTML/CSS/JS in comments, Spaces, long variables, etc
    • Static resources: font ICONS, metadata removal, size reduction and resolution
    • Head and message
      • Reduce unnecessary headers in http1.1
      • Reduce cookie data volume

The code level

  • The WebPack packaging layer
    • Out of style
    • Js compressed
    • Image compression
    • Use iconFont vector drawings
    • DLL dynamic link library file is introduced, and the pre-packaged resource package is not changed frequently, such as: vue/vuex/ vue-router/ant- Design
    • Multiple entry packing
  • The technical level
    • The front-end route is loaded lazily
    • Lazy data loading
    • Virtual list

Second, more efficient data processing

  • Http2
    • Header compression: specialized HPACK compression algorithm
      • Index table: a table jointly maintained by the client and the server. The content of the table is divided into a 61-bit static table (storing common information, such as host/content-type) and a dynamic table
      • Hoffmann coding
  • Link to reuse
    • Http1 established a Tcp connection, after sending a request, the server in the processing of the request waiting period, this period and no data to send, known as the neutral period. The link breaks after the server response is backtracked
      • Keep-alive links stay alive for a period of time
      • HTTP2 can take advantage of the gap
      • There is no need to repeat the link
  • Binary frame
    • Http1.1 text character – separated data stream, parsing slow and error – prone
    • Binary frame: frame length, frame type, and frame id

Add: With Http2, resource merging operations can be reduced because header compression has reduced the amount of data transferred across multiple requests

Third, the choice of the framework

  • SSR server side rendering
    • Nuxt.js
    • Next.js
  • SPA single page application
  • SSG Static site generation scheme

Interview Reference answers:

  • There are many ways to optimize web type applications, but there are two broad categories
  • From the loading side, we can…
  • At the executive level, we can use…

References:

b23.tv/LQDhwc

Finally, good good study will not be bad, I am your navigator, we make progress together!