Vue.js でパフォーマンスを最適化するにはどうすればよいですか?共有するための 9 つのヒント

Vue.js でパフォーマンスを最適化するにはどうすればよいですか?次の記事では、Vue.js のパフォーマンスを最適化するための 9 つのヒントを紹介します。お役に立てば幸いです。

(学習ビデオ共有: vuejs チュートリアル)

01 機能コンポーネント

#**原則: ****

機能コンポーネント**通常のコンポーネントと比較して、状態を持たない(応答性データがない) 、インスタンスはありません (このコンテキストはありません)。機能コンポーネントはコンポーネント内の関数と考えることができ、入力パラメータはレンダリング コンテキスト、戻り値はレンダリングされた HTML です。機能コンポーネントによってレスポンシブ化やフック機能など多くの処理が簡略化されるため、ある程度の描画性能は向上します。

#適用可能なシナリオ:

#応答性の高いデータや処理ロジックを必要としない純粋な表示コンポーネント

1. 基本的な関数をマークしたり提供したりするために使用される高次コンポーネント

2. ループ内の要素 (v-for)
02 子コンポーネントの分割

**原則: **最適化前のコードでは、props に渡された数値が発生するたびに、変更されると再レンダリングされ、パフォーマンスを消費する操作を実行するためにレンダリング プロセス中に重い関数が再度呼び出されます。最適化されたコード ロジックは、複雑な操作をサブコンポーネントにカプセル化することです。Vue の更新はコンポーネントの粒度で行われるため、受信した数値が変更されると、親コンポーネントが再レンダリングされ、サブコンポーネントは数値に依存しません。数値に依存せず、再レンダリングされません。実行される計算の数が減り、必然的にパフォーマンスが向上します。

#**もう 1 つ: **ここでは、実際に計算されたプロパティを使用して最適化できます (外部依存関係が変更されていない場合は再計算されず、サブコンポーネントの追加レンダリングのコストが節約されます)

03 ローカル変数

**原則: **前後のコードを比較すると、次のことがわかります。違いは次のとおりです。 最適化前 コードは計算を実行するたびに this.base を直接参照し、最適化されたコードはローカル変数 Base を使用して this.base をキャッシュし、後続の計算で計算のためにローカル変数を呼び出します。なぜこれほど明らかなパフォーマンスの違いがあるのでしょうか?その理由は、this.base が計算されたプロパティであるため、this.base にアクセスするたびにロジック コードが実行され、既存の依存関係が変更されたかどうかが確認されます。変更されている場合は再計算されます。変更されていない場合は、再計算されます。 、最後に計算された値が返されます。このタイプの計算ロジックのパフォーマンスの消費は、数回しか呼び出されない場合には明らかではありませんが、実行されすぎると (フレームごとに 300 のコンポーネントが更新され、各コンポーネントが this.base を複数呼び出す例と同様) 1 回のアップデート内で 2 回)、パフォーマンスに比較的大きな違いが生じます。

04 v-show による DOM の再利用

##原則:

実装方法: v-show は、DOM 要素を DOM ツリーに動的に追加または削除する場合、DOM 要素の表示スタイル属性を設定することで可視性を制御します。

• コンパイル プロセス: v-if 切り替えには、部分的なコンパイルとアンインストールのプロセスがあります。切り替えプロセス中に、内部イベント リスナーとサブコンポーネントが適切に破棄され、再構築されます。v-show は単純です。 CSS に基づくスイッチ。

• コンパイル条件: v-if は遅延です。初期条件が false の場合は何もせず、条件が初めて true になった場合にのみ部分的なコンパイルを開始します。v -show はすべての条件下でコンパイルされてからキャッシュされ、DOM 要素は保持されます。

• パフォーマンスの消費: v-if のスイッチング コストは高く、v-show の初期レンダリング コストは高くなります。

• 使用場景：v-if 適合條件不太可能改變的情況，v-show 適合條件頻繁切換的情況。

05 Keep-alive

**原理：**在非最佳化場景下，我們每次點擊按鈕切換路由視圖，都會重新渲染一次元件，渲染元件就會經過元件初始化，render、patch 等過程，如果元件比較複雜，或者嵌套較深，那麼整個渲染耗時就會很長。而在使用KeepAlive 後，被KeepAlive 包裹的組件在經過第一次渲染後的vnode 以及DOM 都會被緩存起來，然後再下一次再次渲染該組件的時候，直接從緩存中拿到對應的vnode 和DOM，然後渲染，並不需要再走一次元件初始化，render 和patch 等一系列流程，減少了script 的執行時間，效能更好。

但是使用 KeepAlive 元件並非沒有成本，因為它會佔用更多的記憶體去做緩存，這是一種典型的空間換時間優化思想的應用。

06 Deferred features

#其中deferMixin 如下：

**原理：**Defer 的主要思想就是把一個元件的一次渲染拆成多次，它內部維護了displayPriority 變量，然後在通過requestAnimationFrame每幀渲染的時候自增，最多加到count。然後使用 Defer mixin 的元件內部就可以透過 v-if="defer(xxx)" 的方式來控制在 displayPriority 增加到 xxx 的時候渲染某些區塊了。

當你有渲染耗時的元件，使用 Deferred 做漸進式渲染是不錯的注意，它能避免一次 render 由於 JS 執行時間過長導致渲染卡住的現象。

07 Time slicing

**原理：**使用時間分片可以避免一次性提交的資料過多，內部Js 執行時間過長，阻塞UI 進程導致頁面卡死。

**另：**在執行耗時任務處理時，我們通常會加一個loading 效果，但透過優化前後對比可以發現：優化前JS 一直長時間運行，阻塞UI 進程，因此並不會展示loading 動畫；優化後由於將耗時任務拆成多個時間片提交，單次JS 運行時間變短了，loading 動畫也有機會渲染了。

08 Non-reactive data

############################################### **原理：**內部提交資料時會預設將新提交的資料定義成響應式，如果對象的子屬性是對象，也會遞歸讓子屬性也變成響應式。因此當提交資料過多時，整個過程十分耗時。而優化後透過將data 中的屬性標誌configurable 手動變成false，這樣內部透過Object.keys(obj) 取得物件屬性陣列會忽略data，也就不會為data 這個屬性defineReactive，由於data 指向的是一個對象，這樣也就會減少遞歸響應式的邏輯，相當於減少了這部分的效能損耗。數據量越大，這種優化的效果就會更明顯。 ######設定configurable 與直接使用Object.freeze 的差異是：#########**configurable: false**###的用途是防止更改和刪除屬性標誌，但允許更改物件的值；###

**Object.freeze(obj)**禁止新增/刪除/變更屬性。為所有現有的屬性設定 configurable: false, writable: false。

// configurable: false

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  configurable: false
});

user.name = "Pete"; // 正常工作
delete user.name; // Error

// Object.freeze(obj)

let user = {
  name: "John"
};

Object.freeze(user);

user.name = "Pete";
console.log(user.name); // "John"复制代码

09 Virtual scrolling

**原理：**虛擬捲動的實作方式是僅渲染視圖範圍內的DOM ，渲染內容少時效能自然會好很多。虛擬滾動元件也是Guillaume Chau 寫的，有興趣的同學可以去研究它的原始碼實作，基本原理就是監聽滾動事件，動態更新需要顯示的DOM 元素，計算出它們在視圖中的位移。虛擬滾動元件也並非沒有成本，因為它需要在滾動的過程中即時去計算，所以會有一定的 script 執行的成本。因此如果清單的資料量不是很大的情況，我們使用普通的滾動就足夠了

本文轉載自：https://juejin.cn/post/7084809333740929061

#（學習影片分享：web前端開發）

以上がVue.js でパフォーマンスを最適化するにはどうすればよいですか?共有するための 9 つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。