比 JSON.stringify 快两倍的fast-json-stringify

前言

信任咱们对JSON.stringify并不陌生，通常在很多场景下都会用到这个API，最常见的便是HTTP恳求中的数据传输， 因为HTTP 协议是一个文本协议，传输的格局都是字符串，但咱们在代码中常常操作的是 JSON 格局的数据，所以咱们需求在回来呼应数据前将 JSON 数据序列化为字符串。但咱们是否考虑过运用JSON.stringify可能会带来功能危险，或许说有没有一种更快的stringify办法。

假设这篇文章有协助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新文章～

JSON.stringify的功能瓶颈

因为 JavaScript 是动态言语，它的变量类型只有在运行时才干确认，所以 JSON.stringify 在执行过程中要进行很多的类型判别，对不同类型的键值做不同的处理。因为不能做静态分析，执行过程中的类型判别这一步就不可避免，而且还需求一层一层的递归，循环引用的话还有爆栈的危险。

咱们知道，JSON.string的底层有两个十分重要的过程：

• 类型判别
• 递归遍历

既然是这样，咱们能够先来对比一下JSON.stringify与一般遍历的功能，看看类型判别这一步究竟是不是影响JSON.stringify功能的主要原因。

JSON.stringify 与遍历对比

const obj1 = {}, obj2 = {}
for(let i = 0; i < 1000000; i++) {
    obj1[i] = i
    obj2[i] = i
}
function fn1 () {
    console.time('jsonStringify')
    const res = JSON.stringify(obj1) === JSON.stringify(obj2)
    console.timeEnd('jsonStringify')
}
function fn2 () {
    console.time("for");
    const res = Object.keys(obj1).every((key) => {
        if (obj2[key] || obj2[key] === 0) {
          return true;
        } else {
          return false;
        }
      });
    console.timeEnd("for");
}
fn1()
fn2()

从成果来看，两者的功能差距在4倍左右，那就证明JSON.string的类型判别这一步仍是十分耗功能的。假设JSON.stringify能够越过类型判别这一步是否对类型判别有协助呢？

定制化更快的JSON.stringify

依据上面的猜想，咱们能够来测验完成一下：

现在咱们有下面这个目标

const obj = {
  name: '南玖',
  hobby: 'fe',
  age: 18,
  chinese: true
}

上面这个目标经过JSON.stringify处理后是这样的：

JSON.stringify(obj)
// {"name":"南玖","hobby":"fe","age":18,"chinese":true}

现在假设咱们已经提早知道了这个目标的结构

• 键名不变
• 键值类型不变

这样的话咱们就能够定制一个更快的JSON.stringify办法

function myStringify(obj) {
    return `{"name":"${obj.name}","hobby":"${obj.hobby}","age":${obj.age},"chinese":${obj.chinese}}`
}
console.log(myStringify(obj) === JSON.stringify(obj))  // true

这样也能够得到JSON.stringify一样的作用，条件是你已经知道了这个目标的结构。

事实上，这是许多JSON.stringify加速库的通用手段：

• 需求先确认目标的结构信息

• 再依据结构信息，为该种结构的目标创建“定制化”的stringify办法

• 内部完成仍然是这种字符串拼接

更快的fast-json-stringify

fast-json-stringify 需求JSON Schema Draft 7输入来生成快速stringify函数。

这也便是说fast-json-stringify这个库是用来给咱们生成一个定制化的stringily函数，从而来提升stringify的功能。

这个库的GitHub简介上写着比 JSON.stringify() 快 2 倍，其实它的优化思路跟咱们上面那种办法是共同的，也是一种定制化stringify办法。

语法

const fastJson = require('fast-json-stringify')
const stringify = fastJson(mySchema, {
  schema: { ... },
  ajv: { ... },
  rounding: 'ceil'
})

• schema: $ref 特点引用的外部形式。
• ajv: ajv v8 实例对那些需求ajv.
• rounding: 设置当integer类型不是整数时如何舍入。
• largeArrayMechanism：设置应该用于处理大型（默认情况下20000或更多项目）数组的机制

scheme

这其实便是咱们上面所说的定制化目标结构，比方仍是这个目标：

const obj = {
  name: '南玖',
  hobby: 'fe',
  age: 18,
  chinese: true
}

它的JSON scheme是这样的：

{
  type: "object",
  properties: {
    name: {type: "string"},
    hobby: {type: "string"},
    age: {type: "integer"},
    chinese: {type: 'boolean'}
  },
  required: ["name", "hobby", "age", "chinese"]
}

AnyOf 和 OneOf

当然除了这种简略的类型界说，JSON Schema 还支撑一些条件运算，比方字段类型可能是字符串或许数字，能够用 oneOf 关键字:

"oneOf": [
  {
    "type": "string"
  },
  {
    "type": "number"
  }
]

fast-json-stringify支撑JSON 形式界说的anyOf和**oneOf关键字。**两者都有必要是一组有效的 JSON 形式。不同的形式将依照指定的次序进行测试。stringify在找到匹配项之前有必要测验的形式越多，速度就越慢。

anyOf和oneOf运用ajv作为 JSON 形式验证器来查找与数据匹配的形式。这对功能有影响——只有在万不得已时才运用它。

关于 JSON Schema 的完整界说，能够参考 Ajv 的文档，Ajv 是一个盛行的 JSON Schema验证东西，功能表现也十分出众。

当咱们能够提早确认一个目标的结构时，能够将其界说为一个 Schema，这就相当于提早告知 stringify 函数，需序列化的目标的数据结构，这样它就能够不用再在运行时去做类型判别，这便是这个库提升功能的关键所在。

简略运用

const fastJson = require('fast-json-stringify')
const stringify = fastJson({
  title: 'myObj',
  type: 'object',
  properties: {
    name: {
      type: 'string'
    },
    hobby: {
      type: 'string'
    },
    age: {
      description: 'Age in years',
      type: 'integer'
    },
    chinese: {
      type: 'boolean'
    }
  }
})
console.log(stringify({
  name: '南玖',
  hobby: 'fe',
  age: 18,
  chinese: true
}))
// 

生成 stringify 函数

fast-json-stringify是跟咱们传入的scheme来定制化生成一个stringily函数，上面咱们了解了怎样为咱们目标界说一个scheme结构，接下来咱们再来了解一下如何生成stringify。

这里有一些东西办法仍是值得了解一下的：

const asFunctions = `
function $asAny (i) {
    return JSON.stringify(i)
  }
function $asNull () {
    return 'null'
  }
function $asInteger (i) {
    if (isLong && isLong(i)) {
      return i.toString()
    } else if (typeof i === 'bigint') {
      return i.toString()
    } else if (Number.isInteger(i)) {
      return $asNumber(i)
    } else {
      return $asNumber(parseInteger(i))
    }
  }
function $asNumber (i) {
    const num = Number(i)
    if (isNaN(num)) {
      return 'null'
    } else {
      return '' + num
    }
  }
function $asBoolean (bool) {
    return bool && 'true' || 'false'
  }
  // 省略了一些其他类型......
`

从上面咱们能够看到，假设你运用的是 any 类型，它内部仍然仍是用的 JSON.stringify。 所以咱们在用TS进行开发时应避免运用 any 类型，因为假设是依据 TS interface 生成 JSON Schema 的话，运用 any 也会影响到 JSON 序列化的功能。

然后就会依据 scheme 界说的具体内容生成 stringify 函数的具体代码。而生成的方式也比较简略：经过遍历 scheme，依据不同数据类型调用上面不同的东西函数来进行字符串拼接。感兴趣的同学能够在GitHub上查看源码

总结

事实上fast-json-stringify仅仅经过静态的结构信息将优化与分析前置了，经过开发者界说的scheme内容能够提早知道目标的数据结构，然后会生成一个stringify函数供开发者调用，该函数内部其实便是做了字符串的拼接。

• 开发者界说 Object 的 JSON scheme
• stringify 库依据 scheme 生成对应的模版办法，模版办法里会对特点与值进行字符串拼接
• 最后开发者调用生成的stringify 办法

最后

原文首发地址点这里，欢迎咱们关注公众号 「前端南玖」，假设你想进前端沟通群一起学习，请点这里

我是南玖，咱们下期见！！！