1. What is the loading time of the first screen?
The loading time of the first screen refers to the time from when the corresponding user enters the URL to when the content on the first screen is rendered. From the user's point of view, it means: "the speed at which the web page is rendered after the URL is entered in the address bar". The entire website does not need to be fully loaded, but it needs to display the content in the current visible window.
2. How to calculate the loading time of the first screen?
Common methods:
- First screen module labeling method
- Count the time of the slowest image loaded on the first screen
- Customize the first screen content calculation method
- With the help of third-party tools (pagespeed, vue-cli, etc.)
In fact, it is very simple and does not require us to calculate it manually. Open the F12 console, and then refresh the web page, where Load is the loading time of the first screen.
3. Reasons for the slow loading speed of the first screen
In the process of page rendering, the factors that lead to slow loading speed may be as follows
- Network delay problem
- Is the resource file size too large?
- Does the resource repeatedly send requests to load?
- When loading scripts, rendering content is blocked
4. Solutions
- Routing lazy loading
Load the route in the form of a function, so that the respective route files can be packaged separately, and the corresponding route component will be loaded only when the given route is parsed.
- Static resource local cache
The front end reasonably uses localStorage, sessionStorage and other cache methods. The interface adopts http cache, and reasonably sets cache-control and other request headers.
- Image Compression
Like some icons, we don’t need to store individual images locally, we can use online font icons instead, or combine multiple icons into one image to reduce the request pressure.
Common dependencies for webpack to process images:
file-loader: In css and html homepages, images with relative paths will be processed and published to the output directory
url-loader: It is the encapsulation of file-loader, so after installing file-loader and url-loader, only configure url-loader in webpack.config.js. The function of url-loader is to give the image a limit standard. When the image is smaller than the limit, use the base64 format to reference the image; otherwise, use the url path to reference the image.
image-webpack-loader: Compress images. This is not used too much, because the UI design can directly compress the pictures in the early stage, such as ps, which can automatically compress pictures in batches.
- reduce duplicate requests
Like some form submissions or long lists, use anti-shake throttling reasonably to reduce unnecessary requests and reduce server pressure.
- UI framework loaded on demand
With the help of babel-plugin-component , we can only introduce the required components to achieve the purpose of reducing the size of the project
- Enable GZip compression
- Code optimization
1. Reasonable use of v-if and v-show
2. When using v-for, set a unique key value for the item
3. Subdivide vuejs components
4. Reduce watch data
- Use SSR server side rendering
SSR (server side render), that is, server-side rendering, components or pages generate html strings through the server, and then send them to the browser.
SSR technology will render the specified asynchronous data on the server and return it to the client, which reduces the pressure on the client to request asynchronous data and renders the page faster.
- Vue can use the Nuxt.js framework to achieve server-side rendering
- React mostly uses technology implementations such as koa2.
- use a CDN
Using CDN mainly solves two problems:
① The packaging time is too long, the code size after packaging is too large, and the request is slow
② The server network is unstable and the bandwidth is not high, so the use of CDN deliberately avoids the problem of server loans