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

02-01

作者：滴滴公共前端小春

前言：

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

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

正文：

對於任何框架，我自己都喜歡看 releases，也比較關注版本和版本直接的差異。本文我們討論一點和 performance 有關的東西。

從 2.2.0 的版本開始，我們發現 Vue 的源碼裡面多了一個東東：

// config 裡面多了一個配置nvar config = {n performance: "development" !== productionn}n

官方 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()n

截圖如下：

不熟悉 performance 的 getEntries 的同學可以點擊：Performance.getEntries()

簡單歸納：

列出通過 mark 和 measure 打點的列表
當然也可以傳遞參數

我們具體看看代碼裡面有哪些地方用到了 perf

Vue.prototype._init = function (options) {n if ("development" !== production && config.performance && perf) {n // 這裡是第一個n perf.mark(init);n }n}n

if ("development" !== production && config.performance && perf) {n vm._name = formatComponentName(vm, false);n //mark 了一個 init endn perf.mark(init end);n //measure 了一下n perf.measure(((vm._name) + " init"), init, init end);n}n

關於 mark 不熟悉的請點擊：Performance.mark()

// 可以標記一些指定 name 對應的時間點
creates a timestamp in the browsers performance entry buffer with the given name.
// duration 一般都是 0

語法：

performance.mark(name)n

也可以通過下面方式來查看所有 mark 過的數據：

window.performance.getEntriesByType("mark")n

截圖如下：

那 measure 呢，更多可以點擊：Performance.measure()

creates a named timestamp in the browsers 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")n

截圖如下：