記事のディレクトリ
ご存知のとおり、Vueプロジェクトは双方向のデータバインディングと仮想DOMを使用します。DOMをデータ駆動型の頻繁なレンダリングに置き換えるのは非常に効率的です。開発者向けに非常に最適化されているのに、なぜVueのパフォーマンスが最適化されているのでしょうか。
Vue 2.xは現在webpackなどのサードパーティのパッケージングおよびビルドツールを使用しており、他のサードパーティのプラグインをサポートしているため、プロジェクトでこれらのツールを使用すると、操作が異なると実行またはパッケージングの効率に異なる影響を与える可能性があります。以下は、最適化の方向性について詳しく説明することです。
1v-ifおよびv-showの使用
v-ifこれは、falseレンダリングされませんDOMビューにそれがないときは、trueそれがないときには、ビューにレンダリングされます。v-show初期条件に関係なく、要素は常にビューにレンダリングされ、CSSの表示プロパティに基づいて単純に切り替えられます。
ベストプラクティス：非表示の要素を表示するように頻繁に切り替え
v-show、使用法を変更することはめったにありませんv-if
計算と時計の2つの差別化された使用
computed：属性が計算される、他の属性値に依存し、そしてcomputed値は缓存、次の取得は、その属性値の変更にのみ依存するcomputedのみ再計算するときの値computed値。watch：これは、一部のデータの監視コールバックと同様に、「監視」の機能であり、監視対象のデータが変更されるたびに、後続の操作のためにコールバックが実行されます。
ベストプラクティス：数値計算を実行して他のデータに依存する必要がある場合は、計算を使用する必要があります。これは、計算のキャッシュ機能を使用して、値を取得するたびに再計算を回避できるためです。データが変更されたときに実行する必要がある場合非同期またはコストのかかる操作では、watchを使用する必要があります。watchオプションを使用すると、非同期操作（APIへのアクセス）を実行し、操作を実行する頻度を制限し、最終結果を取得する前に中間状態を設定できます。これらは、計算されたプロパティでは実行できないことです。
3 v-トラバーサルの場合、アイテムにキーを追加し、v-ifを同時に使用しないようにする必要があります
これで、key通常報告されるエラーを追加せずに、追加keyすることで、Vueの内部メカニズムがデータのリストを正確に見つけることが容易になります。更新時に、新しい状態値が古い状態値と比較され、差分がより速く特定されます
v-forv-if優先度が高い場合よりも、毎回配列全体をトラバースする必要がある場合、特に時間のごく一部をレンダリングする必要がある場合は、computedプロパティに置き換える必要がある場合に、速度に影響します。
<ul>
<li v-for="user in adminUsers" :key="user.id">
{
{ user.name }}
</li>
</ul>
<script>
export default {
data () {
return {
users: [] }
},
computed: {
adminUsers: function(){
return this.users.filter(()=>user.isAdmin)
}
}
}
</script>
4純粋なディスプレイの長いリストのパフォーマンスの最適化
表示のみに使用されるデータの場合、vueデータのハイジャックを行う必要はなく、次のオブジェクトをフリーズするだけです。
export default {
data () {
return {
users: []
}
},
created () {
axios.get('/api/users').then((res)=>{
this.users = Object.freeze(res.data.users)
})
}
}
5イベントの破壊
Vueコンポーネントが破棄されると、他のインスタンスとの接続が自動的にクリーンアップされ、すべての命令とイベントリスナーのバインドが解除されますが、コンポーネント自体のイベントのみが対象となります。js内でaddEventListene他の手段を使用しても自己破壊しない場合は、次のようなメモリリークが発生しないように、コンポーネントが破壊されたときにこれらのイベントを手動で削除することをリッスンする必要があります。
created() {
addEventListener('click', this.click, false)
},
beforeDestroy() {
removeEventListener('click', this.click, false)
}
6画像リソースの遅延読み込み
使用するvue-lazyloadプラグインを：
インストール
npm install vue-lazyload --save-dev
man.jsリファレンス
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 或自定义
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
imgタグを変更します
<img v-lazy="/static/img/1.png">
7ルーティング遅延読み込み
Vueはシングルページアプリケーションであり、多くのルートが導入される可能性があります。このように、webpcakでパッケージ化されたファイルは非常に大きくなります。ホームページに入ると、ロードされるリソースが多すぎて、ページが空白で表示されます。ユーザーエクスペリエンスを促進します。異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスしたときに対応するコンポーネントをロードできれば、より効率的になります。これにより、最初の画面表示の速度は大幅に向上しますが、他のページの速度は低下する可能性があります。
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})
8サードパーティのプラグインがオンデマンドで導入されます
サードパーティライブラリを使用する場合は、導入よりもグローバルな需要を導入するのが最善です。これは、より多くのプラグインサードパーティライブラリがすべて組み込まれているためElement UI、Ant Design of Vueおよびその他のUIライブラリのパッケージ化が遅くなるためです。
オンデマンド紹介
import Vue from 'vue';
import {
DatePicker } from 'ant-design-vue';
Vue.use(DatePicker);
グローバル紹介
import Antd from 'ant-design-vue';
Vue.use(Antd);
9無制限リストのパフォーマンスを最適化する
無限スクロールリストを使用してレンダリングする場合は、窗口化テクノロジーを使用してパフォーマンスを最適化する必要があります。コンテンツをレンダリングする必要があるのは領域のごく一部のみであり、再レンダリングコンポーネントを減らし、domノード時間を作成します。次のオープンソースプロジェクトvue-virtual-scroll-listおよびvue-virtual-scrollerを参照して、この無限リストシーンを最適化できます。
私たちは皆Github、それを使用するための指示を見に行きました。
10サーバー側レンダリングSSRまたは事前レンダリング
通常、シングルページアプリケーションはブラウザ側でページレンダリングを完了し、データはリクエストを送信することでバックグラウンドから取得されます。サーバー側レンダリングSSRは、サーバー上に構築されたページ要素（HTML）の構造です。側、およびページ全体がクライアントに返されます。
SSRの長所と短所は何ですか？
- より良い
SEO：Webクローラーは検索エンジンに含まれるページ情報を直接クロールできますが、ajax非同期リクエストのコンテンツは含まれないため、SSRを介してレンダリングされる完全なページ情報はSEOに役立ちます。 - サポートフック機能はサポートするだけ
beforCreateでcreated、サーバーはノードサーバー環境にある必要があります。 - より高度なサーバー構成が必要：データ処理とページレンダリングが含まれているため、サーバーの費用が大きくなります
最初の画面の読み込み速度が比較的速い場合、またはSEOが必要な場合は、SSRレンダリングを使用できます。
PS：最適化は単なる提案です。最適化の難しさ、影響の範囲、適用可能なシナリオ、他のモジュールに影響を与えるかどうか、最適化の効果が明らかかどうかなど、プロジェクトに適しているかどうかを検討する必要があります。あなたに合ったものが最高です！