一个前端小白在夏末初秋时节进行人生第一波面试的旅程......

一只lucky cat吃饱饱后的碎碎念......

以下是面试过程中面的问题，经典又大众，希望可以给大家提供一点复习的方向，金三银四，现在开始准备刚刚好。

CSS 篇

css里面flex是必要问的，包括flex的原理，水平垂直居中也比较高频，如果其岗位需要做很漂亮且兼容性高的页面，css这块应该就不止这点内容了。

使用flex的场景

flex: 1 表示什么，flex是如何计算的

flex的order属性

用sass如何处理1像素

子盒子在父盒子水平垂直居中

实现三列布局

css盒模型，css如何设置盒子

margin的折叠如何解决

如何形成BFC，BFC使用场景

CSS模块化怎么做的

css3动画的参数

移动端兼容性怎么做

单行文本省略和多行文本省略

ios上滑动屏幕一gen一gen的卡顿，如何处理

JS 篇

es6相关的是必须必须会问的，尤其是promise，跨域、闭包这些都比较高频。

数组方法reduce第二个参数

普通函数和箭头函数的区别，箭头函数可以new吗，箭头函数能使用argument获取参数吗

如何数组去重

es6常用吗，常用哪些

新增的数组方法

forEach和Map的区别

promise了解多少

数值类型和引用的区别

var，let，const的区别

es6的set和map

map的key跟普通的key有什么区别

promise回调相关和setTimeout的执行顺序相关

set和weakSet的区别

symbol用过吗

扩展运算符的使用场景

typeof [] 返回什么，，typeof NaN 返回什么

如何判断一个变量是不是数组

'1' instanceof String 返回什么

什么场景下用闭包，闭包的概念

浏览器底层是怎么实现闭包的

get和post的区别

实现跨域的方式

cors如何设置跨域

cors原理，cors中请求都是发送一次吗

jsonp原理

类的实例化过程，new操作符的过程

如何实现一个类和继承

jquery的$是什么

DOM事件的事件流

addEventLisner第三个参数

框架篇

框架这块原理必须要深入学习下，可以没有看过源码，原理必须知道。我面的react，所以问的都是react相关的。

常用的hooks

useEffect干什么用

useState某种操作总是获取上一次值，如何处理

useReducer怎么用，它是干嘛的，与redux的区别

setState同步？异步？，setState异步做了什么

为啥要用hooks，React hooks的作用

hooks的使用需要注意什么

hooks可以用在判断条件里面吗，为什么

hooks可以用在哪里，可以用在HOC里面吗

一个组件很深，数据传递的方法

组件通信方式

redux的数据流，原理

redux的如何引起组件更新

class组件的state数据是如何绑定的，内部原理的实现

class组件和函数组件，函数组件和class组件相比的优点

class组件性能优化，函数组件的性能优化

函数组件和class组件生命周期有啥区别

batchUpdate机制

react fiber了解多少

JSX怎么变成React.createElement的
ErrorBoundry能监控到所有组件的error吗

suspense原理

react18新特性

react的生命周期

使用react注意什么

vue中组件通信

v-modal语法糖

$on $emit原理

vue的生命周期

vue和react的区别

单页面应用的SEO如何做，如何进行SEO搜索引擎优化

性能优化 篇

前端性能优化一般包括代码层面、webpack层面、http层面、加载、封包等方面，浏览器缓存和http缓存几乎必问。

前端性能优化

html、js、css、图片，不同的缓存策略

强缓存如何设置

浏览器如何实现缓存的

垃圾回收机制

http强制缓存和协商缓存

强制缓存返回的状态码，强制缓存cache-control的属性值

协商缓存怎么知道缓存过期了

Etag是如何生成的

防抖和节流的概念，使用场景

React性能优化

浏览器缓存了解多少

有的文件不需要缓存，例如html，如何设置

项目中做的性能优化，webpack中如何优化

webpack 篇

webpack需要知道plugin和loader如何加载的内部如何实现的，自己实现过loader和plugin或者使用webpack解决过什么问题绝对是加分的。

loader和plugins的区别

常用的plugins/loader

webpack的plugin内部怎么执行的

webpack为啥存在，它的作用

自己实现过loader和plugin吗，内部是如何实现的

webpack4与webpack5

其他 篇

svg和canvas的区别

commonJS和import的区别

IE的盒模型跟标准的盒模型什么区别

模块化和组件化的区别

模块化的发展历史

js事件循环

除了contenthash还有什么hash模式

babel机制

CDN的流程

栈内存和堆内存

脚手架如何搭建

模块化了解多少，怎么应用

代码 篇

现在高级了，不需要在纸上手写代码了，一般都线上面试，可以在线敲代码，竟然还可以运行（捂脸哭）。

算法直接刷力扣，双指针挺牛，有朋友凭双指针“打遍天下”。

其他手写代码题一般是某些方法的实现或者promise相关。

也有给一段代码问打印顺序或者打印出什么，this指向、promise与setTimeout、闭包绝对高频。

斐波那契数列 递归实现

（）[] {}/(({[]}))/({]) 如何判断是否都是配对出现的

手写promise.all，实现后再把promise.all由并行变成串行

原型链相关

function fun() {};
var f = new fun();

f.__proto__ // === ? 1 fun.prototype
f.__proto__.__proto__ // === ? 2 Obejct.prototype 
f.__proto__.__proto__.__proto__ // === ? 3 null
f.__proto__.__proto__.__proto__.__proto__ // === ? 4 会报错，因为上一个已经是null了
fun.__proto__ // === ? 5 Funtion.prototype
fun.__proto__.__proto__ // === ? 6 Obejct.prototype 
f.prototype // ? 7 undefined 实例没有prototype
fun.prototype // ? 8  { constructor: f }

useEffect

const [n, setN] = useState(1)

useEffect(() => {
  console.log('a', n)
  return () => {
    console.log('b', n)
  }
}, [n]);

结果：初始化后 打印 'a'，1再次setN(2)后 先打印 'b', 1 再打印 'a'，2

变量提升

var a = 123;
function aa() {
	console.log(a);
  if (false) {
  	var a = 'hello word';
  }
}
aa();

结果：打印出来的是undefined，因为虽然if false里面不执行，但是js预解析的时候已经把a变量提升了

this指向

var a =  1;

function Fn1() {
  var a = 2;
  alert(this.a + a);
}

function Fn2() {
  var a = 10;
  Fn1();
}

Fn2();

var Fn3 = function() {
  this.a = 3;
}

Fn3.prototype = {
  a: 4
}

var fn3 = new Fn3();
Fn1.call(fn3);

先alert出3，再alert出5
执行Fn2()时，this指向window，this.a是1
执行Fn1.call(fn3)时，this指向fn3，this.a是3，为啥不是4呢，因为先在实例中查找，找不到再去原型查找

闭包

function a() {
  let b = 5;

  return function() {
    console.log(b++)
  }
}

a()();
a()();
a()();

var c = a();
c()
c()
c()

结果 5 5 5 5 6 7
因为后者才形成闭包

promise

function aa() {
  return new Promise((resolve, reject) => {
    resolve(1);
    console.log(2);
    reject(3)
  })
}

aa().then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
}).then(res => {
  console.log('456')
})

结果：2 1 456  
因为promise状态一旦发生改变就不会再变，所以reject(3)不会执行
因为promise里面的代码是同步的，回调才是异步的
如果去除resolve(1)
则结果：2 3 456
因为不管是then还是catch只要里面没有new Error返回的都是resolved状态

数组拍平

// 使用reduce如何写

const arr = [1, 15, 'string', true, [3, 5, [17, 6, 88, [4, 28]]], {name: '小明是个捣蛋鬼'}]

function flat(arr) {
  if (!Array.isArray(arr)) return arr;

  return arr.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flat(item) : item);
  }, [])

}

flat(arr)

// 新的api如何拍平
// Array.flat()
// arr.flat(Infinity)

this相关

function A() {}
function B(a) { this.a = a }
function C(a) { if (a) { this.a = a }}

A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a)
console.log(new B().a)
console.log(new C(2).a)

// 结果是 1 undefined 2

手写Object.assign

手写promise.all

手写防抖

dom事件

有三个div a -> b -> c，点击c，console如何打印

结果：捕获a 捕获b 冒泡c 捕获c 冒泡b 冒泡a

点击c，abc的事件同时触发，先进行捕获阶段再进行冒泡阶段，c是目标元素，打印的顺序是注册的顺序

项目 篇

项目这块一定要准备好，梳理项目难点、亮点，遇到的难题如何解决的，即考察了你的项目难度复杂度也考察了你的解决问题的能力。

面试官一般从这些问题引入然后再跟你具体细聊。

你在项目中哪些是你主动推进的，达到什么收益或者提升

说项目亮点/难点

你们系统如何实现的错误监控

封装过最复杂的组件

你们的脚手架都包含什么

如果某个模块下要修改antd里面的table样式，怎么做

你做的组件，具体怎么实现的

让你做一个监控平台，如何做

前后端请求如何做一个安全上的机制

使用过什么hook什么库吗

自己编写过hooks吗什么功能

你们的脚手架是怎么做的

webpack自己配置过吗

开放题 篇

你平常有哪些学习方式

你最近在学新的东西

平常学习的方式

平常遇到的问题会记录吗

未来规划

如何学习

对前端团队的要求

HR 篇

HR一般了解一下候选人的表达能力，是否真诚等等，当然最重要的是薪资了。

你做的什么项目，讲述一下

你的项目出现过什么线上bug

未来规划

你的优点/缺点

对公司或者前端团队有什么要求或者憧憬