随时25年初中级小白踏入职场，应该明显感觉到了社会的险恶。
我朋友的弟弟学前端出来，在北京晃悠了半年一无所获，这个工作找到是格外艰辛，今天给大家分享一下前端面试老油条的攻略，好好记好好看！！
首先第一步，面试敲门砖-简历
1.简历整体概述
注意:
1.简历模板不要太花哨，尽量清晰简单;
2.简历行间距要留白，不要加入过多;
3.不要通篇都是加粗字体，只针对核心字体加粗标识即可，不然会导致虚焦，容易让面试官抓不住重点;
4.简历的核心在于工作描述和项目描述，这两部分一定要重点描述清楚，不要写很"虚”的内容，一定要精确到技术栈的使用和实现，工作项目中可以讲的比较笼统，但项目介绍一定要精确到项目实现细节和难点:
通过上述的简历可以看到，只有在项目细节处通过具体的代码解释清楚，才能更好地表达出价值所在，诸如“优化用户体验交互，使用分布加载、分屏加载、异步加载的方式提升了页面首屏加载性能，从原本低端机2s+减少到1s内”这类的描述，只说了结果，要讲清楚过程实现，比如:
1.分布异步加载:使用lazy import 动态异步加载首页非核心模块;
2.优化用户体验交互:针对首页数据接口进行SWR缓存，加快首屏染时间，要按照 目的 + 县体action +实现结果 三步写，其中最核心的就是具体action，而不是只有一句话带过，不然面试官会认为没有技术深度，只是冠冕堂皇的空话。
2.工作经历的注意事项
1．工作经历建议从近到远的写；
2.如果当前工作经历过多，比如超过1年1跳，可以针对比较老的工作经历（比如有4份工作经历，其中工作前2年 有2份工作经历）进行合并处理，因为就算背调也一般会背调最近两份工作经历，过老的工作经历主要用来看项 目的稳定性，可以适当润色合并；（注意：如果面试的公司一定要老项目的流水或者之前公司的联系方式，这 种case就不要合并项目）；
3.如果近期的工作经历有空窗期超过2个月，建议可以补充自己在空窗期也有技术的成长；如果空窗期超过了半 年，一定要加项目，不可有过长的空窗期，参考如下，甚至公司项目结束了离职后，自己的项目这些文字也 可以不要，面试官问流水可以说是项目创业或者没有缴纳社保，只要有正当理由表示就可以；
3.项目要如何写才能达到面试官满意的程度
注意：以上项目的描述是最基础的，不可以直接抄到简历上。
建议项目按照：34个业务项目+23个技术项目穿插着写，（年限低的同学可以适当缩减）。
.业务项目：
a.业务项目是要体现在工作过程中遇到的实际问题的，建议围绕着前端性能优化、稳定性治理、用户体验和 工程化落地这几个方向去写；
b.第一部分(1~2点）：写关于Vue、React技术栈的使用，不要写使用使用Vue、React完成了项目开发迭 代，要讲到使用这部分技术栈完成了xxx具体业务的开发；
c.第二部分(1~2点）：使用了哪些生态库完成了项目的开发：这里可以写使用elementUI、ant design等完 成了xxx系统的xxx部分的开发迭代；使用xxx实现了xxx功能，一定要落实到具体的技术点；
d.第三部分（2~3点）：当前项目中的亮点，也就是别人没有自己有的内容，这块要往前端性能优化、稳定 性治理、用户体验和工程化落地这几个方向靠，一定要具体；
e.第四部分（1点）：如果有团队管理经验，要写出来带团队内容，比如带领xx人完成xx项目的前端开发，负 责需求的分发和业务进展的同步；
f.第五部分（1~2点）：可以结合技术项目，写出如何使用技术项目解决了业务项目的痛点，或者紧接着当前 的业务项目，单独罗列出技术项目；
•技术项目：项目参考飞书链接：目前端实战课分享汇总密码：Hn(>bn9?
a，是为了体现出技术的深度的，要结合着业务背景说，不可以干巴巴的直接写做了xxx的技术项目，一定要解 决特定的业务问题的；
b，举例：课程实战中的前端编码规范工程化，项目名称要改成：XXX后台项目编码格式统一或者xXX项目前端 代码规范治理，要结合着业务背景去讲。像项目中自带的简历描述，要结合着自己对业务的理解和当前技术 项目的掌握去写，不要一股脑照抄。事实证明，照抄的项目大多数不会吸引面试官的；
3.1参考业务项目
项目描述：XXXAPP+后台管理系统是XXXX，为客户提供保XXX服务。该项目原开发语言为Vue2，为了便于迭代维 护使用Vue3进行重构。
项目职责：
1.App端：运用vue2/3全家桶技术开发包括app首页、首页弹框、菜单列表、XXX等功能模块、支持了XXX等活 动内容;
2.pc端：运用 elementui框架实现XXX等功能;
3.小程序：运用uniapp技术实现XXX等功能;
4.后台管理系统:运用elementui框架开发首页轮播、中部banner、菜单等配置功能；
5．实现代码的组件化、配置化，开发过程中及时发现、处置风险，避免项目延期；
6.连续n年带领m人团队高质量完成前端开发工作；
7．制定前端编码格式化校验、代码一键修复、提交信息校验等代码工程规范；
3.2如何定向准备项目
在项目准备好后，很多人有类似的疑问：我能够知道项目如何写的，但是不知道面试如何表达。 其实这类问题也是有技巧的，建议针对每个项目都画流程图或者架构图，并且自行录音，每个项目限时5分钟。 可以参考以下架构图，面试的过程就是表达清楚架构图的过程，针对业务项目和技术项目都要绘制达到以下标准。
3.3优秀项目参考
1．最佳实践
建议从最佳实践落地的角度讲，升级Vue2->Vue3过程中，如何做到平稳渐进升级的。
a.生态库的升级，例如以下工具，如何选择的：
i.构建工具链:Vue CLI->Vite
ii.状态管理:Vuex ->Pinia
iii. IDE 支持:Vetur ->Volar
iv，新的 TypeScript 命令行工具:vue-tsc
v.静态网站生成:VuePress ->VitePress
b，升级过程中，Vue2->Vue3的兼容性处理，是选择全量新项目构建，还是在原有项目升级？衡量点是什么？最后的效果是什么？
c.构建工具升级后的优化，webpack->vite，如果升级?建议参考：github.com/IndexXuan/v… plugin-vite
d．提效产出：更新后，开发效率提升了XX%，业务提升XX%;
2．横向技术-多端适配
a.描述清楚业务价值：06（一套H5适配小程序端、APP中H5、微信公众号H5)，抽离了底层的差异性（如跳转方式，存储方式，调用原生能力的不同），开发了一个库，将现有的项目都对接该库。业务项目无需关心差异性，提升人效XXXX;
b.技术难点:基于uniapp二次开发，在每个平台(Web、Android App、iOSApp、各家小程序)如何封装好 runtimeAPI，抹平中间差异化部分，封装npmSDK包统一使用。
▼c．体现亮点：
i.runtime抹平；兼容XXX业务功能;
ii.npmSDK统一管理平台：业务功能封装，支持标准流程接入新指标;
iii.JSDoc：自动部署同步新特性描述至静态服务站点;
iv．jest：单测覆盖率达到XXX;
3．稳定性治理（类似参考实战课项目8．前端稳定性监控）
a，描述清楚业务价值：通过监控收集前端各类错误信息，实现了支持多平台、可扩展、可插拔式的前端错误信 息，通过日志上报，行为展示，从而快速定位问题，提升系统稳定性;
b.技术难点：定义好监控标准，支持插件化方式集成；抽离页面监控、Vue监控、React监控、小程序监控及 性能监控；定义好插件统一收口，支持渐进式迭代升级；
c．体现亮点:
i.定量收集不同错误、性能指标类型标准；
ii．错误插件式集成流程；
iii.定义数据上报方式及时机：利用浏览器空余间隙上传requestidlecallback，上传方式：XHR、Image 及sendBeacon;
iv．定义统一报错日志;
4.如何基于课程中项目将自己项目的写出彩？
注意：不要原封不动照抄现有项目！ 注意：不要原封不动照抄现有项目！ 注意：不要原封不动照抄现有项目！
思路:
先说自身业务上的背景，基于自身业务背景（不设限），开始引导到实际课程项目上，一定要有个业务背景的引 导，避免太过于直白尴尬：
1.vue：引导至vue3AI智能助手（属于vue3的最佳实践，优先引|导至这个项目）、无代码可视化;
2.react:引导至react Hooks实战(属于react的最佳实践，结合react性能优化课程一起去讲)、es6性能优化 (包含react ssr及webpack设计，可以当做第二个react项目去讲)
3.技术框架不设限：可以先讲做的业务内容，做完业务内容后，开始讲在业务背景的基础上沉淀的技术横向项目
a，前端编码规范工程化
b.前端稳定性监控
4.Uniapp、Taro：基于基础的小程序项目，额外要讲关于性能优化的具体实现，可以参考以下部分；
a. uniapp:zh.uniapp.dcloud.io/tutorial/pe…
b. taro: docs.taro.zone/docs/optimi…
4.优秀简历参考
可以自行在其中选择合适的项目，不必要按照年限来划分，针对合适的项目使用即可。
那么简历到这里就完事了，认真准备，简历做好了面试少不了，起码能让你已读不回的几率少60%，完整简历模板可以DD一下
第二步：面试一百问整理
第 1 题：写React/Vue 项目时为什么要在列表组件中写 key.其作用是什么？
第 2 题: ['1', 2', '3].map(parselnt) what & why？
第 3 题：什么是防抖和节流？有什么区别？如何实现？
第 4 题：介绍下 Set、Map、WeakSet 和 WeakMap 的区别?
第 5 题：介绍下深度优先遍历和广度优先遍历，如何实现？
第 6 题：请分别用深度优先思想和广度优先思想实现一个拷贝函数？
第 7 题：ES5/ES6的继承除了写法以外还有什么区别?
第 8 题: setTimeout、Promise. Async/Await 的区别
第 9 题：Async/Await 如何通过同步的方式实现异步
第 10 题：异步笔试题请写出下面代码的运行结果
第 11 题：算法手写题
第 12 题：JS异步解决方案的发展历程以及优缺点。
第 13 题：Promise构造函数是同步执行还是异步执行，那么then方法呢?
第 14 题：情人节福利题，如何实现一个new
第 15 题：简单讲解一下http2的多路复用
第 16 题：谈谈你对TCP三次握手和四次挥手的理
第 17 题：A、B机器正常连接后，B机器突然重启，问A此时处于TCP什么状态
第 18 题:React 中 setState什么时候是同步的,什么时候是异步的？
第 19 题：React setState 笔试题，下面的代码输出什么?
第 20 题：介绍下npm模块安装机制，为什么输入 npm install 就可以自动安装对应的
第 21 题：有以下3个判断数组的方法，请分别介绍它们之间的区别和优劣
第 22 题:介绍下重绘和回流(Repaint &Reflow)，以及如何进行优化
第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景
第 24 题：聊聊 Redux 和 Vuex 的设计思想
第 25 题：说说浏览器和Node事件循环的区别
第 26 题：介绍模块化发展历程
第 27 题：全局作用域中，用const和let声明的变量不在window上，那到底在哪
第 28 题：cookie 和 token 都存放在 header 中，为什么不会劫持 token?
第 29 题：聊聊Vue的双向数据绑定，Model如何改变View，View又是如何改变
第 30 题：两个数组合并成一个数组
第 31 题：改造下面的代码，使之输出0-9，写出你能想到的所有解法。
第 32 题：Virtual DOM真的比操作原生DOM快吗？谈谈你的想法。
第 33 题：下面的代码打印什么内容，为什么？
第 34 题：简单改造下面的代码，使之分别打印10和20。
第 35 题：浏览器缓存读取规则
第 36 题：使用迭代的方式实现 flatten函数。
第 37 题：为什么 Vuex 的 mutation 和 Redux 的 reducer中不能做异
第 38 题：（京东）下面代码中a在什么情况下会打印1?
第 39 题:介绍下 BFC 及其应用。
第 40 题：在Vue中，子组件为何不可以修改父组件传递的Prop
第 41 题：下面代码输出什么
第 42 题：实现一个 sleep 函数
第 43 题:使用 sort0 对数组 [3, 15, 8, 29, 102, 22] 进行排序，
第 44 题：介绍 HTTPS 握手过程
第 45 题：HTTPS握手过程中，客户端如何验证证书的合法性
第 46 题：输出以下代码执行的结果并解释为什么
第 47 题：双向绑定和 vuex是否冲突
第 48 题：call和 apply 的区别是什么，哪个性能更好一些
第 49 题：为什么通常在发送数据埋点请求的时候使用的是1x1 像素的透明gif 图片?
第 50 题: (百度) 实现 (5).add(3).minus(2) 功能。
第 51 题:Vue 的响应式原理中 Object.defineProperty 有什么缺陷？
第 52 题：怎么让一个 div 水平垂直居中
第 53 题：输出以下代码的执行结果并解释为什么
第 54 题：冒泡排序如何实现，时间复杂度是多少，还可以如何改进？
第 55 题：某公司1到12月份的销售额存在一个对象里面
第 56 题：要求设计LazyMan类，实现以下功能。
第 57 题:分析比较 opacity: 0.visibility: hidden、display:
第 58 题：箭头函数与普通函数(function)的区别是什么?构造函数(function)可以使
第 59 题：给定两个数组，写一个方法来计算它们的交集。
第 60 题：已知如下代码，如何修改才能让图片宽度为300px？注意下面代码不可修改。
第 61 题：介绍下如何实现 token 加密
第 62 题：redux为什么要把reducer设计成纯函数
第 63 题：如何设计实现无缝轮播
第 64 题：模拟实现一个 Promise.finally
第 65 题:a.b.c.d 和 a['b']['c"]['d'],哪个性能更高?
第 66 题：ES6代码转成ES5代码的实现思路是什么
第 67 题：数组编程题
第 68 题：如何解决移动端 Retina屏1px像素问题
第 69 题：如何把一个字符串的大小写取反（大写变小写小写变大写)，例如’AbC'变成'aB
第 70 题：介绍下webpack热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
第 71 题：实现一个字符串匹配算法，从长度为n的字符串S中，查找是否存在字符串T，T
第 72 题：为什么普通 for循环的性能远远高于 forEach 的性能，请解释其中的原因。
第 73 题:介绍下 BFC、IFC、GFC 和 FFC
第 74 题：使用JavaScript Proxy实现简单的数据绑定
第 75 题：数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少
第 76 题：输出以下代码运行结果
第 77 题：算法题「旋转数组」
第 78 题：Vue的父组件和子组件生命周期钩子执行顺序是什么
第 79 题：input搜索如何防抖，如何处理中文输入
第 80 题：介绍下Promise.all使用、原理实现及错误处理
第 81 题：打印出1-10000之间的所有对称数
第 82 题：周一算法题之「移动零」
第 83 题：var、let 和 const 区别的实现原理是什么
第 84 题：请实现一个add函数，满足以下功能。
第 85 题:react-router 里的标签和标签有什么区别
第 86 题：周一算法题之「两数之和」
第 87 题：在输入框中如何判断输入的是一个正确的网址。
第 88 题：实现convert方法，把原始list转换成树形结构，要求尽可能降低时间复杂度
第 89 题：设计并实现 Promise.race0
第 90 题：实现模糊搜索结果的关键词高亮显示
第 91 题：介绍下HTTPS 中间人攻击
第 92 题：已知数据格式，实现一个函数fn找出链条中所有的父级 idconst value =
第 93 题：给定两个大小为 m和 n的有序数组 nums1和 nums2。请找出这两个有序数
第 94 题：vue在v-for时给每项元素绑定事件需要用事件代理吗？为什么？
第 95 题：模拟实现一个深拷贝，并考虑对象相互引用以及Symbol 拷贝的情况
第 96 题：介绍下前端加密的常见场景和方法
第 97 题:React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到O(n)，
第 98 题：写出如下代码的打印结果
第 99 题：编程算法题
第 100 题：请写出如下代码的打印结果
