文章与软件
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(79%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22240%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22660%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 性能优化前端监控里最容易被忽略的指标
从问题出现到方案落地，记录每一步判断与最终结果。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(42%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22180%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22700%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 前端工程把构建时间从 90 秒压到 12 秒
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。
'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'hsl(48%2C74%25%2C62%25)'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'1200'%20height%3D'900'%20fill%3D'url(%23g)'%2F%3E%3Cg%20fill%3D'%2523ffffff'%20opacity%3D'0.12'%3E%3Ccircle%20cx%3D'840'%20cy%3D'300'%20r%3D'240'%2F%3E%3Ccircle%20cx%3D'270'%20cy%3D'660'%20r%3D'300'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 工程化做一个小而稳的内容站：从选题池、写作节奏到发布流程，我们把能省掉的环节都省掉了，只留下真正影响读者体验的那几件事
长标题在首页会怎么收，取决于每个位置能放几行。
'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'hsl(220%2C74%25%2C62%25)'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'1200'%20height%3D'900'%20fill%3D'url(%23g)'%2F%3E%3Cg%20fill%3D'%2523ffffff'%20opacity%3D'0.12'%3E%3Ccircle%20cx%3D'840'%20cy%3D'300'%20r%3D'240'%2F%3E%3Ccircle%20cx%3D'270'%20cy%3D'660'%20r%3D'300'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 工程化一次持续了三个季度的性能优化复盘：从首屏指标全线告警到稳定达标的完整过程，包括我们试过的所有错误方向、被证伪的假设、最后真正起作用的少数几件事以及为此付出的取舍
首页负责让人想点，详情页负责把话说完。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(153%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22880%22%20cy%3D%22360%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22700%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 架构用三层缓存把接口 P95 拉回 200ms
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(116%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22840%22%20cy%3D%22300%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22620%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 构建工具一次线上白屏的排查全过程
这篇整理了我们在这件事上的实践，包含可以直接复用的清单。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(227%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22240%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22620%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 缓存CSS 布局里容易出错的细节
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(190%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22920%22%20cy%3D%22180%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22660%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 测试React 的渲染与提交阶段
复盘一次真实场景，指标、工具与最后的选择都写在里面。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(301%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22840%22%20cy%3D%22360%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22660%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 踩坑记录单测覆盖率的取舍
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(264%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22300%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22700%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 设计系统可维护的设计令牌体系
从原理讲到落地，尽量把每个决策的依据说明白。