尤雨溪发言1224：JSON.parse性能好于对象字面量

2020 年 12 月 24 日（美国时间 23 日晚），Vue 做者尤雨溪在 twitter 连续发布数条信息，具体主要大体以下：

I remember there was a comparison of how much faster JS engines can parse string literals than actual JS (json strings vs. object literals) - anyone remember the link to that article/tweet?

我记得以前有一则对比 JS 引擎解析 JSON 字符串性能要优于对对象字面量的解析的文章，有谁记得文章的连接么？

Why do we need to keep these string literals? Because there are still cases where the component may not be on the initial screen and needs to be dynamically mounted. If you know the component is always going to be on the initially rendered markup, you can even drop the string!

为何咱们须要保持这些字符串字面量？由于咱们仍然会存在组件不在首屏须要动态渲染的状况。若是你知道你的组件一直都会出如今首屏，你甚至能够直接删除这些字符串！

Application of this: mark part of your application SSG only. Affected components' render function is now just a string literal in the client code. Super cheap to parse. Imports originally used in the equivalent render fn code also get auto-treeshaken.

这类应用：只对部分应用生成静态内容（SSG）。受到影响的组件的 render 方法在客户端只是字符串字面量，编译的消耗很是低。原先在 render 方法中使用的引入也会被自动 treeshaken

I'm excited about this because this is already totally feasible with Vue 3's compiler infra (and some of this is already applied in more strictly constrained scenarios e.g. VitePress). Need to do some benchmarking to see the real world impact of this though.

我对此感到激动由于这在 Vue3 的编译器基础设施中已是可行的（而且一部分已经在约束更严格的 VitePress 中实现），虽然仍然须要进行一些现实场景例子的性能测试。

这里只摘抄了一部分主要的内容，其余还有不少跟别人讨论的以及细节的内容，你们能够自行去 twitter 翻一翻尤老师的发言记录。

咱们简单聊聊尤老师这是在说什么。尤老师询问的文章是这篇Javascript 性能 2019， 这篇文章里面提到了一个点，那就是 JSON.parse(objectString)的性能要比对象字面量要好。

什么意思呢？咱们来看一组对比代码：

const obj = JSON.parse('{"a": "b"}')

// 和

const obj = { a: "b" }
复制代码

这两句代码的最终结果，都是 obj 指向一个只有a属性，其值为字符串"b"的对象。而文章的结论是上面的方案要比下面的方案性能更好（固然你别拿这两句代码去测试，要测试请把对象内容放大到足够大）。

这可能会出乎一些同窗的意料，由于从普通视角看，对一行代码多执行来一步JSON.parse方法调用，理论上性能会更差。

那么为何会这样呢？由于 JS 是解释语言。其实执行第二句代码的时候，对于 JS 引擎来讲， 他也是首先须要解析整一句语句， 而后对其进行词意分析， 语义分析等等编译流程， 最后生成变量和对象。 也就是说最开始咱们的对象字面量，在 JS 引擎眼里其实也就是字符串

那为何JSON.parse性能更好呢？ 由于 JSON 的关键字比 JS 少太多了， JS 引擎对对象字面量作的编译，要考虑全部 JS 关键字和语法， 而JSON.parse只须要考虑 JSON 的语法和关键字， 那么性能更好天然很好理解了，简单来讲就是if else更少（只是举例，别认真）

而后尤老师的重点就是，Vue3 的编译引擎能够很是适合地进行相似的优化，尤为是集成度更高的 VitePress 工具，已经集成了一部分相似优化。

至于为啥尤老师在昨天晚上这么激动地发布这么多信息，我猜，大概跟前一天 React 发布了ServerComponent有关系吧。。。

将来尤老师有什么新的信息在 twitter，只要内容跟 Vue3 有关，咱们都会第一时间进行分析分享，有兴趣的同窗关注一波哦！

本文首发于BestVue3，一个分享优质Vue3学习内容以及开发优质Vue3开源项目的网站！