侧边栏

假如我是前端面试官

发布于 | 分类于 杂项

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

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

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

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

基础知识 ​

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

HTML ​

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

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

CSS ​

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

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

JavaScript ​

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

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

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

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

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

TypeScript ​

  • 在项目中是如何使用TS的，有什么优劣？
  • TS的类型编程

项目 ​

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

开发环境搭建 ​

现在一般会问到webpack和gulp

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

跨域 ​

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

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

Vue ​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

webview ​

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

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

微信开发 ​

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

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

性能优化 ​

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

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

Web安全 ​

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

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

网络 ​

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

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

后台 ​

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

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

拓展 ​

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

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

小结 ​

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

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

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

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

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

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

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

#面试

你要请我喝一杯奶茶？

版权声明：自由转载-非商用-保持署名和原文链接。

本站文章均为本人原创，参考文章我都会在文中进行声明，也请您转载时附上署名。