[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-info":3,"article-categories":4,"article-3":25,"detail-hot":33,"article-related-3":73},null,{"list":5,"total":23},[6,11,15,19,22],{"id":7,"name":8,"sort":7,"createdAt":9,"updatedAt":9,"articleCount":10},1,"技术笔记","2026-11-12T18:30:42.000Z",16,{"id":12,"name":13,"sort":12,"createdAt":9,"updatedAt":9,"articleCount":14},2,"前端开发",38,{"id":16,"name":17,"sort":16,"createdAt":9,"updatedAt":9,"articleCount":18},3,"后端与架构",53,{"id":20,"name":21,"sort":20,"createdAt":9,"updatedAt":9,"articleCount":7},4,"产品与思考",{"id":23,"name":24,"sort":23,"createdAt":9,"updatedAt":9,"articleCount":12},5,"生活随笔",{"id":16,"title":26,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":28,"createdAt":29,"updatedAt":30,"excerpt":31,"content":32},"前端性能优化：从首屏 3.2s 到 1.1s",false,1852,"2026-11-07T18:30:42.000Z","2026-11-14T00:24:33.000Z","上个月接手一个后台项目，首屏加载 3.2 秒，用户反馈「点开要等一下」。经过一周优化，稳定在 1.1 秒左右。下面按收益从高到低记录。 1. 先量化，再优化 优化之前必须建立基线。我使用的是 Lighthouse + 真实用户监控两条线：实验室数据看瓶颈，真实数据看用户感受。 2. 拆包与懒加载 路由级代码分割，首屏只…","\u003Cp>上个月接手一个后台项目，首屏加载 3.2 秒，用户反馈「点开要等一下」。经过一周优化，稳定在 1.1 秒左右。下面按收益从高到低记录。\u003C\u002Fp>\n\u003Ch2>1. 先量化，再优化\u003C\u002Fh2>\n\u003Cp>优化之前必须建立基线。我使用的是 Lighthouse + 真实用户监控两条线：实验室数据看瓶颈，真实数据看用户感受。\u003C\u002Fp>\n\u003Ch2>2. 拆包与懒加载\u003C\u002Fh2>\n\u003Cul>\n  \u003Cli>路由级代码分割，首屏只加载必要模块\u003C\u002Fli>\n  \u003Cli>图表、编辑器等重型依赖改为动态导入\u003C\u002Fli>\n  \u003Cli>对图片统一使用懒加载与合适的压缩格式\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>3. 减少主线程阻塞\u003C\u002Fh2>\n\u003Cp>把非关键逻辑延后到 \u003Ccode>requestIdleCallback\u003C\u002Fcode>，把大列表改成虚拟滚动，长任务从 320ms 降到 60ms 以内。\u003C\u002Fp>\n\u003Ch2>4. 缓存策略\u003C\u002Fh2>\n\u003Cp>静态资源使用内容哈希 + 长缓存；接口按业务特点设置 SWR 缓存，页面切换时优先展示旧数据再后台更新。\u003C\u002Fp>\n\u003Ch2>结果对比\u003C\u002Fh2>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\u003Cth>指标\u003C\u002Fth>\u003Cth>优化前\u003C\u002Fth>\u003Cth>优化后\u003C\u002Fth>\u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\u003Ctd>首屏时间\u003C\u002Ftd>\u003Ctd>3.2s\u003C\u002Ftd>\u003Ctd>1.1s\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>首次内容绘制\u003C\u002Ftd>\u003Ctd>1.8s\u003C\u002Ftd>\u003Ctd>0.7s\u003C\u002Ftd>\u003C\u002Ftr>\n    \u003Ctr>\u003Ctd>JS 体积\u003C\u002Ftd>\u003Ctd>860KB\u003C\u002Ftd>\u003Ctd>310KB\u003C\u002Ftd>\u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>性能优化没有终点，但每一次可量化的提升，都会实实在在反映在留存上。\u003C\u002Fp>",{"list":34,"total":71,"page":7,"pageSize":72},[35,42,44,51,58,64],{"id":36,"title":37,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":38,"createdAt":39,"updatedAt":40,"excerpt":41},24,"深入理解 分布式锁实现",1864,"2026-11-02T03:30:42.000Z","2026-11-14T00:24:36.000Z","这是「分布式锁实现」主题下的一篇实践记录：深入理解 分布式锁实现。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，分布式锁实现往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑选方案…",{"id":16,"title":26,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":28,"createdAt":29,"updatedAt":43,"excerpt":31},"2026-11-14T00:34:48.000Z",{"id":45,"title":46,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":47,"createdAt":48,"updatedAt":49,"excerpt":50},37,"微前端拆分方案 实践笔记",1845,"2026-10-22T20:30:42.000Z","2026-11-14T00:24:35.000Z","这是「微前端拆分方案」主题下的一篇实践记录：微前端拆分方案 实践笔记。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，微前端拆分方案往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑…",{"id":52,"title":53,"categoryId":7,"categoryName":8,"isTop":27,"viewCount":54,"createdAt":55,"updatedAt":56,"excerpt":57},50,"单元测试实践 实践笔记",1825,"2026-10-12T13:30:42.000Z","2026-11-14T00:24:38.000Z","这是「单元测试实践」主题下的一篇实践记录：单元测试实践 实践笔记。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，单元测试实践往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑选方案…",{"id":59,"title":60,"categoryId":16,"categoryName":17,"isTop":27,"viewCount":61,"createdAt":62,"updatedAt":43,"excerpt":63},63,"接口幂等设计 的十个细节",1805,"2026-10-02T06:30:42.000Z","这是「接口幂等设计」主题下的一篇实践记录：接口幂等设计 的十个细节。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，接口幂等设计往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再挑选方…",{"id":65,"title":66,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":67,"createdAt":68,"updatedAt":69,"excerpt":70},76,"一次 前端监控体系 的踩坑记录",1786,"2026-09-21T23:30:42.000Z","2026-11-14T00:24:34.000Z","这是「前端监控体系」主题下的一篇实践记录：一次 前端监控体系 的踩坑记录。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，前端监控体系往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点 先明确目标与边界，再…",110,6,[74,81,87],{"id":75,"title":76,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":77,"createdAt":78,"updatedAt":79,"excerpt":80},11,"深入理解 JavaScript 事件循环",83,"2026-11-12T10:30:42.000Z","2026-11-14T00:24:37.000Z","这是「JavaScript 事件循环」主题下的一篇实践记录：深入理解 JavaScript 事件循环。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，JavaScript 事件循环往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时…",{"id":82,"title":83,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":84,"createdAt":85,"updatedAt":40,"excerpt":86},12,"深入理解 Vue 3 响应式原理",218,"2026-11-11T15:30:42.000Z","这是「Vue 3 响应式原理」主题下的一篇实践记录：深入理解 Vue 3 响应式原理。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，Vue 3 响应式原理往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时才有判断依据。 实践要点…",{"id":88,"title":89,"categoryId":12,"categoryName":13,"isTop":27,"viewCount":90,"createdAt":91,"updatedAt":40,"excerpt":92},13,"深入理解 TypeScript 类型体操",356,"2026-11-10T20:30:42.000Z","这是「TypeScript 类型体操」主题下的一篇实践记录：深入理解 TypeScript 类型体操。内容用于填充示例数据，方便浏览分页、搜索结果与文章详情。 为什么关注这个主题 在真实项目里，TypeScript 类型体操往往不是孤立的知识点，而是和性能、稳定性、可维护性纠缠在一起。把它单独拿出来梳理一遍，遇到问题时…"]