[Vue 2]新バージョン探究のperformance関連

作者:滴滴公共前端小春
前言:
最近、各先端技術週刊誌やVueの使用に注目している学生は、先日また新版を出しました.2.1.
ここで調査してみましょう.皆さんは今Vue 2.*を使っています.一般的にどのバージョンですか?メッセージをくれますよ~
本文:
どのフレームワークに対しても、私自身はreleasesを見るのが好きで、バージョンとバージョンの直接的な違いにも注目しています.本文ではperformanceに関することを少し議論します.2.2.0のバージョンから、Vueのソースコードには東東が1つ増えていることがわかりました.

// config         
var config = {
  performance: "development" !== 'production'
}

公式releasesの説明:
New config: Vue.config.performance. Setting it to true traces component init, compile, render and patch time in the browser devtool timeline.
Only available in dev mode.
ソースコードを見てみましょう.

//      perf，         
//     ：window.performance
var perf;
{
  perf = inBrowser && window.performance;
  if (perf && (!perf.mark || !perf.measure)) {
    perf = undefined;
  }
}

どのように全体的にVueがperfに依存していくつの点を打ったかを見ます.window.performance.getEntries()
スクリーンショットは次のとおりです.
performanceに詳しくないgetEntriesの学生はクリックすることができます:Performance.getEntries()
簡単なまとめ:
markとmeasureで点を打つリストをリストするのはもちろんパラメータを渡すこともできます
コードの中でperfが使われている場所を具体的に見てみましょう

Vue.prototype._init = function (options) {
  if ("development" !== 'production' && config.performance && perf) {
    //       
    perf.mark('init');
  }
}

if ("development" !== 'production' && config.performance && perf) {
    vm._name = formatComponentName(vm, false);
    //mark     init end
    perf.mark('init end');
    //measure    
    perf.measure(((vm._name) + " init"), 'init', 'init end');
}

markについてよく知らないのはクリックしてください:Performance.mark()
//指定したnameに対応する時点creates a timestamp in the browser's performance entry buffer with the given name.//durationは一般的に0です
構文:performance.mark(name)
markが通過したすべてのデータを次のように表示することもできます.window.performance.getEntriesByType("mark")
スクリーンショットは次のとおりです.
ではmeasureは?measure()
creates a named timestamp in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively).
The named timestamp is referred to as a measure
表示:window.performance.getEntriesByType("measure")
スクリーンショットは次のとおりです.
DDFEGITHUB:githubへようこそ.com/DFE微信公衆番号:微信検索公衆番号「DDFE」または次のQRコードをスキャン
本文はあなたに役に立ちますか?スキャンコードをフロントエンド学習グループの微信グループに参加することを歓迎します.