写在前面
原文地址：
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，只谈技术，不谈人生
