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

2019-12-02 admin

写在前面

原文地址:

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

[转载]原文链接:https://segmentfault.com/a/1190000021168025

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80252.html

文章标题:JSON.parse 比 Object 字面量语法更快

相关文章
搜狐发力html5让用户更爽,自媒体人更嗨
曾经有资深互联网分析师说过”2015年,新闻综合类 APP 如果还没有大量的个性化阅读功能,将被淘汰出局。”枣哥非常同意此观点,移动互联网时代已经席卷全球,移动互联网代表的就是个性张扬的时代,在互联网圈说道个性张扬首先想到的是搜狐老板张朝阳...
2015-11-12
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
javascript字面量
你在JavaScript中使用文字代表值。 这些都是固定的值,而不是变量 从字面上 提供在你的脚本。 本节描述以下类型的文字: 数组 布尔 浮点型 整数 对象 字符串字面值 数组字面量 数组文字是零个或多个表达式的列表,每个代表一个数组元素...
2015-11-12
vue-video-player 更改视频源
背景:根据用户的信息来显示不同的视频源 <template> <div class="video-box-wrap" v-show="video.show"> ...
2018-05-05
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
HTML5:未来不可阻挡的力量
HTML5像是互联网行业扔下的一颗炸弹,有些人还未反应过来,原先专注的领域也许就将面临彻底的革新。比如像前几年疯狂甚至有点野蛮成长的App。虽然HTML5从出现到去年标准尘埃落定,一直在争议中曲折发展,但是各种H5页面的推广以及H5小游戏在...
2015-11-12
JavaScript变量作用域
当你声明一个变量的任何功能外,它被称为一个全局变量,在代码中任何地方都能访问到的对象拥有全局作用域。 当你声明一个变量在一个函数,它被称为一个局部变量,只能在函数内部访问。 JavaScript在ECMAScript 6之前没有块语句的规范...
2015-11-12
windows 下安装nodejs 环境变量设置
要设置两个东西,一个是PATH上增加node.exe的目录C:\Program Files\nodejs,一个是增加环境变量NODE_PATH,值为C:\Program Files\nodejs\node_modules 一、下载 去nod...
2017-03-18
JavaScript基本语法和规范
JavaScript是区分大小写的,使用Unicode字符集。 在JavaScript中,语句以“;”结尾。 JavaScript脚本的源文本被从左到右执行。 虽然有时“;”是不必要的,但我们建议总是在你的语句结束处添加分号;它将避免副作用...
2015-11-12
回到顶部