20春招前端面经字节的面试体验还是一如既往的好，如果少问一下计网的知识那就更完美了，可能是运气比较好，面试官比较忙，直接

春招的征程已经结束了，落魄前端在线发面经，不得不说今年的形式有点严峻，很多公司都没有前端岗，或者有的都是hc很少的，依稀记得一个上海国企只招两个前端，真的是难受，越来越难了，不过博主今年运气还是不错的，目前已拿字节商业变现offer，在线求组织。

博主主要使用的是React技术栈，对Vue也可以熟练使用，也给目前还没有offer的同学建议一下，这次春招准备的比较充分，面试一定要准备的很充分，多刷面经，JS基础一定要扎实，闭包、原型链顺手拈来，计算机网络的知识、操作系统的知识经常问的那些一定要搞明白至少达到可以很顺畅的答上来，这些几乎都是必问的。算法题就不说了，leetcode多刷一刷，TOP100的怎么着都得刷到中等难度，数据结构的建议剑指，不过我倒是没怎么刷过。

字节-北京-商业变现

字节的面试体验还是一如既往的好，如果少问一下计网的知识那就更完美了，可能是运气比较好，面试官比较忙，直接约了十天后面试，这十天我是翻遍了面经，倒是学到了不少东西，至少问我HTTPS握手过程和TCP三次握手四次挥手我是一点都不慌的。不过我倒是感觉问的JS基础有点少了，框架也是没怎么问，也是三面看我可怜给我加了几道题，最后尽然通过了面试也是心惊胆战。

一面（50min）

算法中时间复杂度和空间复杂度，分别对应计算机什么硬件资源的使用？
计算机如何存储小数？0.1+0.2 ?= 0.3
HTTP vs HTTPS 的区别？HTTPS 加密连接建立的过程？
Flexbox 弹性盒模型是什么？
CSS 画个扇形？画个三角形？
深拷贝是什么？实现 deepCopy 接收任意类型的值。

console.log('script start');

async function async1() {
    console.log('async1');
    await async2();
    console.log('end');
}

async function async2() {
    console.log('async2');
}

setTimeout(function() {
    console.log('setTimeout');
}, 0);

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});

console.log('script end');

实现一个简易的Promise

function TreeNode(val) {
    this.val = val;
    this.left = null;
    this.right = null;
}

    1
   / \
  4   6
     / \
    2   5

function lvl(root) {
     // 请你实现
}

[
    [1],
    [4, 6],
    [2, 5],
]

二面（45min）

一面的问题怎么样
进程线程之间的区别，进程之间怎么通信，线程之间怎么通信
聊项目
两个标签页怎么通信
localStorage sessionStorage的区别
实现 requestAnimationFrame 的polyfill
requestAnimationFrame 和 requestIdleCallback的区别
怎么保存登陆态
如何预防XSS，CSRF攻击
一个promise list，一次最多只能执行n个，当全部执行完成之后，调用callback
```
send(list, n, callback)
```
React Context 和 redux mobx的区别
splice会不会改变原数组
css 两边定宽，中间自适应
页面性能如何进行优化

三面（30min）

面向对象的特征
基于对象和面向对象的区别，以及JS是面向对象还是基于对象
JS实现继承，多种方式
HTTP 和 WebSocket的区别
TCP 和 UCP 的区别
TCP的三次握手四次挥手
React实现显示当前时间的公用组件，时间随着当前时间变化，并有哪些优化方式
useEffect的使用及优化
canvas如何实现按比例沾满全屏
JS实现数据结构双向循环列表，并实现添加节点方式
内存溢出和内存泄漏的区别
狄杰斯特拉和弗洛伊德的区别，描述及实现 (因为毕设用到了这两个算法)
贪吃蛇这个项目的数据构造和整个游戏的建模过程（有一个实时对战的贪吃蛇项目）
webpack工程化可以有哪些优化的方法

欢聚时代

欢聚时代的面试体验不是很好，一面直接用的手机看不到我的简历，二面感觉有点看不起人的样子，这家给我的感觉是比较侧重于实战，考我的经验方面的比较多，最后估计是被HR刷了。

笔试题

实现一个remove方法，实现移除数组中等于item的值，不直接修改原数组，返回一个新的数组，例如remove([1, 2, 3, 4, 4 ,5], 4)
简述箭头函数和普通函数的区别
js实现一个eventEmitter类，实现on(), off(), once(), emit()方法

一面（视频面，5min。。。。）

面试官用的手机说看不到我的简历，5分钟。。。人傻了

简单介绍自己的项目
nginx跨域怎么处理，服务端怎么处理跨域
React习惯使用class写法还是函数式

复面（视频面，45min）

React16 的新特性
React Hook 介绍怎么使用
useEffect 怎么实现 componentWillUnMount 生命周期
useEffect 怎么优化
useRef 怎么使用
设计一个场景，分页器，使用React16 函数式编程，你会怎么设计，怎么优化
React Fiber 的理解
Webpack 优化
Webpack 热更新怎么做
Webpack Tree Shaking
怎么配置Antd按需加载
纯Css模拟雨滴落下的场景，要保证不掉帧
怎么去部署一个Nodejs项目，考察Linux相关命令
SSR渲染
谈一谈 WebSocket，和你在 Nodejs项目中是怎么使用的，结合你的项目（我有一个项目用到了Websocket）

CVTE

二面的面试体验那叫一个舒服，听过CVTE的HR很是恐怖，可以只到了二面，还没有经历HR，我倒是觉得我二面搭的挺好的。

初面（电话面，25min）

自我介绍
简单聊一下项目
说一说项目中得优化
说一说项目中遇到的问题以及解决方案
requestAnimationFrame 为什么不会掉帧
HTTP的请求报文结构
HTTP 和 TCP 之间的关系
TCP三次握手、四次挥手
HTTP TCP 属于哪个层
ES6的新特性
箭头函数和匿名函数的区别
闭包的定义以及解决的问题，会存在哪些问题
闭包是不回收引用的那个对象还是不回收外部整个作用域，你是怎么验证这一点的
跨域怎么解决
webpack 一般用来做什么，以及怎么去优化
浏览器安全
常用状态码
返回304状态码的流程，属于哪一种缓存机制
浏览器的缓存机制
项目中怎么设置强制缓存
你觉得框架的性能会赶上原生嘛
三年之内的前端规划，你会怎么去实现你的这个规划

一面（视频面，1h）

面试官是个好人，很和蔼，继去年春招阿里面试后的第一次体验非常好的一次面试
简单介绍一下做过的项目
如果你负责一个项目的话，你会怎么做技术选型
一个场景，经理说页面加载慢，你会怎么去定位问题并解决
CDN原理
你认为一个JS脚本多大才是合适的
浏览器的缓存机制
最近看的技术博客，或者最近了解到的新技术
你认为最近了解到的技术有哪些难点
你认为看了React源码之后你学到了什么
一道算法题，螺旋矩阵
三到五年内的规划

SHEIN

我面的是南京的前端岗，被虐的那叫一个惨，完全没想到会问我这些问题，框架问的都是底层，虽然我读过React15的源码，其他的项目实战。不过这家电商公司算是在南京比较好的互联网了，但是不知道为什么网上的评价不是很好，也没去上班过就不多少了。

一面（会议，40min）

介绍，为什么学前端，一般都怎么学前端
React如何处理更新
React 中 key 的用法，常用使用场景
React 内部 setState 是如何批处理的
Redux 和 Mobx 的区别
React Context 如何去使用
React Hooks
React15如何去优化
useCallback useMemo的区别
React16 函数式编程怎么去优化
React16的特性
面向对象和面向过程的区别，以及他们各自的优缺点
原生JS如何实现继承
在使用Redux中，当修改一个数据，发现组件没有更新，可能的原因有哪些
如何实现深拷贝
如何解决对象环绕的问题，例如a.b.a对象 a 的属性b指向的是a本身，这种情况如何实现深拷贝。
less sass的区别
Css 实现圆形进度条
Css实现瀑布流
React实现一个场景，渲染多张图片，保证图片的底部尽量是对齐的，然后滚动条拉到底，在请求图片再次渲染
React如何实现轮播图

深信服

这家的面经牛客一大推，而且他们的题库都没怎么换过。。。不过这家倒是拿到了offer

一面（电话面 20min）

简单说一说最近的项目
谈一谈对 React Hooks 的认识
Redux 的数据流向
判断一个对象是否是数组
css 三角形
翻转一个单向链表
青蛙跳台阶
箭头函数和普通函数的区别
谈一谈nginx你都怎么用
Http缓存
性能优化扩展开讲
async await
await 发生异常了还能不能继续往下执行
await如何捕获异常
一个需求 Promise 串行
箭头函数可以使用 arguments吗使用对象解构const arrow = (...args) => { console.log(args) }
For of 和 for in 的区别

二面（电话面 40min）

聊项目，项目里的优化，难点以及解决办法
如果你负责一个新项目，你会怎么做

杭州端点

这是我在BOSS上找的一家公司，是我连续发了十几家公司中唯一一家给我回信息的，顿时好感度倍增，官网一看感觉还不错被阿里收购了，不过后面和牛友的介绍中得出这家加班还是有点猛的，南京这边的不清楚，杭州那边的是加班恐怖的。面试中了解到这家的技术栈还是比较新的，至少会使用React和RN。在南京这边的工资开的也不错，这家也收到了offer。二面的面试官还是有点恐怖的，上来三个问题给我一个下马威，后面的问题倒是可以轻易驾驭。

一面（电话面，15min）

vue 的slot如何使用
vue的mixin混合
原型链
自定义hooks
css动画怎么实现
js动画怎么实现
file-loader url-loader区别
webpack优化

二面（视频面，1h）

专业及主修课（一大坑）
编译原理（求饶）
AST语法树（求饶）
操作系统-死锁（求饶）
我怀疑我进错了会议
栈、数组、链表的区别
树的深度搜索、广度搜索
react生命周期
shouldComponentUpdate 的作用
setState为什么是异步的
react15源码了解了哪些方面
PureComponent、Component、纯函数组件的区别
父子通信、兄弟通信
redux 和 mobx 的区别
redux的数据是不是可突变的
redux如何实现异步action
redux还用过哪些中间件
react hooks都用过哪些
useState useEffect如何和Class写法相对应
useCallback。useMemo 的区别
react如何获取真实DOM
react vue jq三者之间的区别
react的事件系统如何实现的
Ts的了解程度，一般如何使用
讲一下范型
less，sass文件怎么解析成css
webpack用过哪些loader
file-loader,url-loader的区别
babel如何配置
preset和plugins有什么区别
js基本数据类型
事件委托
讲讲闭包，以及优缺点
css实现两列左侧固定，右侧自适应
flex布局
css盒模型
position取值
绝对定位实现水平垂直居中
为什么使用transform有什么好处
transform的百分比是怎么计算的
页面性能如何优化
cdn原理
雪碧图如何使用
如何减少网络请求次数

收到字节的offer之后就没有开始面其他的公司了，很多公司都不收20的，算是给后辈一个教训吧，找工作第一要准备充分，第二要趁早，越年轻越值钱。

下面列出一些我在准备面试的过程中收集到的一些面试题。大家可以看看，可能有一些重复的，大家将就着看吧

面试准备

es6新特性
变量提升
class 做了什么事
用函数实现一个类和继承
new的过程
实现原生的call、apply、bind
基本数据类型哪些
判断类型
promise用法、构造函数、状态
HTTP各版本的区别
then方法可以传几个参数？
node.js 有任务队列吗？事件循环
用promise写一个delay函数。
给一个二叉树和k，找到一条从根节点到叶子节点的路径等于k。（力扣437）
tcpVS udp，然后追问tcp靠什么机制实现可靠性
CSS 中 position属性及应用场景
position 设置 topleft、translateX、translate3d 设置三种方式有什么区别？
判断一个字面量是否为空的对象
实现一个深拷贝
http请求有多少种
详细介绍一下options请求
跨域如何解决
跨域携带cookie
简述所有状态码
简述闭包
算法最大连续子序列和 dp
智力题狼吃羊
fixed和absolute区别
流动布局实现三栏布局
行内元素和块级元素有那些区别
协商缓存 304
http和https区别
手写正则表达式判断电话号码
web安全 xss防范
如何实现渲染后台传来的html片段：innerHTML
innerHTML outerHTML的区别
el.children 和 el.childNodes 的区别
innerText textContent的区别
nodeValue
js宽松模式和严格模式区别
如何判断一个对象是不是array
手写快排
手写斐波那契递归动态规划
算法找数组里总和大于等于目标值的连续数字合和
promise封装原生ajax
讲一下进程，线程，区别
讲一下进程间的通信
设计模式
Https 握手过程
实现拖拽一个元素
广度优先搜索
0.1+0.2 == 0.3？原因？
POST一般可以发送什么类型的文件
说一说你了解的express中间件
实现promise
对行内元素设置padding，margin有什么效果
元素层叠顺序是如何计算的
百分比padding，margin是根据什么值计算的
有哪些鉴权方式
Cache-Control有哪些字段，它们的作用
Cache-Control: no-cache / no-store 的区别
Connection： Keep-alive
+obj是怎么计算的（obj是一个Object）
HTTPS SSl握手过程
JS浮点数精度问题，原因及解决方案
算法：链表反序输出，不再申请内存空间
Number()的存储空间是多大，如果后台发送了一个超过最大字节的数字怎们办
Proxy
TCP为什么要四次挥手
display:none,visibility:hidden,opactiy:0的区别。
git merge、git rebase的区别
fetch API与传统request的区别
JSONP 详细过程
React Fiber架构、调度原理
setImmediate
HTTPS握手过程
js中有哪些类数组、es5和es6中有哪些方法将其转化为数组
实现一个左右布局，左边固定100PX，右边可伸缩，高度沾满整个屏幕。右侧正中间有个长方形，长方形长宽比4：3
CommonJS与ES6模块化区别
原型、原型链的区别
module.exports exports export的区别
rem em px
React新特性新钩子 HOOKS HOC
node 事件循环
从输入域名到页面展现之间发生了什么
React的key有什么作用。介绍一下diff算法。
写一段匹配URL的正则，包括协议、域名、端口、path、hash、querystring
二分查找
实现大数相加
React Diff
html语义化
浏览器重绘重排，不改变div位置/样式的情况下如何触发重排
reflow避免的方案
http版本有哪些，及各自的区别
babel
webpack用来干什么及其工作流程
客户端/服务器端渲染的原理
Css单行多行省略号
get/post 区别

实现如下get 函数

const o = {
  a:{
    b:{
      c:1
    }
  }
}

const get = (target, key) => {

};

get(o,'a.b.c')  //1

console.log('begin');
setTimeout(() => {
    console.log('setTimeout 1');
    Promise.resolve()
        .then(() => {
            console.log('promise 1');
            setTimeout(() => {
                console.log('setTimeout2');
            });
        })
        .then(() => {
            console.log('promise 2');
        });
    new Promise(resolve => {
        console.log('a');
        resolve();
    }).then(() => {
        console.log('b');
    });
}, 0);
console.log('end');

浏览器的渲染机制，为什么使用虚拟DOM

if ([] == false) {console.log(1);}; // 打印
if ({} == false ) {console.log(2);};
if ([]) {console.log(3);}; // 打印
if ([1] == [1]) {console.log(4);};

从给定的无序、不重复的数组data中，取出n个数，使其相加和为sum，不需要找到所有的解，只要找到一个解

var a = function () { this.b = 3; }
var c = new a();
a.prototype.b = 9;
var b = 7;
a();
console.log(b); // 3
console.log(c.b); // 3

repeat 实现，使用JS实现一个repeat方法，调用这个 repeatedFunc("hellworld")，会alert4次 helloworld, 每次间隔3秒
```
function repeat(func, times, wait) {
}
const repeatFunc = repeat(alert, 4, 3000)
```
千分号正则
快排选择排序
用先序遍历将二叉树转化为链表
Web worker
事件委托、事件冒泡、事件捕获。
addEventlistener和正常的onclick=()=> 的区别
thunk原理

实现duplicate()函数

var a = "123";
a.duplicate() // '123123"

String.prototype.duplicate = function() {
    return this+this;   
}

this

window.name = 'ByteDance';
class A {
    constructor() {
      this.name = 123;
    }
    getA() {
        console.log(this);
        return this.name + 1;
    }
}
let a = new A();
let funcA = a.getA;
funcA();

var length = 10;
function fn() {   
    alert(this.length)
}
var obj = {
    length: 5,       
    method: function (fn) {
        fn()                    //10
        arguments[0]()  //1
    },
}
obj.method(fn);

用正则表达式实现sprintf函数

const template = "My name is ${name},I'm from ${city}";
const result = sprintf(template, {
    name: 'Yiming Zhang',
    city: 'FuJian',
});
//result="My name is Yiming Zhang,I'm from FuJian"

手写函数节流
css中display有哪几种
token的作用是什么
inline-block的缺陷
用font-size为0解决间隙问题有什么弊端
实现一个宽高等比的div
判定给定的5-7张牌中是否有同花顺
如果我想让const声明对象的属性也不可修改，怎么实现？

实现一个Queue类，要求包含两个函数

task函数：新增一个任务。包含两个参数，等待时间和回调函数
start函数：执行任务队列。将所有任务按队列顺序执行，执行完一个任务才能执行下一个任务
ps：下面代码，实现添加3个任务，然后执行3个任务。隔1秒，打印1；再隔2秒，打印2；再隔1秒，打印3

function Queue() {
    this._callbacks = [];
    this._timeSum = 0;
}

写一个函数，实现效果

// TODO: 输入 'ab-cd-ef', 输出 'abCdEf'
function camelcase(str) {
    // 正则，匹配 -\w 替换值传递一个函数处理一下得到的结果
    return str.replace(/\-\w/g, match => {
        return match[1].toUpperCase();
    })
}

给定一个数组arr，和一个目标数target，找出arr中和为target的两个数的下标，一对即可

function find(arr, target) {}
find([2, 3, 4, 1, 5], 9) // [2, 4]
find([2, 3, 4, 1, 5], 19) // null
// 似乎是leetcode原题：https://leetcode-cn.com/problems/two-sum/comments/

有一个圆桌，两人轮流放一个棋子。棋子可以放在圆桌的任何位置，但不可以重叠其他棋子，并且棋子要可以放得下。棋子是圆的，棋子大小不变。如果最后轮到某人放棋子，但这个人无法继续在桌上放棋子的时候，这个人就输了。针对某个特定大小的圆桌，假设我先手，那么如何做一个策略，尽量让自己赢。
css, 上下两栏固定, 中间自适应, 直接写css
webpack打包文件名为什么要有hash值
a 标签跳转方式，新开|当前
viewport各个属性值的意义，以及如何实现不用viewport控制用户不能缩放，回答用js监听屏幕宽度。
五星好评点几颗星亮几颗，用css
拥塞控制阶段
async的原理
React Fiber
Set Map
双飞翼布局
圣杯布局
Nginx中的ETAG是如何计算的
Web Worker
301 302区别
requestIdleCallback
盒模型
BFC
居中
伪元素实现垂直居中
选择器
.parent .child 和 .parent > .child 区别
CSS选择器优先级
浮动导致父级高度塌陷
link 和 @import 的区别
css 动画
函数柯里化
bind 实现原理
实现深拷贝
Promise 实现原理
Promise.all
Promise.race
ES6 proxy
ES6 generate
跨域
原生XMLHttpRequest
微任务宏任务 EventLoop
flex 布局
Grid 布局
冒泡/捕获机制
BOM对象
正则表达式
Http常用状态码
计算机网络的七层模型
XSS/CSRF攻击
获取DOM节点
absolute基于哪个点定位
单向绑定和双向绑定的区别
React 和 Vue的区别
React优化
Vue双向绑定实现机制
React Vue 声明周期
webpack优化
页面性能优化
行内元素块级元素的区别
浏览器输入网址到页面呈现的过程
call apply 的区别
重绘(repaint)/回流(重排 reflow)
http和https区别
从数组中找出三数之和为n
纯Css实现三角形
js文件为什么放在body尾(html的文本结构)
map 有什么用跟forEach有什么区别
怎么确定自己优化了防抖
了解 requestAnimationFrame
实现垂直居中
懒加载
jsonp 通讯原理
xmlHttpRequest，原理、跨域、带cookie
cookie 概念、原理、存取操作、如何在http中体现
localstorage概念，原理
call apply 的作用和区别
数组有哪些常用的方法，怎么删除最后一个和第一个，map方法做什么用的
encodeURI和encodeURIComponent的区别
js如果实现动画、requestAnimationFrame有什么作用
css box-sizing 做啥用的
css动画怎么做，transition和animation有什么区别，怎么定义一个动画
css position有哪些值可以选，分别是什么意思
cdn是什么，原理是什么
广度遍历到某个dom的时间复杂度
bfc做了什么
怎么获取屏幕宽度
原型链的继承，说出各个继承方式的优缺点
快速排序的实现方式
const数组里面的元素能不能改变。
css布局的应用场景，三栏布局
什么时候会margin重叠
实现数组扁平化的polyfill
数组去重
查找最大公共因子字符串
全排列
手撕Promise
css盒模型 - 通过box-sizing属性来设置
a标签伪类
判断数据类型
call、apply、bind
aync、await 看一下源码
vue生命周期
['abc','abcd','abcde']最大前缀是abc，找出来
背包问题
BFC
重排、重绘
less sass 优缺点
三栏布局
对象遍历
==与===
HTTP缓存
箭头函数与普通函数的区别
Css 实现一个三角形
Promise串行之行
块级和行级的区别是什么
定位有哪几种？（static、relative、absolute、fixed）
清浮动的方式（BFC、伪元素、兄弟结点）
怎么判断参数是数组还是对象？（Array.isArray、toString、instanceOf）
cookie字段？
Cookie session
遍历二叉树用非递归的方式
for in for of
new一个函数的具体过程
nginx 正向代理反向代理的区别
xss攻击
链表和数组的区别

20春招前端面经