前言
作为一个前端老菜鸟，毕业五六年之后开始陆陆续续进行一些实习生和应届生的面试。
这些同学的简历里大概率都有一个甚至多个练手的个人项目，频率最高的诸如仿云音乐界面、个人博客、todo list、仿电商项目等等。
其实面试官都能看得出来，很多是网上的课程或者培训会教的一些入门项目。
很多同学可能感觉到项目按照教程做完了就完事了，做了又好像没做，在面试中，尤其是大厂的面试，遇到面试官的深入提问，依旧没有思路，大脑一片空白。
因此即使接到了大厂面试机会，可能在一面二面就会挂掉，甚至可能会收到“技术深度不足”“知识面比较窄”之类的反馈，背好的八股文也没怎么起作用，练手的项目在实际的面试中也显得十分鸡肋。
那么练手项目究竟要练的是什么？为什么同样的练手项目，我和别人拿到的 offer 不一样呢？
本系列文章希望从方法论、实操、以及面试思路多个角度，给前端新手同学们一些新的准备面试的思路。
练手项目到底在练什么？
练手项目到底在练什么？这个问题也可以换一个问法，你的练手项目想让面试官看到什么？
从我的经验来看，如果面试者有一定的项目经验，那我是更愿意从项目里找切入点来问的，毕竟网上题库没有十万篇也有八万篇，基本上能来面试的人人都背了，背了也不一定真会用。
但你自己的项目一定是你一行一行写了代码的，里面涉及到的前端知识点你多少会有些了解。
大厂面试里面试官一般都考察什么？
硬实力：基础知识的扎实度、需求快速转化为代码的能力，也就是你当下作为一个前端工程师的能力；
软实力：主动性、领悟力、学习能力、快速解决问题的能力，汇总到一起，体现的是你未来的成长潜力
能完整做出一个练手项目的同学，大多数都是具备写代码熟练度的，因此单纯地做完一个项目，是无法从大量的竞争者中脱颖而出的。
一个功能相对完整，界面也做完了的项目，在面试者的脑海里进度是 100%，在面试官的脑海里进度可能只有 50%，面试官的问题就有一半的概率落到了你没有考虑到的环节，这就是面试中差距的一种体现。
前端编码只是前端项目的一个环节，还有工程化、性能优化、网络、部署、架构设计、接口设计、安全防护等等需要考虑的环节。
那么这种个人的练手项目就不能体现自己的技术实力呢，和别人打出差距吗？当然可以。
最理想的场景，是把个人项目当成生产项目来做，但是这里就有个悖论了，我来面试的就是实习/应届，我没有生产经验，自然就不知道生产项目怎么做了啊。
前端知识点茫茫多，技术栈更是令人眼花缭乱，这更让人不知所措了。
这里只提一个很简单但是很容易被忽略的方法：多想一步。
多想一步
多想一步听起来比较抽象，但也是有一些比较通用的思路可以找的。
可以向前多想一步：
-
如何把项目的体验做的更好：这里会涉及到加载优化、性能优化、样式优化、交互优化，深入一块去研究也有很多可以研究的东西。
-
如何让项目后续维护更方便：模块化、工程化、自动化。
-
如何成功地部署到线上，成为真正的站点：域名、备案、SSL、统计、监控等基础设施。
也可以向后多想一步：
-
技术选型：为什么做这样的技术选型，同维度的技术栈有哪些，比较的思路和标准是什么。
-
技术原理：我所用框架/库/工具的原理是什么，这个技术产生的原因是什么。
-
基础巩固：八股文的知识如何在项目里得到应用等等。
以非常常见的仿云音乐为例。
音乐的这个界面涉及到的前端知识点和细节是非常多的，包含很多常见的前端布局，还有搜索、长列表这种前端常考的基础功能，还有大量图片，和媒体播放。
如果真的深入聊起来，这个界面就可以面上一个小时。
以图片加载为例，多图场景下绝大多数面试者都能回答到 lazyload，项目里也用上了，但大多也就停留在 lazyload 库调用这一层面。
而以此为出发点，我们来尝试扩展一张知识图谱：
- 向前一步看，lazyload 的目的是为了减少页面初次加载时的HTTP请求数，从而加快页面加载速度。
- 再进一步，图片是不是可以再优化：
- 图片本身的优化
- 图片压缩
- 图片格式：各个格式的特点，以及性能
- 图片缓存
- 网络缓存：强缓存、协商缓存
- 常见的前端持久化缓存方案
- 图片本身的优化
- 图片以外的加载优化
- 网络请求
- 并发
- Promise
- 并发异常处理
- …
- 请求本身体积优化
- 压缩
- 分页
- …
- 并发
- js/css 加载优化
- …
- 网络请求
- 再进一步，图片是不是可以再优化：
- 向后一步看，看懒加载的实现原理
-
InteractionObserver 实现
-
监听 scroll 事件判断元素位置
- 为了防止触发频率过高导致的卡顿，通常需要添加防抖或者节流函数
- 常见的 js 库里防抖和节流函数的实现
- 闭包
- apply、call
- …
- 常见的 js 库里防抖和节流函数的实现
- dom 属性: scrollTop等属性的含义
- 为了防止触发频率过高导致的卡顿，通常需要添加防抖或者节流函数
-
对比这两种方案的优劣，以及了解常见的库使用哪种方案，原因是什么，一般库是如何进行兼容性处理的。
-
而这个页面里可以提出类似原理问题的还有：
如何保证页面中搜索框返回的结果正确？刚好前面提到的防抖就覆盖了这个问题的答案。
同样的，音乐播放器在用户拖动的时候如何保证播放的位置正确/进度响应及时，也可以用类似的思路来回答。
吃透这样一个复杂的页面，足够填充大半个面试的面试题了。
更大的知识块比如项目中使用的框架，从而深入到框架原理、框架实现细节本身，知识图谱的扩展思路是类似的，这个后面的文章我们会详细展开。
部署：让面试官看到效果
能够做到部署自己项目的面试者，就比大多数的面试者多做了一步了。
面试官在真实的页面往往可以发现更多的考察点，也更加方便你来引导面试官去聊你更有储备的技术点。
如何引导面试官去聊你更有储备的技术点，又能说好长一篇，这里就先不展开。
这里还涉及到许多的技术环节，服务器、域名、证书、CDN、DNS 解析等等，这些往往偏全栈的面试官会比较喜欢问。
部署的过程对于新手同学了解生产过程的 Web 开发过程是很有帮助的，所以如果你有能力去找一个云平台，把所有的相关流程走一遍，对技术的成长是很有很大帮助的。
当然，现在也有很多的页面托管平台，可以快速地部署页面到你的项目，更容易专注于前端开发,对新手比较友好。
最流行的比如 Github Pages，Vercel，Cloudflare Pages，国内最近腾讯也做了个 EdgeOne Pages。
这里面 EdgeOne Pages 在国内访问比 Github Pages 这些要稳定些。目前处于内测阶段，资源大小什么的也基本没限制，但是功能上就比较简陋，只能说够用。好在目前全免费，毕竟不能光给鹅充钱，去薅薅鹅毛也不亏。
鹅的这个托管平台需要有一个腾讯云的账号，以及一个 github 账号，开通后直接从 github 项目里导入创建即可。
部署完成之后，会提供一个有效期三小时的链接，如果是面试中直接发给面试官也够用，但是想放到简历里就不行了，这个有点挫，好在他能配自己的域名，流程也不算复杂。
总结
回到题目，想拿到好的 offer，扎实的基础知识和丰富的经验积累是非常重要的。
本文起名叫《非典型面经》的初衷，是期望读者在准备面试、提升通过率的过程中，自己也能真正收获技术的成长。而非机械地背题，机械地抄一些所有人都在写的代码，最终发现只是无用的内卷而已。
下一篇将讨论：如何引导面试官问我想回答的问题？（期待的话点点赞吧~）
