React+Redux应用中：State与Cookie/LocalStorage读取性能对比

首先得明确：你说的是应用加载时仅执行一次的读取操作，这个前提很重要——毕竟如果是频繁读取的话差异会被放大，但单次场景下我们可以聚焦在纯性能数值和实际影响上。

直接给结论：纯性能层面，从Redux State读取肯定比从Cookie/LocalStorage读取要快，不过两者的差异在单次操作下可能大多数场景感知不到，下面具体拆解：

• 从Cookie/LocalStorage读取的性能特性
  这两个都是浏览器提供的同步阻塞API，读取操作会占用主线程直到完成：

  • LocalStorage的数据存在浏览器的磁盘存储区（不同浏览器实现略有差异，但本质是持久化到磁盘），读取时需要从磁盘加载数据到内存，这一步的IO开销是内存访问的N倍（哪怕是现代SSD，内存访问速度也比磁盘快几个数量级）。
  • Cookie的额外开销更大：浏览器存储的Cookie是一个完整的字符串，读取时需要先解析整个字符串，拆分出你需要的键值对，多了一层字符串解析的CPU开销。
    不过要注意：如果读取的数据量很小（比如几个字符串、简单JSON），单次操作的耗时可能只有几毫秒甚至更短，在应用加载的整体流程里可能不会造成明显卡顿。

• 从Redux State读取的性能特性
  Redux State本质是内存中的JavaScript对象，读取操作就是直接访问内存中的变量，属于纯内存操作，耗时可以忽略不计（纳秒级），完全不会阻塞主线程，也没有额外的IO或解析开销。
  当然前提是你的Redux State已经初始化完成（比如之前已经从Cookie/LocalStorage把数据加载到State里了），这时候读取就是零成本的。

总结 #

如果只看纯性能数值，内存访问（Redux State）远快于磁盘/浏览器存储的同步读取（Cookie/LocalStorage）。但因为你是仅执行一次的应用加载操作，除非你读取的数据量极大（比如几十KB甚至更大的JSON），否则实际使用中用户几乎感知不到两者的差异。

内容的提问来源于stack exchange，提问作者Eneko