【干货】记录2021前端春招实习，含阿里、字节、腾讯、百度等各厂面经

面试经历

腾讯csig云【三面凉】

腾讯会议【已offer】

百度搜索产研【已offer】

字节教育业务【已offer】

阿里本地生活【已offer】

CVTE【放弃hr面】

京东【放弃二面】

面经汇总

（有一些项目相关的细节内容和hr面内容没有记录下来哦）

腾讯csig腾讯云一面

做下自我介绍

可以实习多久

讲一下队列和栈，以及应用场景

说一下闭包，除了回调外，闭包应用场景，闭包可以干嘛，优缺点，闭包在async-await中的表现

Promise解决了什么问题，有什么问题；async-await解决了什么问题

Nodejs如何实现高并发的

Nodejs的eventloop

了解ES6哪些东西

了解哪些跨域方法，jsonp的script何时执行，cors设置什么头

了解哪些设计模式

知道react的hook吗

React兄弟间传参的方式

场景题：有一个下拉框，点击某一个选项，框中进行展示：在react中，props和state分别怎么设计

http和https的区别

Vue的MVVM设计，底层原理（讲了双向数据绑定的实现），compile的实现

Class中static的属性和普通属性的区别，从继承的角度来说呢？

nginx的配置（反向代理，负载均衡）

项目中觉得做得好的地方是什么

手写代码：

1.有一个扁平的数组描述了一系列的地理信息，类似于： var locationList = [ { id: 0, name: “中国” }, { id: 1, pid: 0, name: “广东省” }, { id: 2, pid: 1, name: “深圳市” }, { id: 3, pid: 1, name: “广州市” }, … ]其中每个节点的 pid 指向了它所属上级地区。现在要求你把这个数组转换成树状结构： var locationTree = buildLocationTree(locationList); console.log(locationTree); 其中 locationTree 的结构应该如下： interface LocationTree { root: LocationNode; }interface LocationNode { id: number; pid?: number; // 问号表示可选属性 name: string; subLocations?: LocationNode[]; }请实现 buildLocationTree()，输出的父节点里面包含子节点的数组

2.有10000条消息，每个消息timestamp字段，请排序(不可以使用sort函数) [{“eventId”:2498858,“timestamp”:1463569008327,“user”:"auto},…]

腾讯csig腾讯云二面

你是多久开始学习前端的

讲一下从用户输入url到页面渲染出来的过程

讲一下Tcp三次握手，为什么不能两次握手

了解HTTP2.0吗，和之前的版本有什么区别

你知道哪些常见的header中的字段

前端容易遭受到哪些网络攻击

场景题：有一个下拉框，点击某一个选项，框中进行展示，使用vue怎么设计

首页加载的太慢了，怎么办

你觉得你流程最久，花费精力最多的项目是哪个，讲一讲

这个项目中你觉得最困难的是什么，怎么解决的

腾讯csig腾讯云三面

多久开始实习，可以实习多久

讲一下你的项目

讲一下项目难点

页面加载慢，怎么做，讲一下

反问：业务场景、工作内容、转正机会、后续流程

腾讯会议一面

自我介绍

有考研打算吗

为什么选择前端

你觉得做前端工程师需要什么能力

你对前端未来的发展趋势的看法

websocket，用法，如何保证仍然连接，如何确保消息发送到了，从计网的角度来讲一讲如何保证websocket传输可靠

Tcp如何保证可靠传输

tcp与udp的区别

Udp如何实现可靠传输

你用过哪些查找的算法

平时常用的数据结构

如何来衡量算法的复杂度

JavaScript的运行机制

Js执行会阻塞dom渲染吗，如何避免呢（webworker）

requestAnimationFrame是宏任务还是微任务

对内存泄漏的理解，如何避免

前端方面的安全问题？

前端如何做转义？（答需要专业三方转义库，问了解html实体字符吗）

手撕代码：

1.把原始 list 转换成树形结构，要求尽可能降低时间复杂度

// 原始 list 如下

let list =[

{id:1,name:‘部门A’,parentId:0},

{id:2,name:‘部门B’,parentId:0},

{id:3,name:‘部门C’,parentId:1},

{id:4,name:‘部门D’,parentId:1},

{id:5,name:‘部门E’,parentId:2},

{id:6,name:‘部门F’,parentId:3},

{id:7,name:‘部门G’,parentId:2},

{id:8,name:‘部门H’,parentId:4}

];

const result = convert(list, …);

// 转换后的结果如下

let result = [

{

id: 1,

name: ‘部门A’,

parentId: 0,

children: [

{

id: 3,

name: ‘部门C’,

parentId: 1,

children: [

{

id: 6,

name: ‘部门F’,

parentId: 3

}, {

id: 16,

name: ‘部门L’,

parentId: 3

}]

},

{

id: 4,

name: ‘部门D’,

parentId: 1,

children: [

{

id: 8,

name: ‘部门H’,

parentId: 4

}]

}]

},

···

];

2.实现深拷贝函数（补充深拷贝map,set，补充避免循环引用）

腾讯会议二面

自我介绍

介绍一个你的项目

对于权限控制，虽然后端接口保证了安全，但如果权限信息被修改，前端会展示出原本不应该被看到的页面，该怎么办（面试官提示想一下苹果如何鉴别软件的来源的安全性，最后结合https加密回答）

结合计网的知识讲一下，浏览器下载一个文件时快时慢的原因

场景题：现在有一百万个单词，不考虑空间复杂度，如何在较短时间查询某个单词是否在这一百万个中（答了树、hash表）

Hash如何做到O(1)查找复杂度的

Hash映射的是字符串还是数字，为什么

数组如何保证O(1)查找复杂度的

数组在实际物理地址的存储是连续的吗，为什么

虚拟存储和页表的了解

ES6转ES5是使用什么，大概的原理是怎么样的

Java或者c这样的语言，当定义的数组大小不够了，如何扩容（答新定义更大的数组，并依次把之前的重新装进去）

每次进行数组扩容很浪费时间，如何设计一个新数组：使得每次扩容时都能继续使用之前的数组内存空间（反过来理解页表）

CVTE一面

自我介绍

项目是在什么时候因为什么做的

用过闭包吗，闭包是什么，闭包的优缺点，实际场景中如何避免内存泄漏

定时器，settimeout，setinterval，区别是什么，宏任务和微任务是什么，eventloop机制

用过es6哪些东西

场景题：一个div，里面的文本只显示一行，且超出部分呈现省略号，用什么属性设置

你用过哪些布局，flex布局的应用场景，使用前提（兼容），具体怎么用举个例子，flex:1属性详细解释

场景题：设计一个布局，上和下两部分定高，中间部分随内容来确定高度，但中间的高度在大于（页面高度-上高度-下高度）时变为scroll，如何实现

浏览器存储你知道哪些，cookie和localstorage的区别，关于存储的位置和消失的时间，各自什么时候使用

浏览器可以访问所有cookie吗，js可以访问所有cookie吗，如何不让js访问cookie

http缓存讲一下

淘宝的缓存你知道是怎么做的吗

如果现在对资源启用强缓存，那如何判断资源是否更新呢（说webpack hash），hash是如何生成的呢

了解CSRF攻击吗，原理是什么，如何预防

Token的机制是怎样的

CVTE二面

聊项目：为什么做，功能是什么，你做了什么，难点是什么，怎么解决的，结果怎么样

看过哪些源码

react中hook讲一下

跨平台的框架用过哪些，这些框架的好处是什么，问题是什么，各自的区别是什么

Node方面了解哪些，nest.js解决了nodejs的什么问题

写一下节流，节流如何传入参数（传入当前时间，怎么做？）

Js写算法：顺时针打印数组

思维题：烧绳子（给你无限多的绳子，每根绳子烧完都刚好是一个小时，但绳子是不均匀的（即不能通过看绳子烧了多少来判断花费的时间），请思考一个方案来计时15分钟）

百度一面

Echarts的折线图自己写该怎么做（canvas）（requireAnimationFrame）

用canvas绘制二维码图片（把黑色改成红色）

小程序如何获取用户的信息

语义化标签了解多少，好处是什么

场景题：点击按钮显示图片，怎么做

display:none; visibility:hidden; opacity:0;的区别

排序：对对象进行排序，以对象中age的值来排（快排、重写sort）；如果现在不知道对象的属性叫什么了，但确定对象只有一个属性，该怎么排序（Object.keys）

给一个数组，返回一个没有3的数组（filter）

字符串去重怎么做

正则表达式：将横杠连接改为驼峰命名

vue-router的history模式和hash模式；history模式history.pushState() , history.replaceState()；history模式下，如果点击浏览器的回退按钮，是如何保证浏览器不刷新的

vue里面的修饰符

Vue里面数组为什么直接修改不能触发数据更新，vue重写了哪些数组方法

字符串’0’和’000’和true比较的结果

Git如果commit了内容想要回退该怎么做

百度二面

学过哪些课程

介绍项目，难点是什么，有安全性问题吗

F12中的东西知道多少

了解的请求头，307是什么

http1.x和http2的区别

如果请求的css资源中又请求了一张图片资源，那图片资源中的referer是css的域还是当前域

Url的protocol区域你知道有哪些

http和https的区别，https传输过程是对称加密还是非对称加密

Tcp三次握手

面试官给了一个具体的网站场景，在具体场景下：

1.分析请求头和响应头

2.为什么根元素设置了font-size

3.meta标签分析，你了解的编码方法，视口声明，视口声明可以设置哪些值

4.script是否阻塞了dom渲染，defer和async的作用，普通、defer、async三种script的执行顺序

如何获取当前屏幕的宽度

响应式布局的实现方式

算法：链表去重

百度三面

了解个人的各种情况

了解过往的各类经历

阿里一面

面试官自我介绍，部门业务介绍

聊项目，面试官建议后面有机会将项目实际运行

怎么学习的，看过哪些书

Js继承的方法

隐藏元素的三种方式的区别

问src和href的区别，script标签中async和defer的区别

数组遍历的方法，最短的代码进行数组遍历

给学习的建议，推荐书籍

阿里二面

有自己写过组件吗

变量和函数声明提升，let是怎样的

var，let，const的区别

const什么情况下修改不报错，为什么

讲eventloop

数组去重ES中你可以用哪些方法（时间复杂度）

讲请求的各种方法，区别，options请求的作用，为什么请求时做两次请求

讲了解的状态码

https是如何保证安全性的

树的遍历方法，实现

口述算法：

给定一个字符串，按规则输出其所有符合规则的子序列（规则：序列包含""，且每个序列中前面的字符的index小于后面）

eg：

input：“abc”

output："",“a”,“b”,“c”,“ab”,“ac”,“bc”,“abc”

阿里三面

讲ES6中的this

对于浏览器的兼容你了解哪些，具体做过哪些兼容方面的工作

为什么要跨域，跨域的各种方法

讲下typescript和javascript的区别，ts有哪些特性

当时没记录，其他的忘了😥

阿里四面

聊为什么选择前端

介绍项目，讲项目中的具体问题

字节一面

讲一下项目

项目中扩展：封装了axios，axios怎么封装的，登录态怎么维护的，如果axios的功能使用原生ajax来做，那应该怎么去实现

介绍盒子模型

Tcp和udp的区别，udp的作用场景

Js是弱类型语言，但很多时候需要进行类型的确认，一般可以怎么做（instanceof、typeof、Object.prototype.toString.call()……）

手写下promise.all

当时没记录，其他的忘了😥

字节二面

介绍自己的前端学习经历

position的各个值讲一下

一些css属性，问div可能有多宽（考察盒子模型）

如何画出一个边长为父元素50%的正方形

怎么获取一个元素的宽度（style上没有的属性，element.style可以访问到吗？clientWidth和offsetWidth的区别）

讲一下箭头函数，箭头函数的特点

generator用过吗

vue中watch和compute的区别，watch有缓存吗

有实习经历吗

算法：整数m去掉n位后剩下最大值

字节三面

讲一下项目

rbac权限如何实现的

你觉得你在最近的项目中相比之前做项目自己有什么新的提升和收获

你的axios如何封装，了解原生fetch吗

做题：

1.设计一个简单的任务队列, 要求分别在 1,3,4 秒后打印出 “1”, “2”, “3”

const q = new Queue();

q.task(1000, () => {

console.log(1)

})

.task(2000, () => {

console.log(2)

})

.task(1000, () => {

console.log(3)

})

.start() q.stop(); // 可以随时终止任务

2.判断是否存在循环引用

let a = {

b:null,

c:null

};

a.b = a;

// a.c = a.c;

京东一面

this指向

New的过程

eventloop

函数式编程，数组高阶方法

函数柯里化和纯函数

http缓存

你知道的排序算法中，哪些的复杂度低一些，这些算法是用什么方式优化时间复杂度的，了解桶排序吗，了解堆排序吗，堆排序维护堆的时间复杂度是多少，为什么

当时没记录，其他的忘了😥

春招心得

刷题 ：感觉面试时偶尔也会有一些算法题，如果没找到做题感觉的话短时间内做出来很难，所以还是可以在刷题方面提前准备，坚持做一下leetcode，就算面试没出到算法，笔试的算法也是逃不掉的 😂

回答问题：面试官提出简单的问题可以答得深入一些，如果问的问题有些不熟练，也可以适当引导面试官，回答一些自己比较了解的，与面试官提的问题有关联的内容。如果完全不知道，也可以先进行一下思考，尝试解答一下，万一碰到点上了就是很好的，如果想了后还是完全不知道，那我们就老实说不知道吧😅（最好不要乱回答