前端

这篇文章谈谈我之前实习看见的一些性能优化方案（卡住职业生涯👊🏻😭）之前在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资源，避免多次加载同一资源。定期优化：每次新功能上线前，都要进行性能测试，确保新版本不会影响现有的加载速度和用户体验。#现在前端的就业环境真的很差吗##牛客创作赏金赛##前端#

23年夏到24年春在一个研究所实习，干的活跟cpp和前端都没啥关系。一直到到今年3月的时候我都还是cpp选手，3月份找暑期实习面了WXG和腾讯云，发现我好像是个除了c++啥也不会的垃圾，没有拿得出手的cpp项目，互联网后端的那套技术栈我会的也不多，就学了个数据库，面互联网后端感觉就是找死。于是开始做CUM-15445的那个数据库项目，project0还没做完我就放弃了，太难了，看不懂啊根本看不懂。思来想去转前端吧，反正有一些html,css,js的基础。4月份开始学vue，做了个电商后台管理的项目就开始面试了。5月份面了10来个公司全挂了，就一个滴滴撑到了2面，结果因为js写得少，很简单的手写代码都写不出来，饮恨2面。自我总结觉得是前端项目没亮点，于是打算沉淀下，再做一个组件库的前端项目，然后直接冲秋招算了。但是这个学习的过程中我就是个摆子，学不进去，一个组件库项目做了2月才做完。8月中旬开始刷力扣，背八股准备秋招，然后就是每天都会投几个公司。截止到今天，一共投了60来个公司，一半的公司收到了笔试，有面试的一共14家，我只参加了8家公司的面试，这些面试都是9月份进行的，其中招银网络、携程、华为顺利进入了池子。剩余6家公司的面试都是10.11.12月份陆续收到的，全部被我拒掉了。我明明是个0 offer选手，为什么还要拒面试呢？因为没有勇气继续面了，深深地自我怀疑，不自信，逐渐开始对面试感到恐惧。我反思自己为什么9月份的面试会一直挂，为什么泡池子的携程和招银泡不出来，因为面试太差了，因为没有前端实习经历，因为自己网上找的项目没有能聊的地方，毫无亮点。10月份，携程和招银陆续开始发意向，每天都在等待开奖的焦虑中度过，经常晚上失眠一整晚，每天都会去公众号查看招聘进展。那时候就想随便泡一个出来我都愿意去，招银虽然不是大厂，但是base在成都，离家近，我也是能接受的。携程互联网中的养老厂，base上海，我也是可以的。然而并没有奇迹发生，面得差，排序靠后，压根开不到我。我又开始反思，为什么会这么失败呢，我觉得是因为没有实习，如果有实习，有项目能聊，情况应该不会这么差吧。于是开始找日常实习，如果池子泡不出来，我有实习经验，兴许明年春天还能意气风发呢。结果面了魔门塔、小红书、猿辅导、字节全挂了，失败总是贯穿始终，真痛苦啊，比起5月份，我明明进步了，可还是这么失败。面魔门塔的时候面试官建议我去学学react，于是我打算做一个react的项目，替换掉那个垃圾的讲不出东西的电商后台项目。日常实习我也不找了，就这样吧，把这个项目做好，就开始写大论文了，毕业才是头等大事。明年春招我也不挑工资了，有啥投啥，有工作就行。这个时候我想起了考研的时候，因为不爱喝水得了肾结石，痛到一个字都讲不出来，后来做了手术病好了，我就告诉自己，考不上也没关系的，只要健健康康的就好了，哪怕以后挣得少一点，只要能不生病，我觉得就很快乐了。现在也一样，我不再想着大不大厂了，只要春招能找到个一万多的工作就行了，能健健康康活着能养活自己就好了。到了12月，我原本最不抱期望的华为居然泡了出来，base上海，还给开了14a。由于面评很差（1a2b+）+本科是双非院校且非目标，之前问期望薪资我都不敢多报，只报了13级的样子，毕竟近两年很多双九、29都只开了13。我的秋招就这样结束了，半年的前端白学了，因去华为是C/C++开发，而且我面华为也压根没问我前端的东西，我就这样拿了个跟前端毫无关系的offer。当初投华为，对接人说部门是需要前端开发的，我就投了，结果面试官压根不会前端，就问了些408和c++。回顾整个找工作的过程，焦虑总是伴随着我，这辈子最焦虑的时间就是找工作这几个月了吧，无论是高考还是考研我都没有这么焦虑。看看身边的朋友，感觉自己真的很菜，做决定犹豫不决，反复横跳，才导致找个工作找得头破血流。其实研一的时候就开始规划就业方向，那会是在学cpp，后来听说前端好进大厂，于是学了几个月前端，当时都把html、css、js学完了，开始学vue框架了，结果被各种前端不行的帖子给劝退了，这就是前面提到的''html,css,js的基础''，就是这么来的。后来想坚定走cpp开发，因为一些原因本来拿了oppo的实习，结果没去，然后今年秋招投oppo简历都过不了了。后来去了个研究所，做跟cpp毫无关系的开发工作。如果当时去了oppo，应该已经实习转正了吧，即便转不了正，有实习经验也能找cpp开发的工作。或者如果当时坚定学习前端，应该也会有前端的实习经验，秋招也不会这么难受吧。不管怎样，秋招总算是结束了，想到自己读研的经历，感触颇深，遂发个帖子记录下。也是告诫自己，往后做决定不能反复横跳，做了决定就要坚持，要努力，不可半途而废。#我的求职思考##牛客创作赏金赛##前端##cpp##c++##华为求职进展汇总##华为#

人生第二次面试，体验良好，但是那时候手撕没过12月17日1.自我介绍2.学习中遇到哪些比较困难的问题，实践当中。3.你说你用vue多些，3和2的区别，做了哪些优化。4.url输入到页面内容的呈现5.UDP之上的应用层有什么协议。6.跨域问题是怎么产生的，一个url包含哪些部分7.跨域怎么处理的？（CORS和JSONP）jsonp是怎么实现的8.html的资源提示符（script的async defer 还有preload.）9.defindpropety和proxy在，proxy为什么好？（答：代理对象）怎么实现的代理对象？10.js的基本数据类型，说多一点11.如何修改图片大小保持外部div的容器宽高比例和图片一样。12.css盒模型，如何切换？如果一个父div设置成width=100%，在标准盒模型和怪异盒模型下宽度由什么决定。13.怎么比较两个对象想等？（type of instance of object.....call），instanceof底层是怎么实现比较多14.原形和原形链，最顶层的原形是什么？15.null和undefined的区别？把两者转换成数字会变成什么？16.es6的箭头函数？和普通函数的区别？为什么es6要加入箭头函数？箭头函数好在哪？17.一道this指向加IIFE的输出题（寄）18.实现每调用一次函数自动获取下一个质数（闭包实现）还有几题忘了反问：1.实习生承担什么样的工作2.如果你是mt你会想带什么样的实习生3.给我一些学习上的建议tag 字节，懂车帝，腾讯，华为#前端#