性能优化总结原创

你接手了一个页面加载缓慢的项目。请描述你的性能优化排查和解决思路。可以从前端、网络、服务端等多个层面考虑。先看前端资源加载。用lighthouse或web page test跑性能报告。重点关注largest content和time to interactive.比如发现未压缩的图片太大。我会用webp格式加览加载。同时用webpack的代码分割，把首屏用不到的组件拆成EB chk.减少主包体积。接着看网络层面。检查HTTP缓存头设置是否合理。静态资源是否配了强缓存？还会用Chrome的network面板看请求瀑布流。如果发现大量串行请求。可以考虑用HTTP2或域名分片来优化。之前有个项目，把多个小图标合并成雪碧图。后来换成HTTP2后，反而拆开更利于缓存。然后分析服务端响应。看TTFB时间是否过长。如果是SSR应用。

检查数据获取和渲染是否阻塞。可以考虑流失渲染或部分静态化。比如用18的suspense配合streaming SSR吧。让页面先返回骨架屏。数据ready后再逐步填充。用户感知会快很多。最后呢，不能忽略运行时性能。用performance面板录制页面交互。看是否有偿任务或频繁重排。比如，发现一个表格组件在滚动时卡顿。用虚拟滚动指渲染可视区域。同时用防抖优化频繁的状态更新。那嗯。另外，要确保web worker处理计算密集型任务。避免阻塞主线程。性能优化是个持续过程。要建立监控指标。从加载、渲染到交互，全链路度量与改进。