BestVue3

尤老板发言1224:JSON.parse性能好于对象字面量

Jokcy
jokcylou@hotmail.com

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)的性能要比对象字面量要好

什么意思呢?我们来看一组对比代码:

1
const obj = JSON.parse('{"a": "b"}')
2
3
// 和
4
5
const obj = { a: b }
6

这两句代码的最终结果,都是 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 有关,我们都会第一时间进行分析分享,有兴趣的同学关注一波哦!

一手Vue3资料
Best
Vue3
长按关注BestVue3,学习不迷路

BestVue3,最优质的Vue3学习资源