JSON.parse 比 Object 字面量语法更快

写在前面

原文地址:

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

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

使用建议

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

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

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

参考


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

原文链接:segmentfault.com

上一篇:JavaScript 双向链表_048
下一篇:iframe引用页面并进行页面间的通信

相关推荐

  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    2 个月前
  • 高效遍历匹配Json数据,避免嵌套循环

    工作中经常会遇到这样的需求: 1.购物车列表中勾选某些,点击任意一项,前往详情页,再返回购物车依旧需要呈现勾选状态 2.勾选人员后,前往别的页面,再次返回,人员依旧程勾选状态 3.等等.......

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    5 个月前
  • 面试官:请你介绍一下let const Object.freeze() ,set和get

    image.png(https://img.javascriptcn.com/a14365703d60277d0d01bfbcacf51841 "image.png") 前端巅峰 每日一题 : ...

    9 个月前
  • 隐藏某些价值观输出stringify() JSON。

    Evan CarrollNilesh(https://stackoverflow.com/users/124486/evancarroll)提出了一个问题:Hide certain values in...

    2 年前
  • 随着Nodejs JSON对象响应(转换对象数组JSON字符串)

    Rudolf Olahclimboid(https://stackoverflow.com/users/9903/rudolfolah)提出了一个问题:Responding with a JSON o...

    2 年前
  • 铬sendrequest错误:列表的循环结构转换到JSON

    SomeKittensSkizit(https://stackoverflow.com/users/1216976/somekittens)提出了一个问题:Chrome sendrequest err...

    2 年前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    2 个月前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    2 个月前
  • 重新认识 package.json

    前言 🤔 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    3 个月前

官方社区

扫码加入 JavaScript 社区