数据一致性 | 锤子前端

《Notion如何用CRDT解决并发编辑冲突》

Thu, 24 Sep 2026 12:31:04 GMT

《Notion如何用CRDT解决并发编辑冲突》

标签：
#分布式系统 #协同编辑 #CRDT算法 #数据一致性

总结：

文章要点：

1. Notion在2025年重新设计了底层文本编辑系统，从"最后写入获胜"(LWW)模式转向基于CRDT的并发编辑方案，解决了多人同时编辑同一区块时的数据丢失问题。

2. CRDT(无冲突复制数据类型)允许多个客户端保留本地数据副本，并以确定性方式合并同时发生的更改，确保不会丢失任何人的修改。

3. Notion使用的CRDT基于经典的RGA(可复制增长数组)序列CRDT，这是一个树形数据结构，每个字符都有唯一且稳定的ID，插入和删除操作都引用这些ID。

4. 删除操作采用"墓碑"机制——标记项目为已删除但保留在树中，因为可能有在途或离线操作依赖于已删除字符的ID。

5. 为提升存储效率，Notion将连续字符分组，为整组字符分配一个ID并存储运行长度，而不是为每个字符单独分配ID。

6. 支持富文本格式需要解决注释冲突，Notion引入了基于Peritext算法的操作，支持可扩展和不可扩展的注释类型(如粗体vs超链接)。

7. Notion的区块模型带来了独特挑战：当用户按下回车键分割区块时，需要处理文本在区块间移动时的并发编辑问题。

8. 为解决这一问题，Notion引入了"文本切片"概念——每个区块的文本项属于一个文本切片，分割区块时切片也会相应分割并移动到新区块。

9. 每个文本项ID由会话ID和Lamport时钟组成，确保ID的唯一性；指向同一原点的项目按逻辑时间戳排序，会话ID作为平局决胜因素。

URL：
https://www.notion.com/blog/how-notion-handles-concurrent-editing-with-crdts

Notion

How Notion handles concurrent editing with CRDTs

Building a CRDT-based rich-text system that merges concurrent edits across Notion blocks—without losing anyone’s work

《Microcharts：一句话里就能塞下的React微图表库》

Sat, 01 Aug 2026 09:20:15 GMT

《Microcharts：一句话里就能塞下的React微图表库》

标签：#前端 #React #数据可视化 #图表库 #性能优化 #无障碍 #ServerComponents

总结：
Microcharts是一个专为React设计的微图表库，提供106种图表类型，单个图表gzip后仅2.18-7KB（中位数5.25KB），零依赖。它主打"词级图表"理念——图表小到可以嵌入句子、表格单元格和KPI卡片中，无需坐标轴和图例，由上下文文字承载含义。支持服务端组件静态渲染（0KB客户端JS）、自动生成无障碍alt文本、单色系主题系统，并能在错误数据下优雅降级。

文章要点：
1. 小到离谱：中位数图表仅5.25KB gzip，最大7KB，零运行时依赖，React只是peer dependency，比通用图表库（如Recharts 106KB共享内核）轻了整整101KB
2. 一句话装得下：图表设计为"词级尺寸"，可以直接嵌入正文、表格单元格、KPI卡片甚至打印报告，读者不用离开句子就能理解数字
3. 106种图表统一API：传一个data数组就搞定，domain、color、title在每个图表里含义一致，TypeScript类型完备，编辑器能自动补全
4. 静态渲染零负担：在Server Component里渲染时完全不产生客户端JS，hydrate成本为0，对性能敏感场景极其友好
5. 坏数据也能优雅处理：NaN、空数组、单一数值都不会报错，会自动渲染成点、空白或水平线，不用写try/catch兜底
6. 无障碍开箱即用：自动生成alt文本（如"趋势上升27%，范围128到163"），每个图表一个tab焦点，支持方向键浏览，色盲安全配色和RTL都内置
7. 单色系主题系统：给一个accent主色就能自动推导出完整配色（包括正负色、分类色、暗色模式），整个页面一键换肤

URL：https://microcharts.dev/

microcharts

microcharts — Word-sized charts for React.

Word-sized React charts — tiny sparklines, micro charts & inline SVG trend lines. Zero runtime deps, ~2–7 kB interactive · ~1–4 kB static, accessible by default, RSC-safe. Sit in a sentence, table cell, KPI card, or AI reply.

《利用浏览器Canvas进行数据压缩》

Fri, 27 Feb 2026 02:29:12 GMT

《利用浏览器Canvas进行数据压缩》

标签：#前端 #JavaScript #CanvasAPI #数据压缩 #PNG编码 #浏览器兼容性 #SPA

总结：本文介绍了一种利用浏览器Canvas API将任意数据压缩为PNG图像格式的技术方案。通过将字节数据编码为像素颜色值并生成PNG图像，可以间接调用浏览器内置的压缩算法，实现无需外部依赖的数据压缩。该方法特别适用于需要在旧版浏览器中压缩数据、或需要将SPA状态序列化到URL中的场景，提供了Compression Streams API不可用时的替代方案。

文章要点：
- 背景需求：在静态网站和SPA中，有时需要将状态数据序列化到URL hash中，因此需要前端数据压缩方案；虽然2023年5月后Compression Streams API已普及，但旧版浏览器仍需替代方案
- 核心原理：浏览器内置了优化的压缩库用于HTTP请求和图片处理，通过将数据编码为PNG像素数据，可间接利用浏览器的无损压缩能力
- 技术实现：将Uint8Array数据按RGB通道编码到Canvas像素中（首字节存储最后一像素的有效字节数），Alpha通道固定为255以确保跨浏览器一致性，最终通过toDataURL("image/png")获取base64编码的压缩数据
- 解压流程：异步加载生成的PNG图片，读取像素数据后过滤Alpha通道，根据首字节指示的有效长度提取原始字节数据
- 方案特点：即使考虑PNG格式开销，压缩后的数据通常仍小于原始数据；完全基于浏览器原生API，无需外部库依赖
- 应用场景：旧浏览器兼容性支持、URL状态序列化、纯前端数据压缩需求

文章URL：https://jstrieb.github.io/posts/canvas-compress/

jstrieb.github.io

Using the Browser’s <canvas> for Data Compression

Old browsers don’t have JavaScript compression APIs, so we store data in pixel color channels and export to PNG to compress data.