[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”或扫描下面的二维码

---

本文对你有帮助？欢迎扫码加入前端学习小组微信群：