[Vue 2] 新版本探究之 performance 相關

作者：滴滴公共前端 小春

前言：

最近各大前端技術週刊或者關注使用 Vue 的同學都在討論前幾天又出新版了 v2.2.1。

在此我們調研一下，各位同學現在用 Vue 2.* 一般是哪個版本呢？可以給我們留言哦~

正文：

對於任何框架，我自己都喜歡看 releases，也比較關注版本和版本直接的差異。本文我們討論一點和 performance 有關的東西。
從 2.2.0 的版本開始，我們發現 Vue 的原始碼裡面多了一個東東：

// 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 呢，更多可以點選：Performance.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")

截圖如下：

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公眾號：微信搜尋公眾號“DDFE”或掃描下面的二維碼

---

本文對你有幫助？歡迎掃碼加入前端學習小組微信群：