序文
自分の英語力を向上させるために、いくつかの英語の技術記事、この小さなチップのVueの初めからすべての最初の、22の現在の合計の英語版を翻訳してみてください。ときに翻訳を完了するのに2〜3ヶ月使用することを計画しています。
現在の進捗状況[2/22]
オリジナル
翻訳
では、前の記事では、我々は大規模なデータのパフォーマンスを向上させる方法について説明しました。しかし、我々はそれがどれだけ改善されるかを測定していません。
私たちは、これを達成するためにクロムデベロッパーツールのパフォーマンスオプションを使用することができます。しかし、正確なデータを得るために、我々はVueの上でパフォーマンスモードを有効にする必要があります。
私たちはできるmain.jsグローバル変数を設定またはプラグインのコードは次のとおりです。
Vue.config.performance = true;
复制代码あなたは正しいNODE_ENV環境変数を設定した場合は、判断を下すために非生産環境を使用することができます。
const isDev = process.env.NODE_ENV !== "production";
Vue.config.performance = isDev;
复制代码これは、タグのVue内のコンポーネントのパフォーマンスアクティブユーザーAPIのタイミングを。
前の記事の内容、私が持っているcodesandboxは、コードを作成しました。パフォーマンスオプションでクロームデベロッパーツールを開き、リロードボタンをクリックしてください。
これは、ページロードのパフォーマンスを記録します。一方、ありがとうございました設定が、この設定は、統計で見ることがあなたができるようになりますセクション。main.jsVue.config.performanceUser Timing
どこで3つの指標を見つけることができます：
- initは：コンポーネントのインスタンスを作成し必要
- レンダリング：作成したVDOM構造が必要
- パッチ：VDOMはドムの実際の時間に適用されます
戻る結果がある（どのくらいの性能向上）好奇心記事へ：通常のコンポーネントは417ミリ秒の初期化が必要です。
使用がObject.freezeデフォルトの応答を防ぐだけで3.9ミリ秒を必要とします：
もちろん、それぞれの実行の結果は、小さな変更を持っていますが、性能に非常に大きな違いが残っています。コンポーネントを作成するときに問題のデフォルトの反応があるだろうので、することができますInit（初期化指数）は、デフォルトの間に違いは見られないし、反応を停止防止しました。
それはそれです！
あなたは、オンラインの記事読むことができます。ヒントオンライン（コードをコピー/ペーストすることができます）が、あなたが好きなら、覚えていてください、そして、すべて私の同僚に共有VueDoseを。
来週お会いしましょう。
私は理解して
VUEプロジェクト、我々はグローバルmain.jsを設定することができますVue.config.performanceでtrue、パフォーマンス・テストを開くには、環境変数を開くために必要で区別することができ、その後、あなたはパフォーマンスオプションにクロームデベロッパーツールを通じて、統計パフォーマンスデータを見ることができます。
エンディング
リミテッド、誤りや見落とし、あなたは同時に多くの光スプレーを見ては、Guixieを指摘することができることは避けられません！
その他の翻訳
1. 翻訳：大規模データvue.jsにおけるパフォーマンス向上の
2、VUEの時点で実行中のアプリケーションのパフォーマンスを測定：翻訳！
ます。https：//juejin.im/post/5cf5c3b56fb9a07ee85c1588で再現