How to optimize the slow loading speed of the first screen?
1: The first screen before answering this question -- > When entering the webpage and sending a network request to obtain resources, the time from no content to the first rendering of the content (of course, there can be no content) is called the first screen
answer:
I think optimizing the first screen speed can be optimized from two aspects
1: Network
When we have a lot of network requests, the browser will increase the rendering speed of the first screen. If a large amount of data requests are slow, this will lead to slower page rendering and reduce network requests.
Reduce network requests
For example: Use the image lazy loading form to only send data requests visible to the user's viewport, which can greatly increase the request speed and further improve the rendering speed.
use cache
Cooperate with the backend for resource caching, such as long-term unchanged logos or quantitatively updated resources can be processed in the form of cache, and the rendering time of the first screen can also be optimized
Accelerate with CDN
Manage resources to ensure server response speed
2: Loading resources
Routing lazy loading
Use the form of route lazy loading to process resources, and then load resources when we need to use them, which can save a lot of loading time for first-screen rendering.
script tag resources are loaded asynchronously
When loading some resources that do not affect the system environment, we can consider using async and defer loading
<script defer async ><script>webpack splitChunks code splitting
Using webpack code splitting to optimize, js can be fragmented, the volume of the first loaded file is greatly reduced, and resources are loaded asynchronously
css compression js compression html compression image compression gzip compression
css can be minicssExtracPlugincompressed by css
js can be compressed by TerserWebpackPlugin | uglifyJsPlugin
html can HtmlMinimizerWebpackPlugin be compressed with
Images can ImageMinimizerWebpackPlugin be compressed by
css style writing specification
Well-written css code is more conducive to browser analysis, and what is said that transform3d can be hardware-accelerated, I don’t think so, when you open a
transform3d is equivalent to opening an extra layer on the webpage. When your layers reach a certain number, the performance will be better than ordinary transform translate
Server-side rendering improves the first screen
Server-side rendering, the background prepares the page structure and data you need to draw globally, and then directly returns the resource file to the front-end, and the front-end only needs to render.
experience
1: Add skeleton screen
2: Add loading animation effect
Summarize
If you can answer these questions, the interview should be enough. The main thing is that everyone should explain each point in detail and clearly, so that you can get the approval of the interviewer. Let's work hard together.
Recommend a practical interview question bank for everyone
1. Front-end interview question bank ( necessary for interview) recommendation: ★★★★★
Address: front-end interview question bank