Vue プロジェクトの最初の画面のパフォーマンス最適化コンポーネントの実践ガイド

Vue ファーストスクリーンパフォーマンス最適化コンポーネント

Vue ファーストスクリーンパフォーマンス最適化コンポーネントを実装するだけです。最新のブラウザは多くの新しいインターフェイスを提供しています。 IE との互換性を考慮せずに、これらのインターフェイスを使用すると、コードの作成とパフォーマンスの最適化にかかる作業負荷を大幅に軽減できます。もちろん、IE を考慮するために、コンポーネントをカプセル化するときに IE のバックアップを提供することもできます。この記事のファーストスクリーンパフォーマンス最適化コンポーネントは、主に IntersectionObserver と requestIdleCallback の 2 つのインターフェイスを使用します。

説明する

まず、最初の画面のシナリオを考えてみましょう。表示を主な目的とした最初の画面を作成する場合、通常は画像などのリソースがさらに読み込まれます。ユーザーが開いたときにすべてのリソースを読み込むのではなく、コンポーネントを読み込む前にユーザーが関連する位置までスクロールするようにしたい場合は、IntersectionObserver インターフェイスを選択できます。もちろん、onscroll イベントを使用してリスナーを実行することもできますが、パフォーマンスが低下する可能性があります。ロードする必要があるコンポーネントもありますが、ページの初期化時に同期的にロードされないようにする必要があります。この方法では、Promise や setTimeout などの非同期メソッドを使用できます。ただし、このコンポーネントのロードの優先度を下げたい場合は、requestIdleCallback インターフェイスを検討できます。関連するコードは、https://github.com/WindrunnerMax/webpack-simple-environment の vue--first-screen-optimization ブランチにあります。

インターセクションオブザーバー

IntersectionObserver インターフェースは、Intersection Observer API に属し、ターゲット要素とその祖先要素または最上位ドキュメントビューポートとの交差状態を非同期的に監視する方法を提供します。祖先要素とビューポートはルートと呼ばれます。つまり、IntersectionObserver API は要素が表示されているかどうかを自動的に監視できます。表示の本質は、ターゲット要素とビューポートが交差領域を生成することであるため、この API は交差オブザーバーと呼ばれます。互換性 https://caniuse.com/?search=IntersectionObserver。

const io = new IntersectionObserver(コールバック、オプション);

// 観察を開始します io.observe(document.getElementById("example"));
// 監視を停止します io.unobserve(element);
// オブザーバーを閉じます io.disconnect();

パラメータ callback は新しい IntersectionObserver オブジェクトを作成します。ターゲット要素の表示部分が 1 つ以上のしきい値を超えたことを検出すると、指定されたコールバック関数が実行されます。
パラメーターオプション、IntersectionObserver コンストラクターの 2 番目のパラメーターは構成オブジェクトであり、次のプロパティを設定できます。
- しきい値属性は、コールバック関数がいつトリガーされるかを決定します。これは、各メンバーがしきい値である配列です。デフォルト値は[0]で、交差率が0に達したときにコールバック関数がトリガーされることを意味します。ユーザーはこの配列をカスタマイズできます。たとえば、[0、0.25、0.5、0.75、1]は、対象要素が0％、25％、50％、75％、100％表示されたときにコールバック関数がトリガーされることを意味します。
- root 属性は、ターゲット要素が配置されているコンテナノード、つまりルート要素を指定します。ターゲット要素はウィンドウとともにスクロールするだけでなく、iframe ウィンドウ内でのスクロールのようにコンテナ内でもスクロールします。この場合、root 属性を設定する必要があります。コンテナ要素は、ターゲット要素の祖先ノードである必要があることに注意してください。
- rootMargin属性はルート要素の余白を定義します。これはrootBounds四角形のサイズを拡大または縮小するために使用され、それによってintersectionRectの交差領域のサイズに影響を与えます。これは10px 20px 30px 40pxなどのCSS定義方法を使用し、上、右、下、左の方向の値を表します。
IntersectionObserver.root プロパティは読み取り専用で、監視対象オブジェクトの特定の祖先要素を参照します。値が渡されないか、値が null の場合、デフォルトで最上位のドキュメントウィンドウが使用されます。
IntersectionObserver.rootMargin プロパティは読み取り専用です。これは、交差を計算するときにルート境界ボックスに追加される長方形のオフセットです。これにより、計算のニーズに合わせてルート決定範囲を効果的に縮小または拡大できます。このプロパティによって返される値は、コンストラクターの呼び出し時に指定された値と異なる場合があるため、内部要件に合わせて値を変更する必要がある場合があります。すべてのオフセットは、ピクセル (px) またはパーセンテージ (%) で表すことができます。デフォルト値は 0px 0px 0px 0px です。
IntersectionObserver.thresholds プロパティは読み取り専用で、しきい値を昇順で含むリストです。リスト内の各しきい値は、リスニングオブジェクトの交差領域と境界領域の比率です。リスニングオブジェクトのいずれかのしきい値を超えると、通知 Notification が生成されます。コンストラクターに値が渡されない場合、デフォルト値は 0 です。
IntersectionObserver.disconnect() メソッドは、IntersectionObserver オブジェクトの監視を停止します。
IntersectionObserver.observe() メソッドにより、IntersectionObserver はターゲット要素の監視を開始します。
メソッド IntersectionObserver.takeRecords() は、監視対象のすべてのターゲットの IntersectionObserverEntry オブジェクトの配列を返します。
IntersectionObserver.unobserve() メソッドは、IntersectionObserver による特定のターゲット要素の監視を停止します。

さらに、コールバック関数が実行されると、次の情報を提供する IntersectionObserverEntry オブジェクトパラメータが渡されます。

time: 可視性が変化する時間。ミリ秒単位の高精度のタイムスタンプです。
target: 監視対象のターゲット要素は DOM ノードオブジェクトです。
rootBounds: getBoundingClientRect メソッドの戻り値である、ルート要素の矩形領域に関する情報。ルート要素が存在せず、ビューポートに対して直接スクロールする場合は null が返されます。
boundingClientRect: 対象要素の矩形領域に関する情報。
intersectionRect: ターゲット要素とビューポートまたはルート要素間の交差領域に関する情報。
intersectionRatio: ターゲット要素の可視比率、つまり、intersectionRect と boundingClientRect の比率。完全に可視の場合は 1、完全に不可視の場合は 0 以下になります。

{
  時間: 3893.92、
  ルート境界: クライアントRect {
    下: 920、
    高さ: 1024,
    左: 0,
    右: 1024、
    上: 0,
    幅: 920
  },
  境界クライアント矩形: クライアント矩形 {
     // ...
  },
  交差点矩形:クライアント矩形{
    // ...
  },
  交差比率: 0.54、
  ターゲット: 要素
}

リクエストアイドルコールバック

requestIdleCallback メソッドは、ブラウザのアイドル期間中に呼び出される関数を受け入れることができます。これにより、開発者は、アニメーションや入力応答などの遅延されたキーイベントに影響を与えることなく、メインイベントループでバックグラウンドおよび低優先度の作業を実行できます。関数は通常、先入れ先出しの順序で実行されます。コールバック関数で実行タイムアウトが指定されている場合は、タイムアウト前に関数を実行するために実行順序を乱すことが可能です。互換性 https://caniuse.com/?search=requestIdleCallback。

const ハンドル = window.requestIdleCallback(コールバック[, オプション]);

requestIdleCallback メソッドは ID を返します。この ID を window.cancelIdleCallback() メソッドに渡すと、コールバックを終了できます。
パラメータ callback は、イベントループがアイドル状態のときに呼び出される関数への参照です。この関数は、IdleDeadline というパラメータを受け取ります。このパラメータによって、現在のアイドル時間と、タイムアウト前にコールバックが実行されたかどうかを取得できます。
パラメータオプションはオプションであり、次のプロパティを持つオプションの構成パラメータが含まれます。
- timeout: timeout が指定され、正の値を持ち、timeout ミリ秒が経過してもコールバックが呼び出されなかった場合、パフォーマンスに悪影響を与える可能性がある場合でも、コールバックタスクはイベントループのキューに入れられます。

成し遂げる

実際、コンポーネントの作成では、主にこれら 2 つの主要な API の使用方法を理解する必要があります。まず、IntersectionObserver に注目しましょう。動的コンポーネント <component /> を使用する必要があるため、これに値を渡すときに、非同期コンポーネント読み込み () => import("component") 形式を使用する必要があります。リスニングする場合、読み込みが完了したらリスナーを破棄するか、視覚領域を離れたら破棄するかなどが考えられます。これは主に戦略的な問題です。ページが破棄されると、メモリリークを防ぐために Intersection Observer を切断する必要があります。 requestIdleCallback の使用は比較的簡単です。Promise.resolve().then の非同期処理に似たコールバック関数を実行するだけです。

簡単な実装ロジックを以下に示します。通常、オブザーバーの使用方法は、まず div をプレースホルダーとして使用し、次にオブザーバーでプレースホルダーのコンテナーを監視します。コンテナーがビューポートにある場合、関連するコンポーネントを読み込みます。関連するコードは、https://github.com/WindrunnerMax/webpack-simple-environment の vue--first-screen-optimization ブランチにあります。インストールには yarn を使用してみてください。依存関係の問題を回避するために、yarn.lock ファイルを使用してバージョンをロックできます。 npm run dev で実行すると、Console でこれら 4 つの遅延ロードコンポーネントが作成される順序を確認できます。このうち、A のオブザーバーの遅延ロードは、ロード中のページがレンダリングされ、可視領域にあると判断されてからロードする必要があるため、最初の画面で直接見ることができます。D の遅延ロードは、D の外部コンテナーがビューに表示されるまでスクロールバーをスライドしてから表示する必要があります。つまり、D コンポーネントは一番下までスクロールしないと読み込まれません。また、$attrs と $listeners と同様に、component-params と component-events を通じて、遅延ロードコンポーネントに attrs と listeners を渡すこともできます。この時点で、遅延ロードコンポーネントが簡単に実装されました。

<!-- App.vue -->
<テンプレート>
    <div>
        <セクション>1</セクション>
        <セクション>
            <div>2</div>
            <遅延読み込み
                :lazy-component="例"
                タイプ="オブザーバー"
                :component-params="{ content: '例A' }"
                :コンポーネントイベント="{
                    'テストイベント': テストイベント、
                }"
            </遅延読み込み>
        </セクション>
        <セクション>
            <div>3</div>
            <遅延読み込み
                :lazy-component="例"
                タイプ="アイドル"
                :component-params="{ content: '例 B' }"
                :コンポーネントイベント="{
                    'テストイベント': テストイベント、
                }"
            </遅延読み込み>
        </セクション>
        <セクション>
            <div>4</div>
            <遅延読み込み
                :lazy-component="例"
                タイプ="lazy"
                :component-params="{ content: '例 C' }"
                :コンポーネントイベント="{
                    'テストイベント': テストイベント、
                }"
            </遅延読み込み>
        </セクション>
        <セクション>
            <div>5</div>
            <遅延読み込み
                :lazy-component="例"
                タイプ="オブザーバー"
                :component-params="{ content: '例 D' }"
                :コンポーネントイベント="{
                    'テストイベント': テストイベント、
                }"
            </遅延読み込み>
        </セクション>
    </div>
</テンプレート>

<script lang="ts">
「vue-property-decorator」から Component、Vue をインポートします。
「./components/lazy-load/lazy-load.vue」からLazyLoadをインポートします。
@成分（{
    コンポーネント: { LazyLoad },
})
デフォルトクラスAppをエクスポートし、Vueを拡張します。
    保護された Example = () => import("./components/example/example.vue");

    保護されたテストイベント(コンテンツ: 文字列) {
        console.log(コンテンツ);
    }
}
</スクリプト>

<スタイル lang="scss">
@import "./common/styles.scss";
体 {
    パディング: 0;
    マージン: 0;
}
セクション {
    マージン: 20px 0;
    色: #fff;
    高さ: 500px;
    背景: $color-blue;
}
</スタイル>

毎日の質問

https://github.com/WindrunnerMax/EveryDay

参照する

https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback

要約する

これで、Vue プロジェクトのファーストスクリーンパフォーマンス最適化コンポーネントに関するこの記事は終了です。Vue ファーストスクリーンパフォーマンス最適化コンポーネントに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: