2019 Front-end Performance Optimization Solution directory

🔥 preface

Front-end performance optimization is an old topic that almost every programmer in his or her first two or three years will encounter in an interview. The projects differ, but the ideas are similar. This paper is to do a sort of front-end performance optimization of the previous project, but also hope to help friends in the community.

Project status

Currently doing project (a visualization platform, if you have learned about flying ice and draft, probably more complicated than the two a level) is very large and complex, the front is divided into 10 several engineering, is divided into the development state and operation state, through the soft links rely on each other, a total of nearly 2 million lines of code, can be divided into two phases, the user to use after a period of transition, A number of issues were exposed, including performance issues.

Question:

Open the console, switch Online in Network to Fast3G, click “Performance” on the console, click the “refresh” button, and observe the white screen time. The white screen time takes 5s for common pages and 14s for complex pages

  • White screen time:Enter the url in the address bar and press Enter - the first element appears in the browser
  • First screen Time:Enter the url in the address bar and press Enter - browser first screen rendering complete

Analysis of the

  • The compiled framework package is too large
  • The framework has too much initial loading data and cumbersome logic
  • Initialization loads all resources
  • The data returned by the server is too large and redundant
  • The front-end does not use service caching

plan

1. Initialize the page and add the Loding diagram

This doesn’t actually optimize load times, but improves the user experience.

2. Reduce HTTP requests and redundant data

The front-end requests different resources through four interfaces when initializing the edit window. The four interfaces are changed into one interface through negotiation with the back-end, and the returned data is deleted to return only the data used by the front-end.

3. Components and routes are loaded lazily

Split the page. Load sharing

4. Configure Nginx optimization

  • Set productionGzip in config/index.js to true in vue-cli2 scaffolding

    location { gzip on; / / turn on the compressed gzip_typestext/htmltext/plaintext/CSS; // Specify the type of file to compress. The default is text/ HTML gzip_min_length 512. // Minimum file size to compress in bytes}Copy the code

  • Optimized cache allocation Nginx uses caching to store requests and returned data. Optimized cache allocation can save memory space and reduce CPU usage. You can cache commonly used JS, CSS, and images in the browser for a long time. In this way, after users open a page for the first time, the above content will be cached locally, which improves the loading speed of later pages and saves a lot of bandwidth on the server.

  • Configuring a Whitelist

5. Optimize wePack packaging

Use the plug-in Webpack-bundle-Analyzer to view all packages and volume sizes for your project

  • Simplify packaging code, compress code

    purifyCSPackage optimization to redo invalid code

    UglifyJsPluginCompress js files to reduce the size of JS files and speed up load.Pay attention toThis plug-in can slow down webPack compilation and is recommended to be turned off during development and turned on during deployment.

    Tree ShakingRemove unused code. Such functionality is great for building large applications
  • Dependency import on Demand Remove redundant dependencies. For example, iView UI uses import on demand
  • The code of the subcontract
  • Go unless necessary documents

6. Use the CDN

The main function of CDN is to cache content in different places. Through load balancing technology, users’ requests are directed to the most appropriate cache server to obtain content

7. Pre-rendered

Compared with SSR, pre-rendering is simpler and can greatly improve the speed of web access. No server real-time dynamic compilation, pre-rendering, simple static HTML files for specific routes at build time using prerender-SPa-plugin

8.ssr

Client-side rendering: also known as front-end rendering, originated from the rise of JS, Ajax makes front-end rendering more mature, front-end focus on UI, back-end focus on logic, in a real sense to achieve the separation of the front and back end, through the agreed API to interact, back-end to provide data, front-end according to the data generated DOM insertion HTML pages. The first rendering is mostly to replace the original HTML data mark {{}}, right click the mouse to view the source code, page code can not be seen in the source code, performance consumption in the client

Advantages: reduce server pressure, can realize local refresh, no need to request a complete page every time, better experience disadvantages: front-end time-consuming, slow rendering of the first screen, before rendering to download a pile of JS and CSS files, not conducive to SEO, crawler can not see the complete code

Server-side rendering: Also known as back-end rendering, the server fills the HTML with data in specific areas and symbols before returning the HTML to the client, who is only responsible for parsing the HTML. Page code is visible in the source code when you right-click to view the source code. Performance consumption is on the server side. When the user reaches a certain level, the backend will consider caching part of the data to avoid excessive resource consumption and repeated rendering.

Advantages: Less front-end time, fast rendering for the first time, faster content arrival time, conducive to SEO Disadvantages: large amount of network data transmission, occupying part of the server computing resources, poor user experience, not easy to maintain, front-end modification of part of the HTML/CSS back-end also need to change

9. Transfer the image to Base64

The urL-loader in wepack converts images that are not set or smaller than limi to the base64 format used by img SRC. File -loader is used to parse images larger than limit byte.

10. Background distributed deployment and load balancing

conclusion

The above is the most common front-end optimization scheme, more details are not written, please refer to other articles, each point extension can be used as a separate article to in-depth understanding, this article only as a reference directory.