在面试过程中，大部分同学都会被问到：你开发过什么项目？
这看起来很简单的一个问题，却难住了无数面试者，因为面试官想听到的并不是你的项目流水账，而是你项目中的亮点。
大部分前端同学都是开发一些管理后台系统、H5 及小程序等比较常见的项目，这类项目并没有什么难度。
引用一句大佬的话：评价一个前端项目的难度，就是让一个大学生培训三个月能不能接手这个项目？
答案是完全可以接手，现实非常残酷。因此，大部分同学在面试过程中说不出自己项目中的亮点。
但是，即使是最普通的前端项目真的就找不到亮点了吗？
显然不是。下面提供一些思路，来帮助你挖掘你简历中的亮点。
从业务开发中挖掘亮点
当你实现了一个需求后，需要考虑是否有改进优化的地方，那怎么判断是否有改进的地方呢？
最简单的方式就是当把数据量放到到一定的量级后，你写的代码能否满足需求。
下面以文件上传的场景为例来介绍。像日常开发中的图片上传、excel 文件上传、视频上传等等，都属于这类需求。
直接使用 axios.post 就可以实现这个需求了，文件的体积就是这个场景下的数据量，那么文件变得很大之后，该如何处理呢？
比如，当上传一个 2GB 大小的视频文件的时候，如果直接使用 axios.post 上传，那么中途一旦出现网络卡顿，就需要重新上传整个视频文件。这就会对用户的体验造成不好的影响，所以在这种数据量极大的场景下，我们需要采用断点续传的解决方案。
思路是把文件切成数据块依次上传，如果上传的过程中，出现了网络错误，那么再次上传的时候，就会把已经存在的切片列表过滤掉，只上传其他的切片。
因此，在文件上传之前，需要在前端计算出一个文件的 Hash 值作为唯一标识，用来向后端询问切片的列表，这样就知道了哪些切片已经上传。但是对于一个 2GB 大小的文件来说，即使是使用 MD5 算法来计算 Hash 值，也会造成浏览器的卡顿。
那怎么解决计算 Hash 值时，浏览器的卡顿的问题呢？
对于卡顿问题，可以通过 web workder 去解决，这相当于另外开了一个进程来计算 Hash 值，这样就不耽误主进程的渲染了。
除了使用web workder外，我们还可以借鉴React的思路来做，在 React 框架下，当项目庞大之后，如果 Diff 的计算量过大，那么也会导致卡顿。于是 React采用 Fiber架构的解决方案，使用浏览器的空闲时间去计算 Hash，即使用 requestIdleCallback 来用空闲时间计算 Hash 任务。
解决了因为大量计算 Hash 导致的页面卡顿问题后，还会面临另外的卡顿问题：上传切片的时候，所有的文件切片一起使用 Promise.all 发起几十个 HTTP 请求，也会导致卡顿，所以就需要手动管理上传任务的并发数量。
由于切片上传速度跟当前网速相关，所以在对上传任务的并发数量进行管理时，我们需要确定切片的大小。那该如何确定切片的大小呢？我们可以借鉴 TCP 协议的慢启动逻辑，去让切片的大小和当前网速匹配，这样，我们就可以通过网速确定切片的大小。
你看，通过优化这个需求，使用了很多前端高阶知识：
- 你需要了解如何对二进制数据进行切片(
blob)，切片的大小如何确定？ - 你需要了解前端如何对文件进行 Hash 计算；
- 你需要了解利用
web workder来运行需要大量计算的任务； - 你需要了解利用浏览器空闲时间段
requestIdleCallback来执行任务； - 你需要了解如何手动管理并发数量；
当顺着这个思路解决了大文件上传的需求之后，这就会成为你项目中的亮点。
此外，还有一个典型的场景就是列表渲染，使用 v-for 就可以很快地实现这个需求。但是，设想这样一个场景：列表的数据量不断增多，成千上万个数据的渲染让页面卡顿。按照我们优化需求的思路，需要你做的就是：使用虚拟列表来应对这个场景。
有人会说，能把产品经理交代的需求做完就不错了，哪有精力考虑这么多。但是这是没办法的事情啊，如果你想拿高薪的话，只能按照这种高标准去写代码，写多了就不会觉得麻烦了，水平也就自然而然上去了。
从工程化的角度中挖掘亮点
脚手架
想一下，当你开启一个前端项目时，是怎么开始的？
大部分人都是从网上下载一个开发框架模板或者直接复制一份原来的开发项目，然后修修改改后进行开发。
其实，我们完全可以借鉴 Vue 的思路，使用 Vue 开发时，我们是使用官方提供的@vue-cli脚手架来创建一个开发模板。
因此，你可以把你们公司的前端项目提炼成模板，比如，Vue模板，React模板，H5模板，小程序模板，数据可视化项目模板等等。
然后开发一个脚手架项目把这些模板集成进去，这样只需要在命令行敲击几行命令，就快速生成了一个开发框架。这样就可以极大的提高项目的启动效率。
这就是一个亮点。
组件库
我们都知道，多个项目之间会有代码复用和组件复用的需求。这时，你就可以再发起一个基础组件库的项目，做出一个类似 ElementUI 或者 AntDesign 的基础组件库，并且发布在公司的 npm 服务之上，提供给全公司前端使用。
你肯定会说，我们都是直接使用 ElementUI 或者 AntDesign 基础组件库，用不着自己开发。这也没关系，那你们公司肯定有一些业务组件吧，这些业务组件可以是由多个基础组件组成来完成某个特定的功能。
为了让大家用这个组件库的时候能放心，你可以给组件库实现完备的文档系统以及超过 90% 的单测覆盖率。
这就是一个亮点。
上线发布
前端项目开发完后需要上线，为了提高发布和部署的效率，你可以发起了一个 CI/CD 的项目。
最简单的是直接写个deploy.sh脚本，把打包后的文件利用 linux 命令SCP发到服务器。这是一种手工式的操作方式，无法满足大型项目的发布要求。
对于大型项目，可以利用 GitHub 的 action 机制，可以把整个发布过程自动化，并且还可以一键回滚。这样极大的提高了团队整体的研发效率，能够让整个项目更稳定地交付。
这就是一个亮点。
前端监控
上线完成后，为了监控项目的实时运行情况，你可以发起一个前端监控系统的项目。
当页面有严重的性能问题或者报错的时候，能够及时通知我们。并且除了常见的性能优化策略之外，我们还可以分析用户访问日志，提前预测用户可能访问的页面，从而做路由级别的预加载等等。
这就是一个亮点。
这里就介绍这么多，当然，前端项目中还有很多可以提炼的亮点，这需要你多动脑筋。
总结
作为一个程序员，身处在业务开发的海洋里，无法有足够的精力来考虑这些优化的点，但是正是这些点才能提高我们的开发水平。
不然，工作十年也只是把一年的经验重复了十次而已。
加油吧，老铁们，卷起来。
