写在前面
原文地址:
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
,一个类型为 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 插件。(注:这个插件只是实验版本,稳定之前不建议在生产环境使用)
参考
关注公众号 全栈101,只谈技术,不谈人生
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。