[{"data":1,"prerenderedAt":155},["ShallowReactive",2],{"content-/blog/javascript-performance":3,"related-blog":130},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":124,"_id":125,"_source":126,"_file":127,"_stem":128,"_extension":129},"/blog/javascript-performance","blog",false,"","JavaScript 性能","JS 执行优化、事件委托、防抖节流等技巧","JavaScript 性能, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":115},"root",[18,26,32,47,53,66,71,79,84,92,97,105,110],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","本文总结 JavaScript 运行时性能优化的常见技术，包括内存管理、DOM 操作优化与渲染流程控制。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"热点关注",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36,42],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"减少不必要的重渲染：通过最小化状态变化范围、使用惰性渲染和虚拟化列表。",{"type":19,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"DOM 操作：批量 DOM 更新、使用 DocumentFragment、避免频繁读取布局触发回流。",{"type":19,"tag":27,"props":48,"children":50},{"id":49},"内存与-gc",[51],{"type":24,"value":52},"内存与 GC",{"type":19,"tag":33,"props":54,"children":55},{},[56,61],{"type":19,"tag":37,"props":57,"children":58},{},[59],{"type":24,"value":60},"避免大量短命对象的频繁分配，必要时使用对象复用池。",{"type":19,"tag":37,"props":62,"children":63},{},[64],{"type":24,"value":65},"使用性能分析工具（Chrome Profiler）定位内存泄漏与长时间存活对象。",{"type":19,"tag":27,"props":67,"children":69},{"id":68},"异步与主线程卸载",[70],{"type":24,"value":68},{"type":19,"tag":33,"props":72,"children":73},{},[74],{"type":19,"tag":37,"props":75,"children":76},{},[77],{"type":24,"value":78},"将密集计算移到 Web Worker 或通过 requestIdleCallback 分摊到空闲时间。",{"type":19,"tag":27,"props":80,"children":82},{"id":81},"网络与资源优化",[83],{"type":24,"value":81},{"type":19,"tag":33,"props":85,"children":86},{},[87],{"type":19,"tag":37,"props":88,"children":89},{},[90],{"type":24,"value":91},"代码分割、按需加载与资源预加载（preload/prefetch）能改善感知性能。",{"type":19,"tag":27,"props":93,"children":95},{"id":94},"工具与度量",[96],{"type":24,"value":94},{"type":19,"tag":33,"props":98,"children":99},{},[100],{"type":19,"tag":37,"props":101,"children":102},{},[103],{"type":24,"value":104},"使用 Lighthouse、Web Vitals、Profiler 进行量化评估，并在 CI 中加入性能回归检测。",{"type":19,"tag":27,"props":106,"children":108},{"id":107},"结语",[109],{"type":24,"value":107},{"type":19,"tag":20,"props":111,"children":112},{},[113],{"type":24,"value":114},"性能优化是持续工程，先以简单高效的改进（减少渲染、懒加载）入手，再用度量驱动逐步优化。",{"title":7,"searchDepth":116,"depth":116,"links":117},3,[118,119,120,121,122,123],{"id":29,"depth":116,"text":29},{"id":49,"depth":116,"text":52},{"id":68,"depth":116,"text":68},{"id":81,"depth":116,"text":81},{"id":94,"depth":116,"text":94},{"id":107,"depth":116,"text":107},"markdown","content:blog:javascript-performance.md","content","blog/javascript-performance.md","blog/javascript-performance","md",[131,139,147],{"_path":132,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":133,"description":134,"keywords":135,"author":11,"date":12,"category":13,"image":14,"_type":124,"_id":136,"_source":126,"_file":137,"_stem":138,"_extension":129},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":140,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":141,"description":142,"keywords":143,"author":11,"date":12,"category":13,"image":14,"_type":124,"_id":144,"_source":126,"_file":145,"_stem":146,"_extension":129},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":148,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":149,"description":150,"keywords":151,"author":11,"date":12,"category":13,"image":14,"_type":124,"_id":152,"_source":126,"_file":153,"_stem":154,"_extension":129},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945277606]