-
事件模型
-
闭包
-
原型链
等前端基础知识,不过我会从单点逐渐深入不断拓展或者结合具体案例,看你是否真正的理解掌握。如果表现不错我有时还会问浏览器的解析渲染原理,作为一个加分项吧(DOM树、渲染树、重排重绘、分层渲染、为什么DOM操作过多会影响性能等)。
移动Web开发
我说现在移动Web开发是前端开发领域的热点,应该没人反驳吧?现如今移动应用层出不穷,移动Web开发知识变得越发重要。如果你不懂移动Web开发知识,真的是落后于时代。我会考察:
-
移动Web开发和PC Web开发有何不同?此题考察你对移动Web开发的整体理解,同时看你能否有组织有条理地思考问题;
-
怎么实现响应式布局?考察你是否了解常见的布局方案;
-
移动端的手势和事件;
-
怎么提高移动端页面的渲染性能?针对移动端网络,考察你是否能从减少HTTP请求出发提出解决方案,是否了解GPU渲染(偏进阶)等;
-
……
调试
开发中总免不了有bug,页面运行环境总比想象中复杂,此时能否通过调试找到问题原因自主解决,非常重要。我会考察:
-
是否会使用基本的抓包工具、调试控制台;
-
怎么从茫茫网络内容中找到有用信息;
-
移动端如何调试;
-
……
HTTP
如果你连抓包知识都不会你谈何调试?如果你连304的含义都不知道,你都想不通代码修改后为什么页面还是老样子?前端开发本来就要跟网络打交道。这一块我会考察:
-
常见HTTP状态码;
-
不同请求类型的区别;
-
有什么缓存方案以及怎么实现;
-
……
上面就是前端六项基础知识。实际面试的时候我也会问一些综合问题,比如:
-
用户从输入url到最终页面展示,这个过程中发生了什么?
-
老板反馈页面打开白屏,而你手机上是正常的,怎么办?
-
我页面上有个动画一卡一卡的性能不行,怎么优化?
-
……
这些基本上就是我考察前端基础知识会问的问题。
可能有人会:咦咦咦,XSS、CSRF这些web安全相关的呢?面试社招生我会问,但是校招学生又有几个真的有遇到这样的场景,考察除了考背诵又有多大意义?
有人会:咦咦咦,怎么不说跨域呢?同理,跨域在业务项目中前端和cgi域名分离或跨业务调用会用到,但是没必要要求在校学生都要遇到过这样的场景吧?
咦咦咦,那React、Vue这些总该问了吧,我这些都掌握得非常6呢?确实,我发现近两年有些面试者React这些掌握得很好,说起来一套一套的,但他们原生JavaScript真的掌握扎实了吗?我一直坚信,只要原生JavaScript知识掌握扎实,学习一个框架是很快的,而且不管以后流行框架怎么变化,你都心里不虚。所以React、Vue这些是加分的,不是必备的。
我常在面试前花20分钟,打开面试者简历上写的Github、博客去看看。所以你如果只是意思一下写在简历上而实际上都没怎么打理,那你还不如不写。我会根据面试者Github、博客的内容做些针对性的提问。前面环节你可以说你刚好不懂某块知识,但你自己写的你总该掌握吧?我总可以问深入了吧?
面试时我也会根据简历上的项目经历,询问面试者具体的项目细节。你是不是只会按图索骥简单用用框架?你是不是打了一箱酱油然后在项目中顺便挂个名?这些我会不断考察出来,如果是,扣分。然后我会对你项目中用到的技术栈做深入考察,你自己做项目用到的知识,你总该掌握了吧?我总可以问深入了吧?
项目经历除了考察知识,我也会考察通用素质。所以我常问一些开放问题:哪个项目是你觉得最满意的,为什么?你有没有遇到过某个大难题,最后是怎么解决?这时候你就应该把握机会把你比较突出的能力表现出来,比如坚持不懈攻克难题、比如……算了,说多了你就学会套路了。
团队协作能力也是项目经历中可以体现出来的,面试官可能在你的陈述过程对你默默做出评价:这个人看来不太合群,趁早把他淘汰好了。
上面就是我对校招面试流程和该考察什么问题的理解,也是我几年面试经验的沉淀吧。这一小节我回答些大家可能有的疑惑:
前端校招要不要考察算法?
印象中很多公司团队都有问算法问题,比如怎么实现快排,我们团队别的面试官有时也会问。个人觉得考算法还不如考察前端基础知识,算法在前端领域用的真没有其他开发领域多,我做了几年业务开发也真没用到复杂算法。校招时问算法,更多是在考核你大学专业知识的掌握程度,你的学习能力如何。所以我基本不问,考前端基础知识同样可以看出学习能力。除非你的前端基础真的比较差,我才会考察算法。
有人可能会说,以后做复杂系统做高性能框架这些都要求算法水平高啊。是的,我承认,但这不是前端校招生现在必须掌握的能力。他们只要学习能力强,还怕以后没法把算法知识补上来?
前端校招要不要考察设计模式?
公司一位同事写了一本《JavaScript设计模式与开发实践》,豆瓣9.1,挺不错的书。学好设计模式,对你写出结构更清晰,维护更方便的项目代码是很有帮助的。校招时可以考察,不过直接问你会哪些设计模式就有点过了,因为有时候我们实际已经用了某个设计模式的思路组织代码,我们只是不知道它的名称,那不就中招了?考术语是很偷懒的做法,更好的做法是给出一个实际场景问题,看对方能否用设计模式的思路解决。
校招学生应该偏技术深度还是技术广度?
当年我参加百度校招,百度的一个总监说:“在学校应该以知识广度为主,工作后应该选择某个技术方向深挖,当你某一天到了瓶颈,那你又是时候广度发展了。”深以为然。
所以我会更喜欢具有广度知识的学生。举个例子,上面提到的一个综合问题:用户从输入url到最终页面展示,这个过程中发生了什么?有些学生计算机网络课程学的不错,能从HTTP请求组包、网络模型、DNS解析、建立连接这些方面跟我讲深里面的细节,这是深度知识,也是不错的。不过我更喜欢听到这样的答案:
用户输入url,到浏览器缓存机制检查,到HTTP请求包结构,到DNS解析,到连接建立,到服务器端处理(如动态页面处理、静态页面返回,CDN相关知识),到浏览器收到HTML内容怎么解析,到怎么并行加载串行执行CSS、JS,到怎么构造渲染树渲染页面,到怎么根据请求头把内容缓存到浏览器端。如果此时你还能补充HTTPS、同构直出、Service Worker之类,那就更好。
这就是知识的广度,将知识组织成一个整体的架构。即使你回答的时候对一些细节讲不清楚,我也觉得比只知道单点并讲深的同学得分高。
关于套路
照我所知,有些大学计算机社团有着优良的传统:师兄师姐总结出完善的前端面试知识常问问题必备知识。然后师弟师妹就可以按图索骥,背背背或学学学。
我是做了一段时间的一面面试官才看到这样的清单,当时都呆了。于是后来我开始反套路了。如果一个校招面试者对我问的前端基础知识回答溜得飞起不打一个停顿,我就会开始根据一个知识点,深入一层问问,或者再深入一层,压力面,问到对方回答不出。此时到底是真正掌握这个知识还是单纯靠背,就能看出来了。或者直接就从场景切入,而不是直接问请介绍前端缓存这样的问题。
当然了,套路不是不好。我觉得,能真正掌握知识 > 靠背诵掌握知识 > 连基础知识都回答不好。你连这些知识都懒得记,那我也懒得放你过。
啰嗦了这么多,我写这篇文章到底是想干嘛?
难道是为了蹭热点?那是,马上就到金三银四招聘季嘛。
是为了告诉大家面试官怎么出题,让大家学会一些对付面试官的套路?呵呵,那我要和你说,我们已经有意识地反套路了,如果你说你懂得某一个知识,却被发现只是非常基础的掠过,给我们感觉是更差的。
写这篇文章还是想让大家趁还有些时间,对照着整理自己的知识体系,查漏补缺,有针对性的学习前端知识。
写这篇文章还是想让大家体会下面试官视角,对面试怎么进行有个心理准备,减少因为紧张之类的因素导致没有正常发挥。
写这篇文章也想跟其他校招面试官一起交流观点。我觉得没必要把这些当做秘密捂住,重要的不是问题,而是面试者能给出什么样的答案。
最后你可以祈祷:面试腾讯的时候不要遇到我。
下面分享一份我无意中在GitHub上刷到的一份《前端校招面试题精编解析大全》,已经标星8.3K了,仔细看了下,解析还不错,秉着好东西就要分享的原则,同时也希望大家在今年的金三银四中找到满意的工作,下面分享给大家。
HTML
-
浏览器页面有哪三层构成,分别是什么,作用是什么?
-
HTML5的优点与缺点?
-
Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
-
HTML5有哪些新特性、移除了哪些元素?
-
你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
-
每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗?
-
说说你对HTML5认识?(是什么,为什么)
-
对WEB标准以及W3C的理解与认识?
-
…
CSS
-
解释一下CSS的盒子模型?
-
请你说说CSS选择器的类型有哪些,并举几个例子说明其用法?
-
请你说说CSS有什么特殊性?(优先级、计算特殊值)
-
常见浏览器兼容性问题与解决方案?
-
列出display的值并说明他们的作用?
-
如何居中div, 如何居中一个浮动元素?
-
请列举几种清除浮动的方法(至少两种)?
-
block,inline和inlinke-block细节对比?
-
什么叫优雅降级和渐进增强?
-
说说浮动元素会引起的问题和你的解决办法
-
你有哪些性能优化的方法?
-
…
JavaScript
-
js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?
-
js拖拽功能的实现
-
异步加载js的方法
-
js的防抖与节流
-
说一下闭包
-
说说你对作用域链的理解
-
JavaScript原型,原型链 ? 有什么特点?
-
请解释什么是事件委托/事件代理
-
Javascript如何实现继承?
-
函数执行改变this
-
babel编译原理
-
函数柯里化
-
说一下类的创建和继承
-
说说前端中的事件流
-
如何让事件先冒泡后捕获
-
说一下图片的懒加载和预加载
-
js的new操作符做了哪些事情
-
改变函数内部this指针的指向函数(bind,apply,call的区别)
-
Ajax解决浏览器缓存问题
-
…
想学习前端web的朋友,和需要PDF文档的朋友都可以加入这边的技术交流裙,前面:1048,中间:337,最后:049,裙里从学生到大佬都有,资源免费分享,不见不散哦!
Vue
-
Vue中 key 值的作用
-
Vue 组件中 data 为什么必须是函数?
-
vuex的State特性是?
-
介绍一下Vue的响应式系统
-
computed与watch的区别
-
介绍一下Vue的生命周期
-
为什么组件的data必须是一个函数
-
组件之间是怎么通信的
-
Vue.cli中怎样使用自定义的组件?有遇到过哪些问题吗?
-
Vue如何实现按需加载配合webpack设置
-
简单描述每个周期具体适合哪些场景
-
scss是什么?在Vue.cli中的安装使用步骤是?有哪几大特性?
-
聊聊你对Vue.js的template编译的理解?
-
Vue 路由跳转的几种方式
-
Vue如何实现按需加载配合webpack设置?
-
Vue的路由实现:hash模式和history模式
-
Vue与Angular以及React的区别?
-
Vue路由的钩子函数
-
什么是Vue的计算属性?
-
…
React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理,区别,亮点,作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗,虚拟DOM是怎么对比的呢
-
项目里用到了react,为什么要选择react,react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
JavaScript
-
js的基本类型有哪些?引用类型有哪些?null和undefined的区别。
-
如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)
-
Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
-
JS常见的dom操作api
-
解释一下事件冒泡和事件捕获
-
事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?
-
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?
-
this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?
-
call,apply,bind
-
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
-
创建对象的多种方式
-
实现继承的多种方式和优缺点
-
new 一个对象具体做了什么
-
手写Ajax,XMLHttpRequest
-
变量提升
-
举例说明一个匿名函数的典型用例
-
指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?
-
attribute和property的区别
-
document load和document DOMContentLoaded两个事件的区别
-
JS代码调试
-
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】