前端对性能优化的一些实践 可据此包装实习or项目

这篇文章谈谈我之前实习看见的一些性能优化方案（卡住职业生涯👊🏻😭）之前在qiankun基座上做SSR 就被问 你为什么不先在别的角度做优化🌚（当然是为了做技术需求-没活硬整）

篇幅有限啊 主要是给出思路让大家去实践 这么多故事 你造出一个亮点 大厂offer 不就稳了

1. 是什么导致性能下降
随着前端技术和架构的演进（各种库层出不穷），Web应用（shi山项目）往往会经历不断的迭代和优化，但有时由于资源积累或技术选型不当，性能却可能逐步下降。
我们可以得出以下是常见的性能劣化原因：

资源加载过大：应用页面可能包含了过多不必要的资源，导致页面加载的时间过长。尤其是在首屏加载时，可能会一次性加载大量的脚本、样式和图片。

串行阻塞：在页面加载过程中，某些资源和数据请求可能会串行执行，比如用户认证、数据获取等，导致阻塞了其他重要资源的加载。

重复加载资源：如果前端项目使用了微前端架构或多个模块化构建，常常会发生一些基础资源（如React、ReactDOM等库）被重复加载，浪费带宽和时间。

2. 关键优化措施
为了将页面加载时间大幅缩短，我们采取了以下几项关键的优化措施：

（1）资源优化：拆包、懒加载与缓存
资源拆包：通过拆分大包，将页面中不必要的资源按需加载。例如，避免将所有页面模块一开始就加载，而是根据用户需求分批加载。通过按需加载的方式，可以大大减少初次加载的体积。

共享缓存：通过使用共享CDN缓存，确保不同模块或子应用之间能共享一些公共资源（如React、ReactDOM等），避免重复加载和冗余带宽消耗。

懒加载：将首屏之外的内容（如抽屉、浮动弹窗、用户提示等）延迟加载。这样可以保证首屏加载的资源最小化，用户体验得到提升。

图片优化：图片通常占据了页面加载时间的很大一部分，因此，我们采用了图片的懒加载和剪裁压缩技术，减少图片文件的传输体积。

（2）执行逻辑优化：避免串行阻塞
优化执行流程：登录验证和数据获取等操作可能会阻塞主线程，影响页面加载速度。通过将这些操作改为异步执行，可以有效避免主线程被阻塞，提升加载速度。

子应用预加载：如果项目使用了微前端架构，可以通过预加载当前页面需要的子应用资源，在页面渲染之前就将资源加载完毕，确保页面显示时不需要重复请求。

（3）基础设施优化：升级协议与CDN策略
升级网络协议：将HTTP/1.1协议升级为HTTP/2，HTTP/2支持多路复用，可以同时发送多个请求，减少网络延迟，提高加载效率。

CDN与缓存策略：通过优化CDN配置，启用HTTP/2协议，开启强制缓存、Gzip压缩等策略，进一步减少加载时间，提升页面响应速度。

3. 性能优化效果
我们要怎么去看具体优化的效果呢
通常一个正规项目 都会埋点上报FMP（First Meaningful Paint）时长尽量要能在两秒以内。

fmp的时间短的话 就意味着用户能够更快地看到页面的有效内容，从而提升了页面的可用性和流畅度。

同时用户的流失率就会减少：随着页面加载速度的提升，用户的等待时间显著减少，减少了因等待过久而流失的用户。

4. 持续监控与优化策略
大厂里面一般有持续的性能监控系统，并引入了以下防止性能劣化的措施：

性能监控系统：通过在页面中埋点，实时监控各项性能指标（如加载时间、资源请求时长等），并定期生成报告，确保性能持续优化。

资源管理规则：例如，对于大于2MB的资源文件进行拦截，确保不会发布过大的资源包，避免加载过慢。

共享资源管理：强制基座应用与各个子应用共享相同的CDN资源，避免多次加载同一资源。

定期优化：每次新功能上线前，都要进行性能测试，确保新版本不会影响现有的加载速度和用户体验。

#现在前端的就业环境真的很差吗##牛客创作赏金赛##前端#