接好运
点赞 评论

相关推荐

投递字节跳动等公司10个岗位
点赞 评论 收藏
分享
12-16 21:04
快手_前端开发
这篇文章谈谈我之前实习看见的一些性能优化方案(卡住职业生涯👊🏻😭)之前在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资源,避免多次加载同一资源。定期优化:每次新功能上线前,都要进行性能测试,确保新版本不会影响现有的加载速度和用户体验。#现在前端的就业环境真的很差吗##牛客创作赏金赛##前端#
点赞 评论 收藏
分享
牛客网
牛客企业服务