Vue white screen optimization (defer)

VUE uses defer to optimize the white screen

---

---

foreword

When it comes to VUE project optimization, a common topic is the white screen problem on the homepage. Of course, there are many reasons for the white screen. We have to deal with it flexibly according to different situations. Here I just point out one of the usage scenarios and one of the optimization methods. This optimization method is relatively unpopular. I believe many students may not know it, but it is super easy to use! ! !

---

1. Scene recurrence?

    I imported a component here, loaded a thousand small icons in the component, looped 20 times, and re-rendered the component once every loop, and there will be a white screen time when the page is loaded. This kind of page has a lot of elements, especially the page with dense elements displayed on a large screen will take longer to load in total.

<template>
  <div class="hell"  v-for="index of 20">
    <HelloWorld
      :key="index"
      class="hell"
    />
  </div>
</template>

If you run the above code, you will find that the page has a long white screen, and then display the page at one time, and use the debugging tool set of Google Chrome to record and perform performance analysis to get the following analysis results. From the figure, you can see that it takes more than four seconds in total, and js is executed for three seconds. Such a page is completely unacceptable to users, so how to optimize it.

Two, the main ideas

Let components render in batches part by part

    Since the pressure of rendering browsers together is too great, find a way to share the pressure. Render part of it first to ensure that users can see it, and then continue to render the rest. Although the total time will not change much, and may even increase, as far as the user's perception is concerned, the period from when the user opens the page to seeing the page view for the first time is greatly reduced.

3. Specific code

The code is as follows (example):

<template>
  <div class="hell"  v-for="index of 20">
    <HelloWorld v-if='defer(n)'
      :key="index"
      class="hell"
    />
  </div>
</template>

    The page rendering timeline is divided into many small time periods, which are rendered every 16 milliseconds. defer(n) indicates whether the number of currently rendered frames exceeds n, for example, 20 passed in n, which means that when the rendered frame reaches the first frame, defer(n) returns false, the second frame and the third frame are all, and it returns true until the 20th frame is reached. Because of the v-if used, this component will be rendered and displayed at this time.

---

function encapsulation

export function defer(maxFrameCount = 1000) {
    
    
    const frameCount = ref(0);
    const refreshFrameCount = () => {
    
    
        requestAnimationFrame(() => {
    
    
            frameCount.value++;//计数帧数加一
            if (frameCount.value < maxFrameCount) {
    
    
                refreshFrameCount();//只要没到最大帧数就一直持续调用函数
            }
        });
    };
    refreshFrameCount();
    return function (showInframeCoount) {
    
    
        return frameCount.value >= showInframeCoount;//判断当前渲染帧数又是否大于自定义n
    }
}

Although the overall time has not changed much, the time from loading the page to when the user sees the page for the first time has been greatly shortened. After further analysis, we can see that the rendering process has changed to rendering piece by piece and frame by frame, which avoids the page being stuck in a white screen for a long time. Every time the user renders, the user can see the rendering result, which is similar to the fiber of react, and the knight is the same.

Summarize

This classic optimization scheme is just the tip of the iceberg in vue optimization. I hope everyone can learn together and make progress together.