最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

你们的代码写的这么拉吗？不优化都不能使用吗？

性能优化是一个高级前端的必要技能吗？

首先客观现实是笔者平时工作中的业务并不复杂，需要性能优化的地方确实不多，一些存在性能瓶颈的大多是使用了其他团队开发的东西，比如播放直播视频的SDK、3D地图引擎等，也找过他们进行优化，但是没用，他们也优化不动。

所以每次被问到这个问题我就很尴尬，说工作中没有遇到过性能问题，估计面试官也不信，直接说没有做过性能优化，那又显得我这个六年经验的前端太水了，连这个都不做，所以每次我只能硬说。

没吃过猪肉，还没见过猪跑吗？其实性能优化的文章我也看过很多，各种名词我还是知道一点的，比如：

• 性能问题排查：

1.数据埋点上报

2.使用控制台的NetWork、Performance等工具

3.webpack-bundle-analyzer插件分析打包产物

• http相关：

1.gzip压缩

2.强缓存、协商缓存

• 图片相关：

1.图片压缩

2.图片懒加载

3.雪碧图、使用字体图标、svg

• webpack相关：

1.优化文件搜索

2.多进程打包

3.分包

4.代码压缩

5.使用CDN

• 框架相关：

1.vue性能优化、react性能优化

2.异步组件

3.tree shaking

4.服务端渲染

• 代码实现

1.按需加载，逻辑后移，优先保证首屏内容渲染

2.复杂计算使用web worker

3.接口缓存、计算结果缓存

4.预加载

5.骨架屏

6.虚拟滚动

等等。

但这些绝大部分我并没有实践过，所以我都说不出口，说我没有机会实践也行，说我没有好奇心不好学不爱思考不主动发现问题也行，总之结果就是没有经验。

所以通常我硬着头皮只能说出以下这些：

1.开发前会花点时间梳理业务，全局视角过一遍交互和视觉，思考组件划分，找出项目中相似的部分，提取为公共组件和通用逻辑。

2.代码开发中尽量保证写出的代码清晰、可维护，比如：清晰的目录和文件结构、添加必要的注释、提取公共函数公共组件、组件单向数据流、组件功能尽量单一等。

3.时刻关注可能会存在性能问题的部分，比如：

路由组件异步加载

动态加载一些初始不需要用到的资源

频繁切换的组件使用KeepAlive进行缓存

缓存复杂或常用的计算结果

对实时性不高的接口进行缓存

同一个接口多次请求时取消上一次没有完成的请求

页面中存在很多接口时进行优先级排序，优先请求页面重要信息的接口，并关注同一时刻请求的接口数量，如果过多进行分批请求

对于一些确实比较慢的接口使用loading或骨架屏

懒加载列表，懒加载图片，对移出可视区的图片和dom进行销毁

关注页面中使用到的图片大小，推动后端进行图片压缩

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。