[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」或掃描下面的二維碼

---

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