面经汇总

• 做下自我介绍
• 可以实习多久

• 讲一下队列和栈，以及应用场景
• 说一下闭包，除了回调外，闭包应用场景，闭包可以干嘛，优缺点，闭包在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这样的语言，当定义的数组大小不够了，如何扩容（答新定义更大的数组，并依次把之前的重新装进去）
• 每次进行数组扩容很浪费时间，如何设计一个新数组：使得每次扩容时都能继续使用之前的数组内存空间（反过来理解页表）

• 自我介绍
• 项目是在什么时候因为什么做的
• 用过闭包吗，闭包是什么，闭包的优缺点，实际场景中如何避免内存泄漏
• 定时器，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三次握手
• 面试官给了一个具体的网站场景，在具体场景下：

• 如何获取当前屏幕的宽度
• 响应式布局的实现方式
• 算法：链表去重

• 了解个人的各种情况
• 了解过往的各类经历

• 面试官自我介绍，部门业务介绍
• 聊项目，面试官建议后面有机会将项目实际运行
• 怎么学习的，看过哪些书
• Js继承的方法
• 隐藏元素的三种方式的区别
• 问src和href的区别，script标签中async和defer的区别
• 数组遍历的方法，最短的代码进行数组遍历
• 给学习的建议，推荐书籍

• 有自己写过组件吗
• 变量和函数声明提升，let是怎样的
• var，let，const的区别
• const什么情况下修改不报错，为什么
• 讲eventloop
• 数组去重ES中你可以用哪些方法（时间复杂度）
• 讲请求的各种方法，区别，options请求的作用，为什么请求时做两次请求
• 讲了解的状态码
• https是如何保证安全性的
• 树的遍历方法，实现
• 口述算法：

• 讲ES6中的this
• 对于浏览器的兼容你了解哪些，具体做过哪些兼容方面的工作
• 为什么要跨域，跨域的各种方法
• 讲下typescript和javascript的区别，ts有哪些特性
• 当时没记录，其他的忘了😥

阿里四面

• 聊为什么选择前端
• 介绍项目，讲项目中的具体问题

字节一面

字节二面

const q = new Queue();

q.task(1000, () => {
console.log(1)
})
.task(2000, () => {
console.log(2)
})
.task(1000, () => {
console.log(3)
})
.start() q.stop(); // 可以随时终止任务

let a = {
b:null,
c:null
};

a.b = a;
// a.c = a.c;