前端面试必备宝典

我五月也是面试了十几家前端，其实面试官问的问题都大差不差，无非就是一些场景题。 前端已上岸，我之前自己准备整理的场景题合集用不上了，发给有需要的人，放后面啦～

新手入门前端，需要学习的基础内容有很多，我把需要学习的东西整理出来分享给大家：1. HTML、CSS、JavaScript基础。学完基础后，可以找个项目实战练习下。2. JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。3. ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。4. HTML5和CSS3。要熟悉其中的新特性。5. 前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。6. UI框架：Ant Design、Element UI。在做管理后台的时候，这两个UI框架使用的比较多的。Element UI 是基于 Vue.js技术栈的。Ant Design 既有基于  React技术栈的。7. Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 Node 环境的配置，以及 Node 的一些基础知识。8. 前端工程化：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass、自动化测试、持续集成 等。9. 前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。10. TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。11. 小程序开发。学会基本的JS语法，再了解小程序独有的API（参考小程序的官方文档），就已经掌握了小程序开发，没有你想象的那么难以上就是所有内容了，希望可以帮助到大家。

个人负责过几年部门的前端校招，当然也做了大量的校招、社招面试，看大家写了很多面经、求改简历的帖子，想从面试官的角度提一些小建议，当然不同公司，不同部门，甚至不同的面试官都是有差异的，所以我只代表个人，不代表公司关于简历：1. 学校、专业、绩点，这个到校招阶段你已经改变不了了2. 项目经历，不管是Demo、课程作业、实习项目、工作室都可以，实事求是地写清楚你在里面做的事情和技术亮点，二面以后都会追问里面的细节3. 关于专业技能：你简历上写的专业技能面试官都会认真看，一些复杂场景的技术栈或者新的技术都是抓眼球的点，但和项目经历一样，请实事求是。从我个人倾向来说，你可以是前端专业技能很强，也可以前端过得去，但综合能力很强，且从目前行业趋势来看，我会更加倾向于选择后者4. 关于学历：本科、硕士都OK，没有倾向，而且公司、部门不同的发展阶段会倾向于不同的学历背景，纯看运气了关于面试：1. 认真听完面试官的问题，可以思考片刻，组织一下逻辑，不要着急回答，条例清晰和回答的正确与否同样重要2. 前几轮面试一定要认真总结，特别是回答不好的问题，回去好好查一下资料，后面的面试可能还会继续问3. 实事求是，知道就是知道，不知道不要乱扯，也不要为了把自己知道的知识点讲出来而答非所问，如果想让面试官知道你对某一块没有问到的知识点有了解，可以在面试官问完以后主动说一下4. 有时间可以多问，了解一下用人团队做的业务、用的技术、工作环境等，校招是双向选择5. 对前端或者技术的热情很重要，热情是驱使你不断进步的源动力，面试中尽可能通过对体验的极致追求、对技术原理的刨根问底来表现你的热情，希望每一个立志从事前端岗位的同学都是真的热爱前端，而不是只为了一份工作25届面试体会：1. 相比于前几年大家对框架、脚手架的依赖明显更强了，很多同学脱离框架、脚手架后，基本的HTML标签、事件绑定等都不会了，或许前端技术的成熟不再需要大家了解这些原生API了，但我个人还是希望大家把基础的CSS、JS、HTML、BOM/DOM、工程化、HTTP协议、前端安全等基础知识系统地学好2. 今年有算法背景的同学明显多了，这很好，就像前面说的，我倾向于综合能力强的同学想到再补充，有问题可以随时私信，知无不言

#前端##前端开发[话题]##前端offer##前端面试必备宝典##前端八股#

看到一个工作一年被裁员的前端小哥，发了一篇文章讲了自己的裁员经历，然后反思了自己学习前端的不足，觉得挺有用的，分享给大家：1. 应该从浏览器运行机制和组成入手,逐层深入了解前端技术背后的原理框架。2. 引导自己形成一个完整的前端知识体系,而不是零散学习各个知识点。3. 应该经常看一些高质量文章资源，可以帮助自己梳理知识体系。4. 应该着重学习重要框架的原理知识，而不是死记技术细节。5. 推荐对Node、Koa等后端框架也进行了解，形成全栈视角。6. 重视项目实战经验的累积,不断完善和汲取经验。7. 提出学习不能停留在问题解答阶段，应该自己调试找出错误原因。8. 总结了个人的前端知识体系架构与学习路线。

哈喽，大家好呀，我是前端理想哥。为什么好多后端老是觉得前端简单呢？理想哥觉得，说这些话的后端，大部分都是没有深度了解过前端，只会写几个前端页面，或者起个vue项目写几个vue页面的，然后就片面的认为前端不就是写写页面吗？说到本质，还是因为他们对于前端所做的事情知之甚少，所以会有了前端简单这个片面的想法，就像很多前端认为后端也就只是会写写crud一样。目前前端行业可不是简简单单写几个页面就能行的了，你要启个前端项目，组件库你得做吧，可视化图表ECharts、D3.js你得学吧，一套代码展示多端那么自适应你得做吧，还要处理浏览器兼容性，后期为了性能，还得做各种性能优化，ssr，管理后台的微前端是不是要得考虑下？为了保障质量，自动化测试，错误监控等等是不是也要做下？自动化发布部署呢？更别说一些低代码、无代码编辑器等等，复杂度就更高了对于后端来说，遇到业务逻辑复杂的场景，你表是不是得设计好呢？遇到千万级的数据，索引是不是要建好呢？大并发怎么处理？微服务怎么搞？链路追踪要不要做？其实都是非常考验技术的，也不是只会crud这么简单的。所以，前端后端没有难易之分，只是分工不同罢了。说的再难听点，都是底层劳动密集的搬砖工，还互相看不起，确实有点脑子秀逗了。。

* 不太会用牛客这个编辑器，格式比较丑，凑合看吧* 有些知识点已经过时，请自行判断* 前端需要与时俱进，保持学习牛友们分享的最新面经，建议针对不会的题目做个整理归纳笔记1.基础知识方面（css+html+js三件套，Git工具）前端笔记廖某JS教程菜鸟教程CSSCSS语法和选择器CSS基础拾遗JS基础知识总结JS巩固提升Git常用快捷键牛客前端工程师面经正则表达式学习正则表达式面经2. 前端框架方面（vue + react）vue学习文档vue学习文档vue2学习笔记vue技术揭秘&部分源码解析尚硅谷vue实战项目尚品汇项目笔记vue3+TS快速上手Vue3笔记Vue中的diff算法源...

1. 自我介绍2. 介绍七层网络模型、和DNS3. React 代码层的优化可以说一下么？4. 说一下 useMemo 和 useCallback 有什么区别5. 说一下 useEffect 和 useLayoutEffect 有什么区别6. useEffect 对应在 class 中都生命周期怎么写7. 如果在 if 里面写 useEffect 会有什么问题？8. 详细说下你对React 的 Fiber 架构理解9. 在 if 语句里面写 hook 会报错，你可以用 fiber 架构来解释一下吗？10. 个人方面有什么规划吗？11. 对未来的技术上有什么规划呢？12. 能不能从技术的角度讲一下你工作中负责业务的复杂度？13. 你有什么想问我的吗？这些题你会几道？

CDN的原理是什么？这是一道前端面试非常高频的面试题，但是很多同学在面试时候只能说出个大概，老规矩，点赞收藏支持一下，给我一分钟，理想哥教大家该怎么满分回答这个问题如果我是求职者，我会这么回答：目前的互联网应用中都包含大量的静态内容，如果不做任何处理，所有的请求都指向源站服务器的话，不仅会耗费大量的带宽，还会拖累页面加载速度，影响用户体验。CDN服务的出现可以解决上述问题。CDN的本质仍然是一个缓存，通过在现有网络中增加一层新的缓存节点，可以将数据缓存在里用户最近的地方，使用户以最快的速度获取数据，不需要每个用户的请求都去源站获取，避免网络拥塞、缓解源站压力。比如，你住在东北，某网站源站服务器在深圳，如果没有CDN服务，那么每次数据请求都要长途跋涉到深圳的服务器，如果有CDN服务，就会在东北的CDN服务器上缓存一份数据，每次的数据请求就直接从东北的CDN服务器返回了，不用再大老远跑去深圳了。当用户第一次发起内容请求时，不同地区的用户访问同一个域名，CDN服务商的智能DNS服务会返回不同CDN节点的IP地址。浏览器发起域名查询时，CDN 全局负载均衡设备根据用户 IP 地址，以及用户请求的内容URL，计算并返回离用户最近的相同网络运营商的CDN节点IP；然后向边缘节点服务器发起请求，浏览器来请求内容数据，边缘节点会检测当前节点是否有数据，如果没有就去父级节点要数据，父级可能还会有父级节点，一直往上获取数据，如果还找不到就去源站服务器拿，并依次序返回，一个地区内只要有一个用户先加载资源，就会在CDN中建立缓存，该地区的其他后续用户都能直接读取缓存数据。如果某个边缘节点可以找到，会先校验内容有效期，当确定有效期之后返回给用户。用户后续再次发起请求时，会先去 CDN 缓存服务器获取。如果获取到数据，那么就直接返回。否则就重走一遍上面的流程以上就是这个问题的回答了，大家可以下次面试时试试这么回答看看效果。最后，关于关注理想哥，每天学点前端面试小技巧。

经常看到有前端博主在直播间教大家面试时如何作弊，说真的，真是觉得有点误人子弟。我一直坚持正道成功，简历适度包装可以，但是面试一定要踏踏实实认认真真复习准备，然后真刀真枪的去面，这样拿到的offer你才会踏实。你说你不肯花时间认真复习面试，成天就想着靠这些歪门邪道去混个offer，面试时你不心虚吗？这样来的offer你不心虚吗？靠自己的实力拿到的offer，你工作的底气都是足的。还是那句话，希望大家都能堂堂正正面试，光明磊落拿offer。

最近发现好多同学在面试时，简历中写了自己熟悉微前端，但是当面试官问「为什么你们不用iframe做微前端」时，回答都不能让面试官满意，今天，理想哥和大家梳理下，这个问题该怎么回答，大家可以先点赞收藏下。其实，如果你不考虑用户体验问题的话，iframe 几乎是最完美的微前端解决方案，什么样式隔离，JS隔离，这些问题在iframe中通通不存在，因为浏览器提供了原生的硬隔离方案，但也正是这种硬隔离方案，导致了无法在应用之间进行数据共享，随之而来的，就是一些列的开发和产品体验问题。比如第一个问题，每次刷新页面，iframe的url都会丢失，而且前进后退按钮没办法用，当然，这个问题，你可以通过提前缓存url来解决。第二个问题，就是慢，因为每次加载子应用，都是一次资源重新加载的过程，每次都要重新渲染页面，当然了，如果你睁一只眼闭一只眼，这个问题也是可以忍受的。第三个问题，因为硬隔离导致的主应用和子应用之间数据完全隔离，不共享，导致你需要做很多额外工作来处理，比如每个子应用的免登陆问题，数据实时同步问题等等第四个问题，就是主应用和子应用之间因为DOM结构不共享，而导致的UI不同步问题。比如这个场景，我们要求子应用中的弹窗要在浏览器中居中显示，用户拖动浏览器大小时候，也要自适应居中，其实做起来就很麻烦，增加了很多额外的工作量。以上，就是为什么不建议用iframe做微前端的原因了，大家在面试时，如果被面试官问到了，就可以从上面四个方向来回答。

对于前端开发来说，工作年限超过5年，就应该多思考下自己未来的职业发展方向了，是走管理，还是继续走技术，还是转行送外卖，针对想继续走技术路线的同学，我建议大家可以考虑以下几个细分方向：1. 深入理解业务。可以站在技术的角度提出可以改进业务的建议，往前端交互以及用户体验的方向去发展。2. 数据可视化。Canvas、WebGL、D3、Echarts、webgis等等，都是这个方向需要学习的技术点，这是一个很好的方向，而且后面可以也可以尝试去做游戏仿真，虚拟现实等。3. 跨端。去做跨平台方案的设计和开发，比如说uniapp，taro，flutter，RN等等4. 浏览器的音视频富媒体功能的开发，像WebRTC。5. 前端运营方向。帮助运营同学快速的搭建各种各样的活动页面，像可视化平台，低代码等等6. 业务基建&架构方向，这个方向很考验你的技术深度和广度，特别适合只想专心做技术，且痴迷技术的同学。7. 前端运维部署方向。需要你了解运维、部署方面的知识。8. nodejs全栈方向，做一个偏向于服务端的前端开发。除了以上这些，还有哪些方向？欢迎大家在评论区补充。

最近在脉脉上看到了这张图，一个人吐槽现在前端面试难，说自己去米哈游面试，被打击了，然后底下评论区，一片哀鸿遍野，都在说前端已死。但真的是这样的吗？我想和大家说，不是这样的，不要听这些菜鸡们瞎扯。大家可以看图中这些题，有难度吗？都是基础的八股文，如果你认真，系统的复习面试，上面这些题肯定是会复习到的，图中的这个面试者，明显就是没有复习到位，连基础的背诵一下就能过的八股文，他都回答不上来。说真的，我一直觉得，那些整天叫嚣着前端已死，制造焦虑的人，基本都是那些学历、工作背景不占优势，还不肯好好写简历，不认真复习面试的人，强者从不抱怨环境，只有菜鸡才会整天把奋斗挂在嘴上，身体却选择躺平。莫听穿林打叶声，何妨吟啸且徐行。不要让前端已死的这种论调降低了你学习、复习的热情，相信我，只要你认认真真改简历，系统科学的复习准备，就一定可以拿到满意的offer。

最近发现好多前端小伙伴，想寻找工作和生活平衡，不想继续卷了，而选择去面试外企，但是好多人都因为不知道外企面试的流程，不知道每一轮面试的面试重点，导致面试结果不理想。刚好，理想哥之前也面试过外企，也拿到一些外企offer，所以对外企的面试流程还是挺熟悉的，今天就分享给大家，希望可以帮助到想要面试外企的小伙伴。外企的面试流程和国内并不同，一般来说，大致都有以下流程：第一轮面试，一般是英语的电话沟通，叫做Intro Call，能到这一面，就说明你的简历已经通过筛选了，这一面主要是考察你的英语「听」和「说」的能力，然后还会顺带考察一些计算机基础相关的知识，难度不大，顺便说一句，国外的很多HR一般都是有一定的技术背景，也是懂技术的，这个和国内确实不太一样。第二轮面试，这一轮一般是远程电话面试，是技术面，主要考察的是数据结构和算法，还有你的前端基础，相当于国内互联网公司的一面，难度一般不会太大。第三轮面试，这一轮一般会邀请你来现场面，进行技术车轮战，可能会有3-5轮面，面试官拿着白板和笔来面，面试内容包括数据结构算法，系统设计能力，简历项目难点亮点，前端框架掌握，前端手写题等等，这一轮面试主要是系统考察你的技术广度和深度，难度是比较大的，理想哥当时是从下午一直面到了晚上，确实面的挺累的。最后一轮，一般就是团队leader和你沟通面试了，一般到这一面，就代表你已经通过了技术面试了，面试官主要是介绍团队的状况，和你说加入后会负责哪方面的内容，然后会询问一些你的意见之类的以上就是外企的面试流程了，大家可以对每一轮面试的内容，然后有针对性的去复习准备，祝愿面试外企的小伙伴都能拿到满意的offer。

最近发现好多同学在面试回答Vue响应式原理时，都只是回答了其中一部分，要么就是真的不了解，要么就是不知道该怎么完美回答这个问题，今天，理想哥就和大家说说 该怎么样完美的回答这个问题，征服面试官。还是老规矩，麻烦大家先点个赞收藏下，且听理想哥说来。关于这个面试题，大家可以套用这个模板来回答：vue2是怎么做的？vue2这种方法有什么问题？vue3又是怎么做的？vue3是怎么解决vue2的这些问题的？接下来，理想哥给个完整的回答，大家可以参考下关于Vue的响应式原理，vue2中是使用了Object.defineProperty来实现的，在页面开始加载时，vue会遍历data中的所有属性，并使用 Object.defineProperty 把这些属性全部都转为 getter/setter，当用户访问或者设置属性时，会触发 getter/setter 方法，然后通知每个组件实例对应的watcher方法，然后实现视图的更新但是，Object.defineProperty也是有缺点的，主要有以下三个缺点：第一个，对于复杂对象需要深度监听，一次性监听到底，计算量比较大第二，对于对象的新增/删除属性的操作，无法监听，需要使用Vue.$set、Vue.$delete辅助第三，需要重写数组原生方法实现数组的监听所以，在vue3中，使用了proxy来代替defineProperty，proxy有以下几个优势：第一，可以直接监听整个对象，而不需要遍历监听属性，性能会有提升第二，proxy可以直接监听数组的变化，而不需要再去重写数组原生方法第三，Proxy 有多达 13 种拦截方法，功能更加强大第四，Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；以上就是我的回答怎么样？这样回答是不是就很完美了，大家下次面试时候可以试着这么回答，看看面试官啥表情。

阿里外包值得去吗？先说结论：现在大环境不好，找工作不容易，如果实在是没有其他更好的选择了，可以去阿里外包试试水，如果有其他自研选择，那肯定不建议去阿里外包了。首先，阿里外包也是分层级的，总的以两层为主，上一层是直管，就是正式员工直接管理，下一层是外包，也是正式员工或者直管来管理的，薪资也是有很大差距的，比正编肯定低很多，但在行业内还可以的。如果你有其他更好的选择，那肯定不建议选择阿里外包。一入外包深似海，从此自研是路人。好处就是有了个阿里外包的经历，以后去其他公司外包会容易一些。不好的地方就是，面试难度还是比较大的，入职后，大部分人都是做非核心业务，日常工作以杂事，重复性工作为主。稍微难点的，核心业务的，都是正式员工在做的，原因也很简单，正式员工有kpi，外包没有。外包转正很难。大部分管理者可能都认为你要是牛逼就不会来当外包。很多同学想当然的以为只要自己混熟业务，每天兢兢业业工作，和正式员工一起上下班，一起加班就能转正，但实际情况不是这样的。杂事谁都可以做，没有成长性，也就很难以正式员工标准给你转正了，所以，不要听HR忽悠，外包转正的几率真的很小。你在外包干2年转正的几率远远低于在外面好好干3年进阿里的几率。外包只是工具人，不存在培养外包这件事。大部分部门对外包同学的定位就是工具人，熟练工。大部分来阿里做外包的同学，都是能力还可以，但又不够正式员工如P6P7的能力。抱着以外包的身份转正的想法，很多人觉得可以在阿里学习很多东西，能力提升，对自己有帮助。但其实，大部分时间都是要靠你自己，公司并不会把你纳入正式员工的培养机制中。外包的区别对待太多了。没有内网权限，工作量大，经常被以共同成长的名义要求和正式员工一起加班，合同一年一签，开除比较方便，阿里的福利和你没有关系，节日礼品你没有，零食也不给你吃。之前还看到一个外包同学没忍住跑去吃零食，被一个路过的HR怼：你是外包，不准偷吃零食，怎么这么没素质。有了外包经历，对你找自研的工作影响不好。很多好点的公司其实都默认不要外包出身的。逻辑很清晰：如果你够厉害，为什么会接受外包岗位呢。最后，欢迎关注理想哥，每天学点前端面试小技巧。

震惊了。。。看到这样一个操作: 几个人合伙应聘一个远程办公的，由其中一个人负责日常开会沟通啥的，然后几个人把任务分了做，工资也一起分了。一边上班，一边赚点远程办公的钱。。。

我所理解的事件循环是图里的这样的。然后查阅相关资料关于微任务和宏任务的区别。微任务：直接在js引擎中执行，没有参与事件循环的异步任务宏任务：参与了事件循环的异步任务那么问题来了，微任务是怎么进入事件队列的，走不走浏览器线程？走的话那不就是参与了事件循环了？不走的话通过js线程直接放到队列里？