前言我是团队老校招面试官。这几年，我虐待过很多校招学生。我遇到过很懂套路的，也遇到过不善于表达的。老实说，面试前我经常感到紧张。恐怕会因为我的愚蠢问题没有得到充分探讨而错过好种子。所以我经常想：什么是好题，前端校招应该考察什么？现在又到了校招季，跟大家分享一下我的经历。免责声明：我一直是一面面试官，所以我的思考和见解都是针对一面，或者说技术面；每个面试官都有自己的面试风格，比如我们组有个也是负责一边的，他特别喜欢问问题。图形算法。所以你看了我的文章，以为你已经准备好了，但是你被面试官的问题弄糊涂了。别怪我，我不负责任。我跟大家说说一些通用的部分；有很多面试官比我更有经验。本文仅代表个人观点，希望大家指正。核心思想校招面试和社招面试有什么区别？我用一张图来说明：校招面试要重点考察潜力。在前端这条路上，学习能力看你能不能走得快，学习欲望看你能不能走远。那么前端知识在招聘的时候不重要吗？也很重要。老实说，当你工作的时候，你在学校学到的知识不一定能用得上，因为工作场景和自学场景的侧重点是不一样的。比如你在学校做前端开发，一般都是自己一个人做，但是工作之后，往往要和别人合作开发。这时候统一代码规范，如何组织代码，可以降低耦合度，适合多人协作。考虑在内。再比如，如果你自己做前端，你可能会想着如何使用新技术让它更酷，而在业务中，你关注的是如何处理兼容性，如何监控和减少脚本错误以保持项目稳定等等。更何况你在学校是怎么学习到海量用户场景的开发经验的？所以对于学校招生，我们更看重的是潜力，而不是不完善的前端知识积累。前端基础是你获得面试机会的资本，前端知识掌握所体现的潜在特质是让你脱颖而出的亮点。如何检验这些虚拟能力？下面将展开。作为校招，你要考虑的是如何证明你的学习能力和学习欲望，这比你简历上写了多少行React代码更重要。尤其是面试大公司。面试过程百花齐放。我在连续的面试中总结了一套面试流程：基本上这样一套下来，面试官的整体水平就很清楚了。不同的公司团队有不同的流程，但以上几点是很常见的考察点。一般我们会面试一个多小时，让大家有个全面的了解，这也是一种责任。如果太糟糕，请早点结束。接下来我会重点介绍前端基础和项目经验，以及我要考察的内容。前端基础我们常说前端开发易学难精，因为前端开发涉及的知识项非常多。下面这张经典图应该很多人都看过吧：我觉得前端开发的六大基础知识：HTML、CSS、JavaScript、Mobileweb开发、调试、HTTP网络知识是招生必备的知识，求教他们在采访中一一呈现。如果你在这些前端基础上没有发挥好，那么你只能在学习能力上特别突出。HTML前端编程语言基础。我将调查：常用的元标头；根据你对标签语义的理解，判断你是否可以写出更规范的HTML代码；HTML5中的新功能；HTML渲染解析知识，比如为什么CSS放在前面，JS放在后面，如何理解并行加载和串行执行（很有意思的一个知识点，这里就不展开了）；...CSS前端编程语言基础。CSSExpression之类的古董就不去考察了，IE6、IE7等被时代遗弃的浏览器也算是兼容了。我会调查：如何写出更好的CSS，比如层级不能太深，如何使用ID，什么时候使用class，比如如何拆分和组织CSS代码等；盒子模型；非常常用的CSS3知识，比如CSS3动画，比如弹性布局；...JavaScript是最重要的前端编程语言。在这一部分，相信你可以很容易地找到很多面试题，或者是必记的JS知识清单。在这篇文章中，我将研究原生JavaScript知识，这是所有框架插件的基础。我还是会问事件模型闭包原型链等前端基础知识，但是我会从单点逐步深入扩展或者结合具体案例，看你是否真正理解。如果性能好，我有时会作为加分项问浏览器解析渲染原理（DOM树，渲染树，重排重绘，分层渲染，为什么DOM操作太多会影响性能等等）。移动Web开发我说移动Web开发是现在前端开发领域的一大热点，应该没人反驳吧？如今，移动应用层出不穷，移动Web开发知识变得越来越重要。如果你不懂移动web开发知识，那你就真的落伍了。我将研究：移动Web开发与PCWeb开发有何不同？本题考查你对移动web开发的整体理解，同时看你是否能有条理的思考；如何实现响应式布局？检查您是否了解常见的布局方案；移动手势和事件；如何提高手机页面的渲染性能？移动端网络，看能不能从减少HTTP请求开始提出解决方案，是否了解GPU渲染（部分进阶）等；...调试开发总是有bug，页面运行环境总是比想象的复杂。这时候能够找到问题的原因并通过调试独立解决就显得非常重要了。我会调查：你是否会使用基本的抓包工具和调试控制台；如何从浩如烟海的网络内容中找到有用的信息；如何在移动端调试；...如果你连HTTP包调试都不会？如果你连304的含义都不知道，你就想不通为什么修改代码后页面还是老样子？前端开发要和网络打交道。我将研究这部分：常见的HTTP状态代码；不同请求类型之间的区别；在实际面试的时候，我也会问一些比较综合的问题，比如：从用户输入url到最终页面展示的过程中发生了什么？老板反馈页面打开白屏，但是你的手机是正常的，怎么办？我的页面有动画，性能不好，如何优化？...这些基本上是我在查看前端基础知识时提出的问题。可能有人会说：咦，XSS、CSRF相关的web安全呢？我会找面试机构招收学生，但是学校招收的学生有多少真的遇到过这样的场景。除了记忆测试，调查还有多大意义？有人会：哎，怎么不说跨域呢？同理，跨域用在业务项目中前端和cgi域名分离或者跨业务调用，但是没必要要求所有在校同学都遇到过这样的场景吧？嘿嘿，那应该问React，Vue等。我掌握好这些了吗？确实，我发现这两年，有的受访者对React掌握的很好，说是一套，但他们真的对原生JavaScript掌握扎实吗？我一直相信，只要扎实掌握原生JavaScript知识，就可以很快学会一个框架，不管以后流行的框架怎么变，你都无愧于心。所以React和Vue是加分项，不是必须的。项目经历我经常在面试前花20分钟打开面试官简历上写的Github和博客看看。所以如果你只是想写在简历上，并没有真正去管它，那你还不如不写呢。我会根据面试官的Github和博客的内容，做一些有针对性的提问。在前面的环节中，你可以说你只是对某一个知识点不了解，但是你自己写的应该掌握吧？我总是可以深入询问，对吧？面试的时候，我也会根据简历上的项目经历，向面试官询问具体的项目细节。你是照着图就用框架吗？你打酱油的案子，把你的名字写在项目上了吗？我会继续调查这些，如果是，扣分。然后我会深入调查你项目中使用的技术栈。您应该掌握用于自己项目的知识，对吗？我总是可以深入询问，对吧？除了考察项目经验中的知识外，我还会考察一般素质。所以我经常问一些开放性的问题：你对哪个项目感到最满意，为什么？你有没有遇到过很大的问题，最后是怎么解决的？这个时候，你就应该抓住机会，展现出自己更突出的能力，比如坚持不懈地克服困难，比如……算了，话多了就学套路了。团队协作能力也可以在项目经历中体现出来。面试官可能会在你陈述的时候默默评价你：这个人好像不太合群，要尽快淘汰他。以上其他的小点是我对校招面试流程和应该考察哪些问题的理解，也是我多年面试经验的沉淀。在这一部分，我会解答大家可能会有的一些疑惑：前端校招到底要不要考算法？印象中很多公司团队都会问算法的问题，比如怎么实现快排，我们团队其他面试官有时候也会问。个人认为考前端基础知识比考算法好。算法在前端领域的使用不像其他开发领域那么多。做业务开发好几年了，没用过复杂的算法。校招问算法的时候，更多的是考察你对大学专业知识的掌握程度，以及你的学习能力。所以我基本不问，前端基础知识测试也能看出学习能力。除非你的前端基础真的很差，否则我去研究一下算法。可能有人会说，以后要做复杂的系统，做高性能的框架，就需要高水平的算法。是的，我承认，但这不是现在前端学校招生必须掌握的能力。只要学习能力强，还怕以后算法知识补充不上来吗？前端校招该不该考设计模式？公司一个同事写了一本书《JavaScript设计模式与开发实践》，豆瓣9.1，相当不错的一本书。学好设计模式，会帮助你写出结构更清晰、维护更方便的项目代码。校招的时候可以调查，但是直接问你知道哪些设计模式有点过分，因为有的时候我们其实已经用过某种设计模式的思想来组织代码了，只是不会知道它的名字，那我们就中招了？这是一种测试术语的惰性方法。更好的办法是给出一个真实场景的问题，看对方能不能用设计模式的思路解决。学校招生应该注重技术深度还是技术广度？我参加百度校招的时候，百度的一位负责人说：“在学校，知识的广度应该是主要的重点，工作之后，你应该选择某个技术方向去深挖，哪天遇到瓶颈的时候，那你就该往广度上发展了。“我是这么认为的。所以我更喜欢知识面广的学生。比如上面提到的一个综合问题：从用户输入url到最终页面显示的过程中发生了什么？部分学生擅长计算机网络课程。他们可以告诉我HTTP请求包、网络模型、DNS解析、连接建立等方面的细节。这是高深的学问，也不错。但我更喜欢听到这样的回答：用户输入url，检查浏览器缓存机制，HTTP请求包结构，DNS解析，连接建立，服务端处理（如动态页面处理，静态页面返回，CDN等相关知识），如何解析浏览器收到的HTML内容，如何并行加载和执行CSS和JS，如何构建渲染树渲染页面，如何根据请求头将内容缓存到浏览器。如果这时候能加入HTTPS、同构直接输出、ServiceWorker等就更好了。这就是知识的广度，是将知识组织成一个整体的框架。即使你回答的时候不能把一些细节解释清楚，我想你的分数也会比只知道一个点，解释的深入的同学高。据我了解的套路，一些大学计算机社团有一个很好的传统：师兄师姐们总结了完善前端面试的必备知识和常见问题。然后弟弟妹妹们就可以跟着图片一起找出来，一起背诵，或者互相学习。我当过一段时间的面试官，才看到这样的一个单子，当时惊呆了。于是我开始反常规。如果一个校招面试官没有停顿的回答我的前端基础知识，我就会从一个知识点开始问更深层次的知识，或者再深入一点，问压力面的对方答不上来。这个时候就可以看你是真的掌握了这些知识，还是光靠背。或者直接从场景出发，而不是直接问介绍前端缓存之类的问题。当然，套路也不错。在我看来，你真的可以掌握知识>背诵掌握知识>连基础知识都答不好。如果你连这些知识都懒得背，那我也懒得放过你。结论这么啰嗦，我写这篇文章到底想干什么？是为了热点吗？即金银银的招聘季即将来临。是不是告诉大家面试官是怎么提问的，让大家学会一些应对面试官的套路？呵呵，那我要告诉你，我们已经有意识地反套路了。如果你说你知道某个知识，但发现你只是粗略地浏览了一下，那会让我们感觉更糟。写这篇文章还是希望大家趁着时间，梳理一下自己的知识体系，查漏补缺，有针对性的学习前端知识。写这篇文章还是想让大家感受一下面试官的视角，如何做好面试的心理准备，减少因为紧张等因素而无法正常发挥。写这篇文章也是想和其他校招面试官交流一下。我认为没有必要保守这些秘密。重要的不是问题，而是面试官能给出什么样的答案。最后，大家可以祈祷一下：面试腾讯的时候不要碰到我。分享一份在GitHub上无意中找到的《前端校招面试题精编解析大全》。它已被标记为8.3K星。仔细看完，分析的还不错。我们坚持分享美好事物的原则。在今年的金三银四中找到了满意的工作，下面分享给大家。HTML浏览器页面的三层是什么，分别是什么，作用是什么？HTML5的优点和缺点是什么？Doctype的作用？如何区分严格模式和混合模式？他们的意思是什么？HTML5中有哪些新内容，删除了哪些元素？您在哪些浏览器上测试过您的网页，这些浏览器的核心是什么？每个HTML文件的开头都有一个很重要的东西，Doctype，你知道这是干什么用的吗？说说你对HTML5的理解？(what,why)对WEB标准和W3C的理解和理解？……CSS解释一下CSS的盒模型？请告诉我CSS选择器有哪些类型，并举几个例子来说明它们的用法？请告诉我CSS有什么特别之处？（优先级，计算特殊值）常见的浏览器兼容性问题及解决方法？列出显示值并解释它们的作用？如何居中一个div，如何居中一个浮动元素？请列出几种（至少两种）清除浮动元素的方法？块、内联和inlinke-block细节的比较？什么是优雅降级和渐进增强？谈谈浮动元素带来的问题和你的解决方案。你有哪些性能优化方法？......JavaScriptjs的各种位置，比如clientHeight、scrollHeight、offsetHeight，以及scrollTop、offsetTop、clientTop的区别？js拖拽功能的实现js的异步加载js的防抖节流方法谈谈闭包谈谈你对scopechainJavaScript原型、原型链的理解？有什么特点？请解释一下什么是事件委托/eventdelegationJavascript如何实现继承？函数执行改变了thisbabel的编译原理函数currying说说类的创建和继承说说前端的事件流如何让事件先冒泡再捕获说说图片的懒加载和预加载jsnew操作符是干什么的？改变函数内部this指针的指向功能（bind、apply、call的区别）Ajax解决浏览器缓存问题...由于文章篇幅有限，只能展示部分面试题。如果您需要，请单击此处获取免费问题+解析PDF。VueVue中键值的作用为什么Vue组件中的数据一定要是函数呢？vuex的State特性是什么？介绍一下Vue的响应式系统computed和watch的区别。介绍一下Vue的生命周期。为什么组件的数据必须是一个函数？组件如何通信？如何在Vue.cli中使用自定义组件？你遇到过什么问题吗？Vue是如何实现按需加载和webpack设置的？简述每个周期适用于哪些场景。什么是scs？Vue.cli的安装步骤是什么？有哪些主要特点？谈谈你对Vue.js模板编译的理解？Vue路由跳转的几种方式Vue是如何实现按需加载和webpack设置的？Vue的路由实现：hash模式和history模式Vue、Angular、React有什么区别？Vue路由的钩子函数Vue的计算属性是什么？......React介绍reactReact单数据流react生命周期函数和react组件生命周期reactJs组件通信的原理、区别、亮点、作用你了解过react的虚拟DOM吗？VirtualDOM是如何比较的？项目中用到了react，为什么选择react，react有什么好处？如何获得真正的dom？选择React的原因？React的jsx，函数式编程react的组件判断刷新什么不刷新React-Router路由的动态加载模块如何配置什么是Redux中间件，接受几个参数Redux请求中间件如何处理并发浏览器跨标签页面通信BrowserArchitecture浏览器下的事件循环（EventLoop）从输入url到显示过程重绘和回流存储WebWorkerV8垃圾回收机制内存泄漏回流（reflow）和重绘（repaint）优化如何减少重绘和回流？一个页面从输入完成页面加载和显示的URL。在这个过程中会发生什么？localStorage和sessionStorage以及cookies的区别总结...服务器和网络HTTPS和HTTPHTTP版本的区别从输入URL到页面渲染发生了什么？HTTP缓存缓存位置强缓存协商缓存资源用户行为影响浏览器缓存缓存的不同优势刷新请求执行过程...算法和数据结构二进制树序遍历B树的特点，B树和B+树的区别尾递归大数阶乘怎么写？递归方法会出什么问题？多维数组转一维数组的方法说说冒泡快排的原理堆排序方法的原理？复杂性？几种常见的排序算法，手写数组去重，方法尽量多写如果有一个大数组，里面全是整数，怎么求最大的前10个数由于文章篇幅有限，只讲了一部分可以出示面试题，如有需要，点此获取免费题+解析PDF
