文章
这里记录前端工程、性能优化、构建工具与效率工具的长期实践与踩坑。
- 109篇文章
- 13个分类
- 62个标签
分类
%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)
文章 · 设计系统可维护的设计令牌体系
从原理讲到落地，尽量把每个决策的依据说明白。
%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(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(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 秒
把这次改造的过程、数据与取舍完整记下来，方便下次少走弯路。