localStorage 不是免费的：它在阻塞你的主线程
来源：dev.to — 2026-09-26
📋 概述
你给编辑器加了自动保存，每隔几秒把 textarea 的内容写进 localStorage，刷新或标签页崩了都不会丢掉草稿。拿一段话测试，丝滑，发布。然后有人粘进一份六千字的稿子，从此每次自动保存，整个页面都会卡一拍：光标停顿、侧边栏动画抽搐、按键排队延迟落下。没有崩溃、没有报错、控制台干净，它就是反复地……停一下。作者说这不怪防抖逻辑，防抖没问题；卡顿来自一个你发誓是瞬间完成的函数——直到参数变大为止。
🔑 核心要点
- 第一反应是节流，但防抖只管频率，管不了单次调用的时长：一次 setItem 阻塞 40ms，调用得少只是 40ms 的冻结变少，不是变短。
- localStorage 的同步不是「通常很快」，而是规范层面同步：getItem/setItem 必须在本线程上跑完，期间别的处理器、绘制、rAF 都不能执行。
- 草稿不是短字符串：写之前要先 JSON.stringify 一个不断变大的对象，再序列化持久化，两步都在同一次调用、同一个线程上。
- 正解是换掉同步存储：IndexedDB 才是那种写入不该占据主线程的场景该用的东西。
💡 金句
一次 setItem 阻塞 40 毫秒，调用得再少也只是冻结的次数变少，而不是每次冻结的时间变短。
👍 0
👎 0
← 返回 dev.to 首页