ホームページ >ウェブフロントエンド >Vue.js >Vue.js でパフォーマンスを最適化するにはどうすればよいですか?共有するための 9 つのヒント
Vue.js でパフォーマンスを最適化するにはどうすればよいですか?次の記事では、Vue.js のパフォーマンスを最適化するための 9 つのヒントを紹介します。お役に立てば幸いです。
(学習ビデオ共有: vuejs チュートリアル)
#応答性の高いデータや処理ロジックを必要としない純粋な表示コンポーネント
**原則: **最適化前のコードでは、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 適合條件頻繁切換的情況。
**原理:**在非最佳化場景下,我們每次點擊按鈕切換路由視圖,都會重新渲染一次元件,渲染元件就會經過元件初始化,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**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"复制代码
**原理:**虛擬捲動的實作方式是僅渲染視圖範圍內的DOM ,渲染內容少時效能自然會好很多。虛擬滾動元件也是Guillaume Chau 寫的,有興趣的同學可以去研究它的原始碼實作,基本原理就是監聽滾動事件,動態更新需要顯示的DOM 元素,計算出它們在視圖中的位移。虛擬滾動元件也並非沒有成本,因為它需要在滾動的過程中即時去計算,所以會有一定的 script 執行的成本。因此如果清單的資料量不是很大的情況,我們使用普通的滾動就足夠了
本文轉載自:https://juejin.cn/post/7084809333740929061
#(學習影片分享:web前端開發)
以上がVue.js でパフォーマンスを最適化するにはどうすればよいですか?共有するための 9 つのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。