要素シャトルフレームのパフォーマンス最適化の実装

要素シャトルフレームのパフォーマンス最適化の実装

背景

シャトル ボックスが大量のデータを処理すると、レンダリングされる DOM ノードが多すぎるためにページが停止することがあります。
コンポーネントの元のロジックをできるだけ変更せずに最適化します。

解決

遅延読み込み - InfiniteScroll コンポーネントは、最初にパッケージ/転送から元のコンポーネントをコピーします (または、ソース コードを変更して、プライベート ライブラリの使用を維持するために再パッケージ化します)
意思

v-infinite-scroll="ページダウン"
:infinite-scroll-immediate="false"

に追加

<el-チェックボックスグループ
        v-show="!hasNoMatch && data.length > 0"
        v-model="チェック済み"
        :size="サイズ"
        :class="{ 'is-filterable': フィルタ可能 }"
        クラス="el-transfer-panel__list"
        v-infinite-scroll="ページダウン"
        :infinite-scroll-immediate="false"
      >
        <el-チェックボックス
          クラス="el-transfer-panel__item"
          :label="item[キープロパティ]"
          :disabled="アイテム[disabledProp]"
          :key="アイテム[キープロパティ]"
          v-for="filteredData 内のアイテム">
            <オプションコンテンツ:オプション="項目"></オプションコンテンツ>
        </el-チェックボックス>
</el-チェックボックスグループ>

data: 20 で pageSize を定義して、ページあたりのデータ数を示します。showData: [] は表示のみに使用され、上記のコードで操作する実際のデータを置き換えます。filteredData

 v-for="showData 内の項目">

同時に、時計の対応する処理

データ(データ){
    const チェック = [];
    this.showData = data.slice(0, this.pageSize);

    const フィルターデータキー = this.filteredData.map(
    (アイテム) => アイテム[this.keyProp]
    );
    this.checked.forEach((item) => {
    if (filteredDataKeys.indexOf(item) > -1) {
        チェック済み.push(アイテム);
    }
    });
    this.checkChangeByUser = false;
    this.checked = チェック済み;
},
フィルターされたデータ (フィルターされたデータ) {
    this.showData = フィルタリングされたデータ.slice(0, this.pageSize);
 }

初期表示数量はランダムで20個となります。

最後に、一番下までスクロールしたときに呼び出されるメソッドを追加します

ページダウン(){
    定数 l = this.showData.length;
    定数 totalLength = this.filteredData.length
    l < 合計長さ && 
    (this.showData = this.filteredData.slice(0, l + this.pageSize > totalLength ?
    合計長さ: l + this.pageSize));
},

下にスクロールすると、表示されるデータの長さが 20 ずつ増加します (数字は任意)。超過すると最大長が表示されます。

これにより、大量のデータを扱う際の操作速度低下の問題が基本的に解決されます。プレゼンテーション層とロジック層が分離されているため、コンポーネントのすべての操作ロジックを変更する必要がなく、差異が最小限に抑えられます。

新しい質問

リストの最後まで手動でスクロールしてから検索すると、依然として遅延が発生します。

高度な

スクロール処理中は、上部のデータは表示されません。このデータは表示されず、ユーザー エクスペリエンスに影響はありません。
したがって、現在のページで表示する必要があるデータは 20 個だけです。

スクロール バーを操作するために、el-checkbox-group に ref=scrollContainer を追加します。

現在のページ番号curIndex: 1をデータに定義します

そしてpageDownメソッドを修正する

    ページダウン(){
      定数 totalLength = this.filteredData.length
      if((this.curIndex*this.pageSize) < 合計長さ){
        this.curIndex++
        定数 targetLength = this.curIndex * this.pageSize 
        const endPoint = targetLength > totalLength ? totalLength : targetLength
        const startPoint = endPoint - this.pageSize > 0 ? endPoint - this.pageSize : 0
        this.showData = this.filteredData.slice(startPoint, endPoint);
        this.$refs.scrollContainer.$el.scrollTop = "1px" //バーを一番上までスクロールして次のページに接続します。0 は境界の問題を引き起こす可能性があります。}
    }

これを行うには、ページを上にするメソッドも追加する必要があります。

InfiniteScrollコマンドは下方向のスクロールのみを提供します。このコマンドを拡張して、上方向のスクロールリスナーを追加することができます。
        this.$refs.scrollContainer.$el.addEventListener('スクロール'、this.pageUp)
    },
    beforeDestroy(){
        this.$refs.scrollContainer.$el.removeEventListener('scroll', this.pageUp)
    },

pageUpメソッドを登録する

    ページアップ(e){
      if(e.target.scrollTop === 0 && this.curIndex> 1){
        this.curIndex --
        定数エンドポイント = this.curIndex * this.pageSize 
        定数 startPoint = (this.curIndex-1)* this.pageSize 
        this.showData = this.filteredData.slice(startPoint, endPoint);
        const el = this.$refs.scrollContainer.$el
        el.scrollTop = el.scrollHeight - el.clientHeight - 1 // 一番下までスクロールして前のページに接続します。-1 にすると境界の問題を回避できます。
      }
    },

データ操作を行うと、ページの内容が変わり、それに応じてスクロール バーも変わります。予期しないページめくりを防ぐために、データが変更されると、スクロール バーと現在のページ番号がリセットされます。

    initScroll(){
        this.curIndex = 1
        this.$refs.scrollContainer.$el.scrollTop = 0
    },

同時に、watchの対応する時間にinitScrollを実行します。

    データ(){
        ...
        this.initScroll()
        ...
    },
    フィルターされたデータ (フィルターされたデータ) {
      ...
      this.initScroll()
    }

この時点で、大量のデータに対するシャトル フレームのパフォーマンスが大幅に向上しました。

エレメントシャトルボックスのパフォーマンス最適化の実装に関するこの記事はこれで終わりです。エレメントシャトルボックスのパフォーマンス最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue はオンデマンドでシャトルフレームを転送する要素を導入しました
  • 大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

<<:  不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード

>>:  MySQL リンクを表示し、異常なリンクを削除する方法

推薦する

Docker コンテナのマウントディレクトリ操作の表示

Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...

Vueプロジェクトでページジャンプを実装する方法

目次1. vue-cli デフォルト プロジェクトを作成する (babel のみを含む) 2. 作成...

シームレスなトークンリフレッシュを実現する方法

目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...

CSS 位置固定左と右の二重配置実装コード

CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...

CSSレコードテキストアイコン配置のいくつかのソリューション

開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...

DevUI で独自の Angular コンポーネント ライブラリを構築する方法

目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...

CSSのborder-radiusプロパティを使用して円弧を設定します

現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...

MySQL binlog ログを開く方法

binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...

JavaScriptエンジンV8の実行プロセスの詳細な説明

目次1. V8ソース2. V8サービスターゲット3. V8の初期アーキテクチャIV. V8の初期アー...

フロートとBFCをクリアするCSSメソッド

イギリスBFC: ブロック書式設定コンテキストBFCレイアウトルール内箱は縦方向に次々に配置されます...

PHPのmail()関数を使用してメールを送信する

PHPのメール関数を使用してメールを送信するmail()関数はメールサーバーに接続し、サーバーと対話...

MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策

lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...

MySQLデータベースを別のマシンに移行する方法の詳細な説明

1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...

ウェブサイトのユーザビリティとコンバージョン率を向上させる 25 のツール

ウェブサイトの場合、ユーザビリティとは、ユーザーが必要な情報を効果的に見つけたり、タスクを完了したり...