假如我是前端面试官

想想工作近两年了,被别人的面试过的次数不多,大概只有四五场。下个月离职了,因此最近在帮公司招前端,参与了几场面试(其实去年这个时候,也是在帮前公司招前端)。之前一直在准备离职后回成都的面试,发现被别人面试和面试别人的感觉是完全不一样的。

算下来大概面试了十多个人了,因此可以假装自己是个前端面试官。今天突然想到一个问题,如果我是一个真正的前端面试官,我要问些什么问题呢?

<!--more-->

感觉面试官是一个很难得岗位,需要同时具备知识的广度和深度,所以说我现在只是一个假的前端面试官。

年后就一直在梳理自己的前端知识体系,并把相关总结整理在了github上,这里我会尝试列出我觉得比较有意思的前端面试题,但是并不会给出答案————否则篇幅就太长了(主要是懒哈哈)。

1. 基础知识

基础知识部分主要考察HTML、CSS和JS的一些常见问题,看看面试者基础是否扎实

1.1. HTML

面试一般不会单纯问HTML标签是干啥的,而是侧重于浏览器是如何处理HTML文档的

  • 对于语义化和结构化的理解
  • 浏览器是如何加载HTML文档的,梳理一下网络的相关流程
  • 浏览器是如何解析HTML文档的,考察CSS和JS对文档解析的影响,顺带可以问一下async和defer属性
  • 浏览器是如何渲染HTML文档的,这里可以问一下repaint和refollow

1.2. CSS

写好CSS不是一件很容易的是,加上面试时间有限,一般更侧重面试者的业务逻辑能力,通过下面几个问题可以了解一下面试者是否研究过CSS

  • BFC是啥
  • 选择器的解析顺序是从左到右还是从右到左
  • 样式继承,样式权重值计算规则
  • 行高的计算规则,数字、百分比、乘积因子有啥区别
  • SCSS中的常见用法,mixins和extends编译后的语法是什么样子的
  • rem布局和实现原理,是否考虑过纯CSS实现rem布局
  • bootstrap中栅格系统的原理,为何通过col-xscol-sm可以控制在不同分辨率下的
  • 你觉得CSS Module怎么样
  • 平常怎么管理样式表的,有听过BEM吗
  • 有了解过flex布局和grid布局吗
  • 有没有做过css动画,具体是怎么实现的呢

1.3. JavaScript

JavaScript基本是面试考察的重点,甚至有可能正常面试大部分时间都在围绕JS展开,这里可以考察面试者的编程能力

下面是关于JavaScript语法的一些题目,基本上很多题目都可以展开,看看面试者是否具备扎实的语言基础

  • 函数参数传递,所有参数实际都是按值传递的,只是区分为了字面量值和内存地址值,这一点经常有人搞错
  • JS中的词法作用域,左查询和右查询的区别,变量声明提升,函数作用域与块级作用域
  • 根据词法作用域引申出作用域链,描述一下变量进行右查找时的过程
  • 根据词法作用域引申出闭包,这个问题基本面试免不了俗的,看看每个人如何回答吧
  • 根据词法作用域引申出this的动态性,在四种规则下this的指向规则以及他们的优先级
  • 原型和原型链,这个也是基本都要问的,基本谈到委托查找就可以了
  • JS中的同步和异步,理解代码的执行顺序
  • 对ES6/7了解多少,在项目中用了哪些新特性
  • Promise的使用,是否了解标准和内部实现原理
  • JS模块化,AMD、CommonJS和ES6标准模块,是否用过RequireJSSystemJS等模块加载器

其次考察一下DOM和BOM,貌似我在面试中很少问过也很少遇到过DOM相关的问题

  • 事件模型,事件委托的原理和实现
  • 如何减少DOM操作次数,DocumentFragment有了解过吗
  • Cookie、localStorage和SessionStorage几种存储方式和区别,以及他们的优劣点,各自有什么应用场景
  • 函数节流和函数去抖的原理和实现
  • 可以使用原生DOM接口实现将节点插入目标节点之后的函数insertAfter
  • 了解过requestAnimFrame实现动画效果吗

2. 项目

项目经验这里一般重点考察框架使用和常见的业务问题,比如跨域、性能优化、web安全等

2.1. 开发环境搭建

现在一般会问到webpack和gulp

  • 平时是怎么搭建前端开发环境的,是否了解webpack常见配置和gulp任务的编写
  • 如何区分开发环境和打包环境
  • 能简单描述一下webpack的工作流程吗?他和gulp有什么区别
  • 热更新的工作原理是什么
  • 你们是如何管理第三方CDN模块的,他们是如何在项目中使用的
  • 参与过前后端分离的项目吗?你们是怎么处理数据接口的,用过mockjs吗
  • 如何在开发中代理接口请求
  • 自己发布过npm的包吗

2.2. 跨域

跨域是前端中比较常见的业务场景,可以考察面试者项目经验

  • 有没有在项目中碰见过跨域的问题,为什么会产生跨域
  • 你们是如何解决跨域问题的,还有其他的解决办法吗
  • 可以讲一下JSONP的原理和实现吗
  • 自己配置过CORS吗,这里可以扩展一下Access-Control-Allow其他几个头部
  • 遇见过接口请求前多出一次 OPTIONS 请求的情形吗?这是什么原因
  • 有没有了解过postMessage

2.3. Vue

由于公司的技术栈是Vue,因此一般通知过来面试的也是有相关使用经验的

  • 如何将axios绑定到this.$http上面呢

  • 通过[]直接向数组添加元素为什么不会触发视图更新呢?怎么处理这种情况

  • 父子组件嵌套时,父子组件内部的各个生命周期钩子触发先后顺序

  • 数据代理,为什么可以通过this.xx访问到this.$data.xx

  • 数据更新策略,数据更新触发的DOM更新是同步的吗?谈谈你对于nextTick的理解

  • vue-router的hash模式和history模式,对应的实现机制是什么

  • 你们在项目中是如何使用vuex的

  • SPA中,你们是怎么进行接口用户权限身份认证的

  • 有没有了解过SSR,能介绍一下原理吗

  • 在SPA项目中是如何进行性能优化的

  • 有没有踩过印象比较深刻的坑

  • 是否阅读过源码,如果是可以问下面的一些问题

  • 响应式系统的原理,如何进行依赖收集的

  • 了解前端模板引擎的实现原理吗

  • 模板编译经历了哪过程,他们的作用是啥

  • 虚拟节点是啥,为什么要使用VNode呢

  • patch操作中的diff算法,有了解吗

  • 你觉得Vue有哪些不好的地方

2.4. webview

由于公司的app内部有一部分是web业务,因此需要对webview有一定了解

  • 有app内部的webview页面开发经验吗
  • Android和iOS原生与JS交互是如何操作的?他们又什么区别
  • 有尝试过对客户端的接口进行整合及封装吗
  • 如何进行移动端的页面调试呢?除了alert
  • 有没有遇见什么比较难忘的坑
  • 有适配iPhoneX的经验吗

2.5. 微信开发

公司的另外一部分业务放在微信生态中,要求对小程序和公众号开发有一定的了解

  • 了解微信网页授权的流程吗
  • 有微信JSSDK的使用经验吗,有没有踩过什么坑?appid大小写算一个哈哈
  • 了解微信自定义开发吗
  • 向用户批量推送模板消息的功能是如何实现的
  • 你们是如何进行小程序开发的,使用过wepy吗
  • 你们项目中识别用户渠道来源是怎么实现的

2.6. 性能优化

性能优化一般会围绕着减少http请求,页面加载速度,页面运行效率这三个方面来提问

  • 谈谈web项目中常用的优化手段
  • 如何加快首屏渲染
  • 有哪些减少http请求的手段
  • 图片懒加载和预加载的原理是什么,他们的应用场景呢
  • 图片base64内联有什么优点和缺点
  • 有没有了解过DNS预解析
  • 谈谈对于缓存的理解,max-ageexpries有什么区别,条件请求是什么
  • 你们在项目中使用过缓存吗,怎么设置的

2.7. Web安全

前端web安全一般会围绕着xss和csrf这些常见的场景回答

  • 你对web安全有怎样的了解
  • xss是怎样产生的,该如何防护
  • csrf是怎样产生的,该如何防护
  • 如何保证Cookie的安全,httpOnly和secure有什么区别

3. 网络

网络相关的知识可以考察学习的广度,基本上HTTP知识是必问的点

  • 会抓包吗,使用的是什么工具
  • 从输入url到浏览器展示整个网页,发生了什么
  • 三次握手、四次挥手、IP寻址、广播查询MAC地址等概念
  • HTTP报文,常见的状态码、头部、主体等
  • 能描述一下https的原理吗?https有什么优点和缺点
  • 你们是如何调试接口的

4. 后台

现在基本上都要求后台会一些前端知识,前端懂一些后台知识。我们公司的后台是PHP,因此一般都会问问面试者会不会PHP,以及相关的框架经验。

  • 会PHP吗,用过Laravel框架吗,在项目中使用过哪些特性
  • 会NodeJS吗,用过express或者koa框架吗,你觉得他们有什么区别
  • 是否使用原始的PHP或者NodeJS写后台业务,程序的大致流程是什么样的呢
  • 如何将URL映射到对应的控制器方法上的呢?如何根据URL找到对应的控制器方法
  • 服务端渲染和客户端渲染有什么区别
  • 在服务端渲染中,你们是如何通过模板引擎管理模板的
  • 了解过RESTful接口规范吗
  • 用户身份认证是如何处理的

5. 拓展

好吧面试我反正是没遇见过来问计算机基础知识的,毕竟不是校招了

  • 计算机组成,CPU、内存等
  • 操作系统相关的概念,比如进程、存储管理、IO系统、文件系统等
  • 数据结构,用JS实现常见的数据结构
  • 算法,实现经典算法,如快排、二分查找等

6. 小结

突然发现好像写了不少问题,单场面试中肯定问不了这么多东西的。一般在面试中,对于面试者的了解也仅限于简历上的描述,因此一般都会从简历入手,对掌握技能、项目经验等方面进行提问,因此上面很多题目都不应该是单单问一下就结束了,而是可以逐步深入,引导性提问。

最近一直在准备面试,更发现那句话的重要性

面试的信心来自于自身扎实的基础,切勿急功近利,好逸恶劳~自勉之。

每次的面试准备都相当于是对于自己掌握知识体系的一个梳理,知道自己会什么,还欠缺什么,总比盲目的背题目要好得多。

好吧其实上面有一部分题目,由于需要回答的东西比较多,因此我还是整理相关的答案,预备在之后的面试中可以从容回答。

这份面试题跟市面上看见的面试题可能有些出入,有些比较基础的或者比较常见的问题,我没有一一列出来了。

这篇博客等到下次准备面试的时候,可能还会继续更新哈哈~