5

写在前面

原文地址:

https://www.bram.us/2019/11/25/faster-javascript-apps-with-json-parse/

原文中包含油管视频,有梯子并且英文好的可以直接点开链接观看。

针对太长不看的读者

因为 JSON 语法比 Javascript 的语法更简单,因此解析 JSON 比解析 Javascript 更高效。当一个 web app 需要加载在首次加载时,解析一个非常复杂的、大型的、符合 JSON 规范的对象字面量配置对象时(比如配置 redux 的 store),我们可以根据这一点来提升首屏加载性能。

为什么 JSON.parse 更快

使用 AST 表示 JSON.parse(...) 更加简单

AST 中,表示 JSON.parse(...) 更加简单,只包含一个类型为 CallExpression,一个类型为 StringLiteraltoken 即可。

而表示等价的对象字面量代码则复杂的多,复杂程度取决于 JSON 字符串所代表对象的复杂程度,每一个 key 值为一个类型为 StringLiteraltoken,每一个值为 NumericLiteral 类型的 token,但在 js 中,这个值实际可以为任何类型。

如果对象包含嵌套结构,则会涉及更多的 token 以及值类型,这对于 JS 解释器来讲,将不得不花额外的时间来解析它们以确保代码能够正确执行。

解释 JSON.parse(...) 更加简单

首先来说 JSON.parse('{ 这段代码,当解释器尝试解释这段代码时,只会遇到两种情况:

  • 它是一个合法的 JSON 字符串,如果它以 { 开头的话
  • 它是一个不合法的 JSON 字符串

而对于 { 来讲,情况就会变得复杂很多,首先来看一段代码:

const x = 42
const y = ({ x }

对于这段代码,解释器读到这个字节时,无法提前得知后续可能发生的情况。这里的 y 真得会是对象字面量,还有可能是其他的情况吗?如果解释器不执行后续的代码,它无法得出任何结论。

如果第二行代码是这样的:

const y = ({ x })

y 代表一个对象,而这里的 x 指向第一行代码中的 x 变量,它是 42

但如果第二行代码是这样的:

const y = ({ x } = { x: 21 })

这里的 y 就会是 21,第一个 x 是用于结构赋值的,它指向后面对象中的那个值为 21x

这还没完,如果代码是这样的呢?

const y = ({ x }) => x

这里 y 则执行一个匿名箭头函数了,而 x 代表一个结构赋值参数。

这些例子说明,对于 JS 引擎来说,解释一段代码,要根据它所处的上下文分析很多事情,而这会花费很多时间,而 JSON.parse 则更加简单。

benchmark

1381345316-11844419e1c1224d_articlex.png

可以发现在各种不同的 js 引擎中,至少能够提升 1.5x 的性能。

使用建议

虽然使用 JSON.parse 可以提升性能,但是不建议我们通过手动的方式来应用它,主要有以下两点原因:

  • 使用 JSON.parse 比使用 Object 字面量可读性低
  • JSON 字符串参数无法享受编辑器的高亮效果

建议的做法是,我们可以将这一步骤加入到代码的编译打包过程中去,比如使用babel-plugin-object-to-json-parse 插件。(注:这个插件只是实验版本,稳定之前不建议在生产环境使用)

参考


关注公众号 全栈101,只谈技术,不谈人生
全栈101.PNG


littlelyon
7.9k 声望1.5k 粉丝

华丽的跌倒胜过无谓的徘徊