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

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

背景

シャトル ボックスが大量のデータを処理すると、レンダリングされる 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 リンクを表示し、異常なリンクを削除する方法

推薦する

uniappとvueの違いの詳細な説明

目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...

Dockerコンテナレイヤーの概念の詳細な説明

目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...

一定期間の日ごと、時間ごとの統計データを取得するMySQLの詳しい説明

毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

Linux で指定されたフォルダの各サブフォルダ内のファイル数を表示する

カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...

Linux での stat 関数と stat コマンドの使用法の詳細な説明

stat 関数と stat コマンドLinux ファイル内の [inode = インデックス ノード...

MySQLのストレージエンジンについてお話しましょう

基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...

document.getElementBy系メソッドがオブジェクトを取得できない問題を解決する

getElementByIdはオブジェクトを取得できませんブラウザがドキュメントを解析するときにはシ...

Angularプロジェクトにおける共有モジュールの実装の詳細な説明

目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...

MySQL で単一のフィールド内の複数の値を分割および結合する方法

複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...

Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

MySql バージョンの問題に対する完璧なソリューション sql_mode=only_full_group_by

1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...

my.cnf (my.ini) 重要なパラメータの最適化設定手順

MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...