边做边查
基于内容真实功能整理的操作指南与边界说明，写给你动手时真正会踩的坑。每篇都配套站内工具，边读边练。
前端实战
45人人都遇到过的 7 种 JSON 校验错误（附一行修复法）
JSON 校验失败 90% 落在这 7 种：中文引号、尾随逗号、单引号、注释、裸键、真实换行、非法数字——每种附一行修复，另加报错对照表、BOM 隐形杀手与「校验通过 ≠ 数据正确」的 schema 底线。
贪婪、懒惰与灾难回溯：解释大多数正则 Bug 的三种行为
正则匹配多了、匹配少了、偶尔永远跑不完——三种症状对应贪婪、懒惰与灾难回溯。讲清回溯怎么发生、如何一眼认出危险写法、以及三条上线前的自查清单。
CORS 报错怎么排查：从「预检过了还是失败」到一行响应头修好
控制台那句 CORS policy 说的不是「服务器拒绝了你」，而是「服务器少回了一个响应头」。按症状反查：为什么 Access-Control-Allow-Origin: * 配了还失败、withCredentials 为什么不让用通配符、预检 OPTIONS 返回 200 但实际请求仍被拦、Vary: Origin 缺了导致缓存串味。
XSS 转义怎么做：别再手动 replace 尖括号，四个上下文各有各的规则
记不住 < 不是问题，问题是不知道自己在哪个上下文里输出。HTML 正文、属性值、JavaScript 字符串、URL 四套规则各不通用：正文用 textContent，属性要加引号再转义引号，脚本里要转义斜杠和引号，URL 要做协议白名单。附上下文对照表与一份最小可用 CSP。
URL 特殊字符怎么编码：&、+、%、# 各走哪条路，一条规则说清
参数莫名被截断、多出一个 key、加号变空格、中文变乱码、签名怎么都对不上——五个症状都源于「该用哪条编码路径」没分清。给出三条规则：哪些字符必须编码、encodeURI / encodeURIComponent / URLSearchParams 各自的分工、以及二次编码是在哪一层被叠加进去的。
图片格式怎么选：WebP、AVIF、SVG、JPEG 各自的取舍和转换时机
格式选择不是「谁更先进」，而是「谁来解码」。给出一张真实对照表（体积、是否无损、透明、动画、兼容性），讲清 WebP 为什么能当默认项、AVIF 更大的收益要付出哪三个代价、JPEG 在哪些场景仍然是对的、SVG 什么时候值得退回位图，以及一张图「缩放 → 转格式 → 压缩」的正确顺序。
文件上传多大合适：体积、格式与限制一次说清
「文件太大」不是一句提示能解决的。梳理真实存在的几档体积限制（1MB / 2MB / 5MB / 10MB 各适合什么场景）、Base64 为什么会涨三分之一、格式白名单怎么设计才不给后端留坑、图片先压到目标大小的顺序，以及批量上传时最常翻车的三个细节。
#999999 放在白底上为什么看不清？对比度怎么改到 4.5:1
设计稿挑了一档灰做次要文字，肉眼「挺淡」，审计却判不过 AA——症结在相对亮度不在色号。本文讲清 WCAG 对比度的计算式、AA 与 AAA 四个阈值分别管什么、半透明色叠加后对比度为什么反而更差，以及不改设计稿也能把文字改到 4.5:1 的四步做法。
颜色格式互转：HEX / RGB / HSL / HSV 为什么来回转会变色
把 #4f8cff 转成 hsl(219,100%,65%)，再用同一套公式转回来得到的是 #4d8bff——差三个色阶，不是公式写错，而是 8 位量化加四舍五入。本文给出四种格式的取值边界、可直接运行的互转函数、九个往返有色差的真实样本，以及「同一个色值在不同屏幕上不一样」的六个真实原因。
Markdown 转 HTML 粘进公众号：样式丢失、图片裂开与表格错位怎么修
Markdown 转出的 HTML 一贴进公众号编辑器就变形：标题没层级、代码块塌成一行、外链图片全裂、表格串行。这四类症状各有具体成因——编辑器只认内联样式、图片要走 base64 或图床、表格先用对齐工具生成对齐标记，以及从网页反向抓回干净 Markdown 的完整流程。
Mermaid 渲染报错怎么排查：Parse error、空白字符与 flowchart 迁移
粘进渲染器一片空白，日志只给一行 Parse error on line 7。八成原因不在图本身，而在节点文本里的中文括号与全角冒号、零宽空格、以及 graph 与 flowchart 的语法差异。本文给出最小可用模板、时序图五种常见错法、按报错信息反查病灶的对照表，以及一条从最小复现到定位行号的排查顺序。
二维码扫不出来怎么办：纠错级别、模块尺寸与印刷的硬约束
扫不出只有四类原因：模块太小、对比度不足、纠错级别不够、内容超容量。讲清 L/M/Q/H 分别能遮住多少、版本与容量的换算、条码和二维码怎么选，以及批量生成与嵌入页面的实际做法。
px、rem、em、vw 到底用哪个：CSS 单位选择与换算实战
一份能落地的 CSS 单位决策：字号与间距优先 rem、组件内相对缩放才用 em、视口尺寸用 vw、边框阴影用 px；附 px↔rem 换算表、62.5% 方案的利弊、为什么纯 vw 伤害无障碍，以及用 clamp() 做流式缩放的完整写法。
CSS 居中怎么写：4 种方案按场景对号入座，不用再背十种
别再背「CSS 居中的 N 种方法」：水平居中一行 text-align 或 margin auto，垂直居中首选 Flex 的 align-items，同时居中两手抓就 justify-content + align-items，绝对定位居中留给必须脱离文档流的浮层。每种方案附完整代码、适用边界与最常见的不生效原因。
Flex 布局十个常见翻车点：为什么它不换行、被压扁、撑不开
Flex 十个高频翻车逐一对照：flex-direction 换轴后对齐反转、默认不换行、flex-shrink 把内容压扁、flex-basis 与 width 打架、margin auto 在主轴的魔法、gap 与 margin 的取舍、min-width:auto 撑爆容器——每个坑附最小修复代码。
z-index 写了 9999 还是被盖住：层叠上下文一次讲透
z-index 无效的根因从来不是数值不够大，而是层叠上下文：z-index 只在同一个上下文里比较，transform、opacity、filter、position 都会凭空创建新上下文，把你的 9999 关进局部牢笼。本文给出层叠顺序七层图、常见「隐形上下文」清单、以及三步定位法。
Tailwind 上手 30 分钟：原子类思维、常用类名速查与迁移坑
面向第一次写 Tailwind 的你：原子类思维的三个转变（不再起 class 名、样式跟着结构走、约束来自设计令牌），高频类名速查表（布局 / 间距 / 字体 / 颜色 / 状态），任意值语法与响应式、状态前缀，以及从手写 CSS 迁移时最容易踩的四个坑。
移动端适配从哪开始：viewport、安全区、1px 边框与流式字号
一份按顺序执行的移动端适配清单：viewport meta 三要素、dip 与 DPR 的关系、100vh 在手机上的坑与 svh/dvh 修法、env(safe-area-inset-*) 刘海屏适配、1px 边框的三种实现取舍，以及 clamp() 流式字号让布局在 360–430px 宽度带内自然呼吸。
CSS 样式为什么不生效：特异性权重一次算清，别再堆 !important
一份可执行的特异性排查指南：(ID, 类, 元素) 三元组怎么算、:where 归零与 :is 取最大、伪元素计在哪一位、内联样式和 !important 的真实顺序，以及「写了样式却没生效」的完整排查顺序。
白屏与布局跳动：骨架屏什么时候用、怎么做才不像摆设
骨架屏的实操指南：它解决的是「布局可预期」而不是「等待变短」；哪些区域值得做骨架、DOM 到灰条/灰块的映射规则、shimmer 与 pulse 动画的取舍、显示时长与闪烁阈值，以及把现有 HTML 一键转成骨架的安全做法。
响应式字号别再堆媒体查询：clamp() 与 Type Scale 一套搞定
一套能落地的流式排版方案：clamp(最小, 首选, 最大) 的几何意义、rem+vw 混合公式怎么推导、从 xs 到 4xl 的完整字号阶梯、为什么不能用裸 vw，以及 CSS 变量 / Tailwind / SCSS 三种落地写法。
OKLCH 与广色域：为什么你的颜色在别人的屏幕上不一样
一篇讲透现代 CSS 颜色：sRGB 的历史包袱、OKLCH 的 L/C/H 三分量为什么对感知更均匀、display-p3 能多出哪些颜色、@media (color-gamut) 的回落写法、等感知明度色阶怎么做，以及检查颜色是否超出目标色域的完整流程。
分享出去没有卡片图：OG 协议、1200×630 与排查清单
把链接分享出去该有的样子：OG 标签的最小集合、各平台的图片尺寸硬约束、为什么图必须是绝对地址、抓取缓存怎么刷新、X/Twitter 与微信的差异，以及一张合规分享图的完整制作流程。
JS 数组去重的 6 种写法：原始值 Set 一行搞定，对象数组按 key 去重要用 Map
数组去重最常翻车的场景：对象数组用 Set 去不掉——Set 按引用比较，两个内容相同的对象也不相等。本文给出原始值一行去重、对象数组按 key 去重的 Map 写法、保留首次出现项的 filter 变体，附六种方法决策表与「去不掉」的排查清单。
防抖和节流的区别一次说清：搜索框用防抖、滚动监听用节流（附 10 行手写实现）
防抖是「停下来了才执行」，节流是「固定频率执行」——搜索框要防抖，滚动监听要节流。本文给出一眼能懂的手写实现（含立即执行版），并整理最常见的翻车原因：在事件回调里现场创建防抖函数，等于没防抖。
JSON.parse(JSON.stringify) 深拷贝丢什么：undefined、Date、RegExp、循环引用四个坑
JSON.parse(JSON.stringify) 会悄悄丢掉 undefined 字段和函数，把 Date 变成字符串、RegExp 变成空对象，遇到循环引用直接抛 TypeError。现代浏览器请直接用 structuredClone，本文逐项对照两种方式的差异并给出选型建议。
前端日期格式化别再拼字符串：toISOString 的时区坑、new Date 解析兼容性与手写 formatDate
toISOString 输出的是 UTC 时间，直接 slice(0,10) 取日期，在北京时间每天早上 8 点前都会退一天。本文讲清 new Date 的解析兼容性坑、秒/毫秒时间戳互转，并给一个支持非法输入兜底的手写 formatDate。
localStorage 五个坑：只存字符串、5MB 配额、隐私模式、跨标签页同步与过期策略
localStorage 只能存字符串：对象直接 setItem 进去会变成 '[object Object]'。此外还有 5MB 配额写满抛错、隐私模式不可用、storage 事件本页不触发、数据永不过期四个坑，本文一次讲完并给出带过期时间的读写封装。
Grid 还是 Flex？一张场景决策表 + 混用时最容易踩的 3 个布局坑
Grid 和 Flex 不是二选一的竞争关系，而是二维与一维的分工。本文先给一张「什么时候用 Grid、什么时候用 Flex」的场景决策表，再拆解两者混用时最常见的三个布局错误：用 flex 属性控制 grid 子项、justify-content 覆盖 justify-items 的居中错觉、以及 grid-template-columns 与 minmax 不当导致的溢出。每个错误都附一行修复方案与排查思路。
文字超出显示省略号：单行 white-space 写法、多行 line-clamp 与表格单元格失效原因
text-overflow: ellipsis 看起来一行代码的事，实际有三种场景、三种写法，还有一堆「写了却不生效」的坑。本文给出单行截断的三件套写法、多行截断的 -webkit-line-clamp 现代方案，重点拆解表格单元格与 Flex/Grid 子项中省略号失效的根本原因（min-width: auto 与 table 布局的宽度算法），每个失效场景都配一行修复。
position: sticky 不生效的 7 个原因：父级 overflow、父容器高度与层叠上下文逐个排查
position: sticky 的失效从来不是玄学，而是三个生效前提被打破：父级 overflow 不是 visible、父容器高度不足以产生滚动空间、或元素被 fixed/transform 的祖先带走。本文列出 7 个最常见原因并给出症状对照表与一行修复，附一套从 DevTools 到代码的逐层排查流程，两分钟定位粘住不动的问题。
CSS 变量实战：主题切换、calc 组合、继承回退与媒体查询里的限制
CSS 自定义属性远不止「存个颜色」：它能在 :root 与 data-theme 之间实现零 JS 主题切换，能和 calc 组合成设计令牌系统，也有一套值得背下来的继承与回退规则。同时它有明确的能力边界——不能在媒体查询的条件里使用。本文把这些实战模式与限制一次讲清，附可用代码。
宽表格在手机上怎么办：横滑容器、粘性首列与卡片化三种方案取舍与实现
数据表格是响应式设计里最难啃的组件之一。本文对比三种主流方案：外层横滑容器（改动最小）、粘性首列（保留表头语义）、移动端卡片化（体验最佳但成本最高），给出取舍决策表与完整实现代码，包括 sticky 首列在表格里的正确写法与卡片化的 data-label 技巧。
fetch 不报错却拿不到数据？404/500 不 reject 的原因与超时重试写法
fetch 只有网络层失败才会 reject，404/500 一样走 then，这就是「不报错却拿不到数据」的根源。本文给出 res.ok 检查封装、JSON 安全解析、AbortController 超时中止与指数退避重试的完整可运行代码，附一张五步排查对照表，帮你快速定位问题出在哪一层。
script 的 defer 与 async 区别：为什么头部脚本拿不到 DOM 元素
script 默认会阻塞 HTML 解析，这正是头部脚本 getElementById 拿到 null 的原因。本文用一张对照表讲清默认、defer、async 三种加载方式的执行时机差异，给出 DOMContentLoaded 标准写法、动态脚本顺序控制与现在的脚本放置建议。
别再用 scroll 事件监听滚动了：IntersectionObserver 四大高频场景
scroll 事件每秒触发几十次，回调里读布局还会强制回流。IntersectionObserver 把可见性判断交给浏览器异步处理，主线程几乎零开销。本文覆盖图片懒加载、曝光埋点、吸顶导航（sentinel 哨兵法）、无限列表四个场景的完整代码与五个常见坑。
input 只能输入数字怎么写：type=number 的坑与 composition 事件处理
type="number" 允许输入 e、滚轮会改值、maxlength 失效——它不是为输入校验设计的。本文给出 type="text" + inputmode + input 事件正则过滤的完整方案，重点讲清中文输入法 composition 事件的处理时机，附可直接复制的 bindNumberOnly 实现。
强缓存和协商缓存怎么配：Cache-Control、ETag 与 304 不生效的排查顺序
强缓存命中不发请求，协商缓存命中返回 304。拆开每个 Cache-Control 指令的真实语义，给出 304 不生效时的排查顺序与四个高频误判。
LCP、CLS、INP 怎么量怎么修：三个核心指标的阈值、测量 API 与优化优先级
LCP 2.5 秒、CLS 0.1、INP 200 毫秒，阈值都按 75% 分位算。拆开 LCP 四阶段、CLS 四来源与 INP 的真实计时范围，附可直接粘贴的采集代码。
require 与 import 混用报错：ESM、CJS 判定规则与 5 条报错逐条修
扩展名和最近的 package.json 决定文件是 ESM 还是 CJS，混用报错九成源于此。五条报错原文对应根因与最小修复，附 __dirname 与 require 的替代写法。
^1.2.3 和 ~1.2.3 到底差在哪：版本范围、lockfile 与 ERESOLVE 冲突排查
同一个 ^1.2.3，两台机器装出来的版本可能完全不同。把 semver 区间、lockfile 与 peerDependencies 三层机制拆开看，再谈 ERESOLVE 与 overrides，结论才不会正好相反。
SVG 导出后必须删掉的五类垃圾：viewBox、currentColor 与体积优化
从 Figma、Sketch、Illustrator 导出的 SVG，一半体积和全部换色能力往往是被导出器自己弄丢的。删对五类内容即可恢复，并说清四种嵌入方式的边界。
字体加载慢导致文字闪一下：font-display、preload 与中文字体子集化的取舍
文字先空白后跳动，多半不是字体太大，而是 font-display 和 preload 配错了。五个取值的行为差异，加上中文字体子集化的真实成本。
主线程卡住三秒：Web Worker 的适用边界、通信成本与五个必踩的坑
Worker 只解决主线程被长任务占满这一类问题，代价是序列化、调试和构建复杂度。先量出任务耗时是否超过 5ms，再决定要不要把它搬走。
动画为什么会卡：transform/opacity 与 reflow、will-change 的正确用法
卡顿通常不是性能不够，而是动错了属性。改 width 会让浏览器从布局阶段重跑，改 transform 只走合成。60fps 下每帧预算只有 16.7ms。
数据与编码
6Base64 的六个坑：中文乱码、加号变空格与 data URI
Base64 本身只是查表替换，坑全在边界上：中文要先过 UTF-8、URL 里加号会变空格、atob 动不动报错、图片转 data URI 会膨胀三分之一——六个高频场景逐一讲清修法。
时间戳 10 位与 13 位：秒、毫秒与差 8 小时的真相
10 位是秒、13 位是毫秒，混用就差一千倍；「差 8 小时」不是时间戳错了，是 UTC 与本地时区的展示错位。一篇讲清互转换算、各语言取值写法对照和存储选型。
UUID、ULID 与雪花 ID：数据库主键到底怎么选
自增 ID 泄露量级、随机 UUID 打散索引、ULID 与雪花有序但各有代价——一张对比表加一个决策框架，把「主键怎么选」从玄学变成三道题。
中文乱码是怎么来的：看懂长相就能修
「锟斤拷」是替换字符连环套，「我」是 UTF-8 被 Latin-1 误读，「????」是写入时就丢了——乱码的长相对应固定的编码错位。一张长相速查表加三层排查法，多数乱码十分钟内可修。
CSV 打开是乱码：编码判断、公式注入与导入 Excel 的完整排查
CSV 乱码的根因只有一个——写文件和读文件用了不同编码。本文给一张「乱码症状反查真实编码」的对照表、Excel 导入的分隔符与列类型设置、以及公式注入（= + - @ 开头）的两种堵法，按顺序走一遍基本都能定位。
JSON Schema 校验怎么写：type、required 与 $ref 的四个常见误用
多数 JSON Schema 失效不是写得太少，而是写错位置：required 塞进属性、用 nullable 代替 type 数组、oneOf 分支重叠。校验器不会报错，坏数据照过。
安全与加密
5JWT 速查手册：结构、声明与几个安全误区
JWT 是「可验签的 JSON」而不是加密数据：三段结构怎么读、常用注册声明有哪些、HS256 与 RS256 怎么选、alg=none 与 localStorage 两个高频误区——一篇手册全部对齐。
密码怎么存才安全：加盐哈希、bcrypt / Argon2 与泄露后的补救顺序
密码不能明文存，也不能只做一次 SHA-256、更不能用 MD5。讲清加盐到底解决什么、bcrypt 的 cost 怎么定、存量密码如何无感迁移，以及数据库已经泄露后的补救顺序，附算法对照表与能直接跑的 Node 代码。
MD5、SHA-1、SHA-256 怎么选：哈希不是加密，一次说清
哈希是单向摘要，没有密钥就解不开；加密有密钥且可逆，Base64 是编码。讲清 MD5 还剩哪些合法用途、HMAC 防的到底是什么、为什么比较哈希要定长比较，以及文件校验最容易踩的换行与编码坑。
HTTPS 证书报错怎么排查：过期、域名不符、链不全
浏览器报「你的连接不是私密连接」时，先分清是过期、域名不符还是链不全——三者的排查入口完全不同。给出 openssl s_client 一条命令拿到服务器真实下发的证书、五步排查顺序、链不全的根因与修法，以及指纹比对和换证顺序。
五个安全响应头怎么配：CSP、HSTS、X-Frame-Options 与上线前的自检顺序
安全头的价值不在数量，而在顺序。先用 Report-Only 收集违规，再切强制，最后才碰 HSTS；preload 是唯一基本不可撤回的配置。
更多主题
10HTTP 状态码实战：真正常用的那些码，以及每个码背后的决策
状态码不用背全表：记住分类口诀和十来个高频码，再看每个码背后的设计决策——401 还是 403、400 还是 422、301/302/307/308 怎么选、为什么「全部返回 200」是反模式。
SQL 注入怎么防：参数化查询、ORM 边界与五个仍然高危的写法
根治手段只有参数化查询这一条。讲清单引号为什么会闭合、WHERE 后拼接与 ORDER BY 的本质区别、LIKE 通配符和数字类型的坑，以及 ORM 里哪些接口其实拼了字符串——附「症状 → 成因 → 修法」对照表和上线前自查清单。
PDF 合并、拆分、加密与体积：一套能落地的处理顺序
先弄清 PDF 为什么大，再按「合并 → 拆分 → 压缩 → 加密 → 导出」的顺序动手。讲清合并时页序和书签的处理、拆分按页码还是按书签、加密的真实能力边界（不是所有 PDF 都能加密）、扫描件压缩为什么常压不动，以及什么时候该停下来说「别压了」。
Cron 表达式 5 位还是 6 位：从入门到排错的完整对照
同一个 */5 写法在 Linux 上是每 5 分钟、在 Java 里是每 5 秒——差别只在那一位可选的秒字段。本文讲清 5 位与 6 位两种方言的字段含义、四个容易写错的取值范围、@daily 这类简写，以及「任务不跑」时按什么顺序查。
SQL 索引与 EXPLAIN 入门：慢查询从哪看、索引建在哪最有用
索引不是越多越好，加错索引比不加更慢。本文讲清 B+ 树索引为什么能加速、等值与范围查询的差别、联合索引的列序规则（最左前缀）、什么情况下索引会失效，以及用 EXPLAIN 的 type / rows / Extra 三列判断一条慢查询该优化什么。
文本、JSON、Markdown 差异对比：三类工具怎么选、结果怎么读
同样是「比对两份文件」，文本要看行级增删、JSON 要按 key 对齐并把数组顺序影响降下来、Markdown 要按表格和标题结构看。选错工具的典型症状是：JSON 对比满屏都是改，因为它把数组重排当成了全部变化。
Git 误删文件怎么恢复：reset --soft 和 --mixed 差在哪
结论先行：进过一次提交的东西都能靠 reflog 捞回来，只在工作区、从未 add 过的改动 Git 没有任何记录。本文按「误改工作区 / 误 add / 误 commit / 已 push」四种场景给出命令对照、reflog 抢救步骤，以及 reset --soft、--mixed、--hard 分别动到哪一层。
Linux 管道与重定向：grep 过滤日志的常见用法和六个坑
管道就是「把左边命令的 stdout 接到右边命令的 stdin」，一句话讲清 |、>、2>&1 的真实语义。本文给出从日志里筛出目标行的三条命令链、grep 参数速查表，以及 grep 配管道最常踩的六个坑：stdin 被占用、SIGPIPE、xargs 与空格、2>&1 顺序、sort 吃内存和 sudo 的位置。
Address already in use 怎么解决：端口占用与进程排查顺序
启动报 EADDRINUSE / Address already in use:8025，九成是上一个进程没退干净。本文按平台给出定位占用者的命令（lsof、ss、netstat -ano、tasklist）、kill 的正确顺序、kill -9 之后端口仍被占的 TIME_WAIT 原因，以及三个「不是端口问题」的假象。
chmod 755 和 644 的真实含义：权限位、目录 x 与 umask
Permission denied 的根因不止「权限不够」：755 是 rwxr-xr-x，644 是 rw-r--r--，目录没有 x 就进不去、文件没有 x 就不能执行，新文件的权限还受 umask 二次裁剪。本文给出数字到 rwx 的换算表、常见权限的适用场景，以及 chmod -R 777 为什么危险。