乐趣区

寒冬三年经验前端面试总结

jiezi

前言

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

2019 也许是互联网未来 10 年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的 offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷 leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

笔试题

笔试题一般考的都是基础知识，复习基础知识建议看书，高程和你不知道的 JS 都行，会讲的比较细。

CSS

css 基本上每个公司也都会问，但是问的不会很深，都是一些常见的问题。

  • 盒模型
  • 垂直居中方法
  • 三栏布局
  • 选择器权重计算方式
  • 清除浮动的方法
  • flex
  • 什么是 BFC、可以解决哪些问题
  • position 属性
  • 如何实现一个自适应的正方形
  • 如何用 css 实现一个三角形

手写题

手写题每个公司都会有，范围也比较固定，如果之前好好准备的话，应该没什么问题。

  • 防抖和节流
  • 深拷贝
  • 数组去重、数组乱序
  • 手写 call、apply、bind
  • 继承（ES5/ES6）
  • sleep 函数
  • 实现 promise
  • 实现 promise.all
  • 实现 promise.retry
  • 将一个同步 callback 包装成 promise 形式
  • 写一个函数，可以控制最大并发数
  • jsonp 的实现
  • eventEmitter(emit,on,off,once)
  • 实现 instanceof
  • 实现 new
  • 实现数组 flat、filter 等方法
  • lazyMan

ES6

现在基本上都会使用 ES6 开发。ES6 也成为了一个面试必考点。一般面试官都会问用过 ES6 的哪些新特性，再针对你所回答的进行深入的提问。

  • let、const、var 区别
  • 箭头函数与普通函数的区别
  • 变量的结构赋值
  • promise、async await、Generator 的区别
  • ES6 的继承与 ES5 相比有什么不同
  • js 模块化（commonjs/AMD/CMD/ES6）

浏览器相关知识

浏览器相关知识几乎是每个公司都会问到的考点，里面涉及的东西也比较多。其中缓存、http2、跨域必问。

  • 从输入 URL 到呈现页面过程
  • 强缓存、协商缓存、CDN 缓存
  • HTTP2
  • HTTP 状态码
  • 三次握手与四次挥手
  • 跨域（JSONP/CORS）
  • 跨域时如何处理 cookie
  • 垃圾回收机制

web 安全

一般我都会从 xss 和 csrf 说起。

  • https
  • 什么是 xss，如何预防
  • 什么是 csrf，如何预防
  • 为什么会造成 csrf 攻击

事件循环

事件循环绝对是一个必考题。其中涉及到宏任务、微任务、UI 渲染等的执行顺序，浏览器端的必须要掌握，node 端的有精力的最好也能掌握。

框架（vue）

因为我一直用的都是 vue 框架，所以问的也都是跟 vue 相关的。vue 中的高频题也不外乎双向绑定、虚拟 dom、diff 算法这些。

  • watch 与 computed 的区别
  • vue 生命周期及对应的行为
  • vue 父子组件生命周期执行顺序
  • 组件间通讯方法
  • 如何实现一个指令
  • vue.nextTick 实现原理
  • diff 算法
  • 如何做到的双向绑定
  • 虚拟 dom 为什么快
  • 如何设计一个组件

webpack

webpack 也基本上成了必考的内容，一般会问是否配置过 webpack、做过哪些优化之类的。

  • 用过哪些 loader 和 plugin
  • loader 的执行顺序为什么是后写的先执行
  • webpack 配置优化
  • webpack 打包优化（happypack、dll）
  • plugin 与 loader 的区别
  • webpack 执行的过程
  • 如何编写一个 loader、plugin
  • tree-shaking 作用，如何才能生效

性能优化

  • 首屏加载如何优化
  • 一个网页从请求到呈现花了很长时间，如何排查

因为之前的经历大部分都集中在 PC 端，所以移动端的经验比较少。面试官也不会一直问你移动端的东西，问也就问一些常见的问题，比如 1px 问题、如何适配等。react 用的也不多，问的也不多，也就会问问 react 与 vue 的对比之类的问题。

基本的问题过了之后，有的面试官还喜欢问一些开放性的问题。比如平时都是如何学习的、最近了解了什么新技术、未来的职业规划、为了达到这个目标目前做了什么努力等等。

总结的基本上就是这么多了，上面问题的答案我也会陆续给出，给大家一个参考。
喜欢的可以点个收藏哈~
最后预祝看了此篇文章的小伙伴们都能收获多多的 offer，找到自己满意的工作~

退出移动版