First of all, why would the home page load white screen?

Let’s start with the loading process of the SPA single page

The first is the HTML, or FP phase

FP (” First Paint “) is the First “point in time” on the timeline, and it represents the time when the browser First transmitted pixels to the screen, which is the time when the page First visually changes on the screen.

Note: FP does not include default background draws, but does include non-default background draws.

<div id="app"></div> 
Copy the code

At the point after the navigation when the page first renders something different from the pre-navigation content, something comes back to render on the page

Then the static resources CSS, JS, and then parse JS to generate HTML, which is the FCP phase, CSS, JS resources loaded down, the first content drawing, there is a big structure

FCP (which stands for “First Contentful Paint”), as the name suggests, represents the First time the browser draws “content” to the screen.

Note: Only the first time you draw text, images (including backgrounds), non-white Canvas or SVG is counted as FCP.

Differences between FP and FCP

The main difference between FP and FCP is this: FP is when the browser starts drawing content onto the screen, and as soon as the visual change begins to occur, whatever the content triggers the visual change, at that moment, at that point in time, it’s called FP.

By contrast, FCP is when the browser first draws content from the DOM. For example: text, images, SVG, Canvas elements, etc., this point in time is called FCP.

<div id="app">
  <div class="header"></div>
</div>
Copy the code

Let’s say we have a header div in the root of our app

At the end of the day, it’s FMP, it’s Ajax request data, it’s the first time it’s effectively drawn, so the page is almost loaded, but maybe the image hasn’t been loaded yet

FMP refers to the point in time when the “main content” of the page begins to appear on the screen. It is our primary measure of user loading experience.

FMP essentially uses an algorithm to guess that a point in time might be FMP, so sometimes it’s inaccurate.

For more information on FMP and how it works, see this article: How to Capture FMP.

Conclusion:

The process from FP to FMP is all white, and maybe if your header has a big background color, that background color will come out, and then after Ajax, we’ll actually parse our data and put it in our HTML tag

As shown in the figure below:

Have to say to solve the first screen loading slow way, I summed up 10!

1. The pre-rendered

Pre-render is when webPack is packaged and rendered through a headless browser

Headless browsers, when packaging, can put the contents of your index.html into your browser, but your browser is blank, and then load the index.html directly when you enter the page, but there is no Ajax request

Take the pre-rendered HTML content of the page, put it in index.html, then go to the CDN, and request the HTML directly (equivalent to FMP being advanced to FP), which is more like another skeleton screen with less Ajax requests

But since we can only add dead data, but not ajax request data rendering to the home page, how to solve?

We can do that in app.vue

<div id="header"></div>
Copy the code

For example, you want to put an Ajax request inside this header tag

You can add data to it directly in the script

document.querySelector('#header').html('... ')Copy the code

2. The isomorphism

What is isomorphic rendering, is a set of code multiterminal use

Now there are some frameworks, Next, Nuxt, similar to rendering is vue- > JSON -> Vue-server-renderer -> HTML

3.SSR

Server rendering can also solve the problem of slow first screen loading because the server will render all the data before returning it to the client

SSR => request ->node-> parse -> return to client

But there is a big problem, and the important one is the Node layer, where high concurrency is solved

4. Routes are loaded lazily

This plug-in is available via plugin-syntactic -dynamic-import

Vue.component('async-component',(resolve)=>{
  import('./AsyncComponent.js')
  .then((AsyncComponent)=>{
    resolve(AsyncComponent.default)
  })
})
Copy the code

But now it seems that lazy route loading can be implemented directly through the arrow function

const app = () =>import('')
Copy the code

5.quicklink

Quicklink specifies which data to load when the browser is idle. This is Google open source, so check it out

6. Use Gzip compression to reduce the file size and speed up the opening of the first screen

If the server has gZIP enabled

What needs to be done on the front end

npm i compression-webpack-plugin -D
Copy the code

vue.config.js

const CompressionPlugin = require("compression-webpack-plugin") module.exports = { configureWebpack: () => { if (process.env.NODE_ENV === 'production') { return { plugins: [ new CompressionPlugin({ test: /. Js $|. HTML $|. CSS $|. JPG $|. Jpeg $|. PNG /, / / threshold need compressed file type: DeleteOriginalAssets: false, // Whether to delete the original file minRatio: 0.8})]}}}}Copy the code

7. Link CSS and JS files

Most of the time, we import UI libraries or CSS files directly in main.js, which can be imported later in index.html via script, so that it is not packaged through our WebPack

8.webpack entry

For example, in some components, vue.js vue-router and other plug-ins are already in use on a page, and then they are cached so that they do not need to be loaded next time

9. The skeleton

A skeleton screen is when you go into the FP phase of your project, you give it a kind of outline, and then it disappears when your page loads. This is easy to do, too. A lot of UI libraries have this, so you can look at it

10.loading

Loading the front page is probably the most primitive method. Add a loadingCSS effect to the index.html, and when the page is loaded, it will disappear

Refer to the article

Vue home page loading white screen reasons and 10 ways to solveAdvanced Giant 001 blog -CSDN blogVue loads a white screen for the first time

Common terminology in Web performance field – Zhihu.com

Recommend the article

VUE first screen to make a loading lodaing animation – Jianshu.com

Skeleton screen gameplay you can’t possibly know 🐶 (juejin.cn)