Vue の白い画面の最適化 (延期)

VUE は遅延を使用して白い画面を最適化します

---

---

序文

VUE プロジェクトの最適化に関してよく話題になるのは、ホームページの白い画面の問題です。もちろん、白い画面にはさまざまな原因があります。さまざまな状況に応じて柔軟に対処する必要があります。ここでは、使用シナリオの 1 つと最適化方法の 1 つだけを指摘します。この最適化方法は比較的人気がありません。知らない学生も多いと思いますが、使い方は非常に簡単です。！！

---

1. シーンの再現?

    ここにコンポーネントをインポートしました。これは、1,000 個の小さなアイコンをロードし、20 回ループし、ループするたびにコンポーネントを再レンダリングしました。ページがロードされると、白い画面時間が発生することは明らかでした。この種のページは要素が多く、特に要素が密集したページを大きな画面に表示すると、トータルの読み込みに時間がかかります。

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

上記のコードを実行すると、ページに長い白い画面があることがわかり、ページを一度に表示し、Google Chrome のデバッグ ツール セットを使用して記録およびパフォーマンス分析を実行すると、次のような分析結果が得られます。図から、合計 4 秒以上かかり、js の実行に 3 秒かかることがわかります。このようなページはユーザーにはまったく受け入れられないので、どのように最適化するか。

2、主なアイデア

コンポーネントを部分ごとにバッチでレンダリングできるようにする

    ブラウザーを一緒にレンダリングするプレッシャーは大きすぎるため、プレッシャーを共有する方法を見つけてください。最初にその一部をレンダリングしてユーザーが確実に見えるようにし、その後残りのレンダリングを続けます。合計時間はあまり変わりませんが、ユーザーの知覚に関する限り、ユーザーがページを開いてから初めてページ ビューが表示されるまでの時間は大幅に短縮されます。

3. 具体的なコード

コードは次のとおりです（例）。

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

    ページ レンダリング タイムラインは、多くの小さな期間に分割され、16 ミリ秒ごとにレンダリングされます。defer(n) は、現在レンダリングされているフレームの数が n を超えているかどうかを示します。たとえば、n に渡された 20 は、レンダリングされたフレームが最初のフレームに達すると、defer(n) は false を返し、2 番目のフレームと 3 番目のフレームはすべて、20 番目のフレームに到達するまで true を返します。v-if が使用されているため、このコンポーネントはこの時点でレンダリングおよび表示されます。

---

関数のカプセル化

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
    }
}

全体的な時間はあまり変わりませんが、ページの読み込みからユーザーが最初にページを表示するまでの時間は大幅に短縮されました。さらに分析すると、レンダリング プロセスが 1 つずつ、フレームごとにレンダリングするように変更され、ページが白い画面で長時間スタックすることがなくなりました。ユーザーがレンダリングするたびに、ユーザーはレンダリング結果を見ることができます。これは React のファイバーに似ており、ナイトも同じです。

要約する

この古典的な最適化スキームは、vue の最適化における氷山の一角にすぎません。皆さんが一緒に学び、一緒に進歩できることを願っています。