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

更新日期: 2019-12-02阅读: 2.1k标签: json

针对太长不看的读者

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


为什么 JSON.parse 更快

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

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

而表示等价的对象字面量代码则复杂的多,复杂程度取决于 JSON 字符串所代表对象的复杂程度,每一个 key 值为一个类型为 StringLiteral 的 token,每一个值为 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 是用于结构赋值的,它指向后面对象中的那个值为 21 的 x。

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

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 插件。(注:这个插件只是实验版本,稳定之前不建议在生产环境使用)

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


链接: https://www.fly63.com/article/detial/6703

web数据格式中关于:XML/HTML/JSON学习总汇

这篇文章讲解关于XML/HTML/JSON的学习,大家都知道服务器端可以返回的数据格式,主要就是:XML、HTML、JSON,当我们做数据抓取,ajax请求的时候都需要熟悉它们的使用。

解决IE8下JSON.stringify()自动将中文转译成unicode的方法

在IE8下JSON.stringify()自动将中文转译为unicode编码,原本选择的中文字符,传到后台变为了unicode编码,即u****的形式。查找资料后发现,与标准的JSON.stringify()不同,IE8内置的JSON.stringify()会自动将编码从utf-8转为unicode编码,导致出现这种类似于乱码的情况。

js实现json格式化,以及json校验工具的简单实现

这篇文章主要讲解:json结构及形式、json字符串转化为json对象【通过eval( ) 方法,new Function形式,使用全局的JSON对象】、json校验格式化工具简单实现

解析Json字符串的三种方法

在很多时候,我们的需要将类似 json 格式的字符串数据转为json,下面将介绍日常中使用的三种解析json字符串的方法

解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容

将字符串和json对象的相互转换,我们通常使用JSON.parse()与JSON.stringify()。解决IE8以下低版本实现JSON.parse()与JSON.stringify()的兼容呢:利用eval方式解析、new Function形式、自定义兼容json的方法、head头添加mate等

什么是数据交互格式?xml和json优缺点

就是客户端和服务端进行信息传输的格式(xml和json),双方约定用什么格式进行传输,然后解析得到自己想要的值,xml扩展标记语言,属于重量级(第一占宽带、第二解析难),json属于轻量级的数据交互格式(不占宽带,解析很简单)

js 将json字符串转换为json对象的方法解析

将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键

聊聊JSON Schema

json现在已经成为比较通用灵活的数据交换格式,尤其是在web方面,总是少不了它的身影,js原生就支持它。网页中与服务器中和服务器交换信息也基本上式基于json的。在现在的开发中,特别是在前后端分离的开发中,后端提供接口,前端通过接口拿取数据;

百度JSON LD结构化数据代码分享

百度JSON LD结构化数据代码分享,搞外贸网站,企业网站这么就,对谷歌的 schema 结构化数据比较熟悉,但是对百度的结构化数据就了解太少了

什么是JWT(JSON WEB TOKEN)

Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!