前端面经和八股汇总

前端面试题系列文章：

• 【1】备战前端实习面试之HTML篇
• 【2】备战前端实习面试之CSS篇
• 【3】备战前端实习面试之JavaScript篇
• 【4】备战前端实习面试之React篇
• 【5】备战前端实习面试之Vue篇
• 【6】备战前端实习面试之Node.js篇
• 【7】备战前端实习面试之浏览器篇
• 【8】备战前端实习面试之性能优化篇
• 【9】备战前端实习面试之计算机网络篇
• 【10】备战前端实习面试之手写代码篇
• 【11】备战前端实习面试之代码输出结果篇

---

陆一柒科技有限公司

2022.03.08 16:00~16:25 –> 答案传送门

1. 自我介绍

2. 详细介绍项目

3. 项目的难点、挑战，怎么解决

4. html 常用的标签

5. css 有哪些选择器

6. js 的数据类型，怎么判断

7. instanceof 和 typeof 区别

8. 为什么选择 react

9. 数组和链表的作用，区别

10. 翻转链表

11. 了解哪些排序，介绍一种常用的

function () {
  let obj  = new Object();
  let num = [].prototype.shift.call(arguments);
  if (typeof num != 'function') {
    return;
  }
  obj.__proro__ = num.prototype;
  let ret = num.apply(obj, arguments);
  return type ret === 'object' ? ret | obj;
}

---

数预智能

2022.04.22 18:30~19:00 –> 答案传送门

1. 语音聊天功能怎么实现

2. websocket 是怎么做的

3. 项目难点

4. 技术使用时卡点

5. 闭包

6. promise 的好处

7. promise 解决了什么问题

8. js 数组方法

9. 用 setTimeout 实现 setInterval

10. react hooks

11. url 输入到渲染

---

货拉拉

2022.04.26 16:00 –> 答案传送门

1. 介绍项目

2. 登录密码有没有实现加密，怎么加密

3. 项目难点以及怎么实现

4. 说下 websocket

5. http 长连接和 websocket 连接有什么区别，为什么用 websocket

6. 怎么用 http 实现：服务端知道客户端的连接状态

7. 洋葱模型

8. express 和 koa 的区别

9. 怎么实现跨域

10. setstate 是同步的还是异步的

11. setstate 的第一个参数是函数会怎么样

12. 连续三个setstate，将count+1，最后count会变成几

13. 介绍事件机制

14. 说下 filber

15. React 有哪些生命周期

16. 说下 shouldWillUpdate

17. 虚拟 dom 是怎么对比的

18. 如果有两个 dom 是一样的，但位置不一样，怎么处理

19. js 有哪些数据类型

20. 引用数据类型和基本数据类型的区别

21. 介绍堆这种数据结构

22. 介绍完全二叉树

23. 二叉树的深搜和广搜，怎么实现

---

字节飞书文档

2022.04.27 16:00~16:50 –> 答案传送门

1. 项目中如何运行 JS 代码

2. 如果代码一直循环，代码怎么出结果

3. 说下 websocket

4. 聊天时支持传输图片吗

5. 聊天数据是存到数据库的吗

6. 算法题：二叉树路径和

给定一颗二叉树，返回所有路径的节点值相加后的结果，如：

   1
  / \
 2   3
/ \  /
4 5 6

返回结果 (1+2+4)+(1+2+5)+(1+3+6)=25

7. 算法题：有效的括号

8. 浏览器存储数据的方式

9. cookie 和 localStorage 的区别

10. cookie 的数据放到 localStorage ，有什么影响

11. 防抖节流

12. React hooks

13. React 生命周期

14. 垂直居中

15. http 状态码

16. 304 代表什么

17. 浏览器的缓存机制

18. 怎么判断命中协商缓存

19. 协商缓存返回什么标识

20. 协商缓存的存储位置

21. memory 和 disk 的区别

22. 什么是跨域

23. cors 怎么实现跨域

24. 浏览器用 cors 去跨域，请求是一次还是两次

---

映客直播

1. 连续几道代码输出题

• 函数柯里化

var MAP =  {
  onclick: function () {

  },
  curry: function (val) {
    return function (z) {
      return val++ + z
    }
  }
}

var getInfo = function (val) {
  return MAP[val]
}
var fn = getInfo('curry')

var a = fn(100)

console.log(a(200)) // 300
console.log(a(300)) // 401
console.log(fn(100)(200)) // 300
console.log(getInfo('curry')(100)(300)) // 400

• 深浅拷贝

var obj = {
  name: 'baidu', 
  arr: ['a', 'b', 'c']
}

var obj2 = obj
var arr = obj.arr

obj2.arr = ['a', 'b', 'c', 'd']
obj2.name = 'inke'

console.log(arr) // ['a', 'b', 'c']
console.log(obj.name) // 'inke'
console.log(obj === obj2) // true
console.log(obj.arr === obj2.arr) // true
console.log(obj.arr === arr)  //false

• 变量提升

var x = 10;
if (true) {
  x = 20;
  console.log(x) // error
  let x;
}

2. 编程题

字符串长度为N，判断有没有重复的字符，有重复的返回true

function judge(str) {
  const map = new Map();
  for (const ch of str) {
    if (map.has(ch)) {
      return true;
    } else {
      map.set(ch, 1);
    }
  }
}

map 和 set 两种方法的时间复杂度

3. React：什么时候用函数组件，什么时候用类组件
4. Node：用到了哪些中间件

---

星球在线

1. 项目技术难点
2. 怎么获取首屏渲染时间
3. 为什么会有这个项目需求
4. 事件循环看输出
5. React hooks
6. 怎么实现组件共享状态
7. 怎么维护css样式/组件化管理
8. unknown vs any
9. 怎么判断新技术是有价值的

---

广州海纳数智技术有限公司

2023.06.15 10:30~11:45 –> 答案传送门

一面

项目：
首屏渲染时间是怎么优化的
跨域，实现跨域的方法
怎么实现监控
怎么捕获异常，使用什么 API
数据上报的方式

降了 Image 和 navigator.sendBeacon
navigator.sendBeacon 有什么缺点
存在浏览器兼容性问题
Image 的方式是怎么实现的

八股：
前端性能优化
事件循环
Promise，代码输出

React：
为什么会有 React hooks
什么是高阶组件

二面

项目：
脚手架是怎么搭建的
前端监控接入时是同步的还是异步的
数据保存到哪里

八股：
事件循环，什么是宏任务和微任务
浏览器性能
css 和 js 的优化
cookie 和 localStorage 的区别
给 localStorage 做一个过期时间的功能，不使用后端
this 指向，.bind() 之后再 .call() this 会改变吗，那 .bind() 之后再 new() 呢
原型链
React 和 Vue 的区别

---

第四范式

2023.06.19 10:00~10:30 –> 答案传送门

1. 模拟实现 flat
2. 代码输出

console.log(1);
async function async1() {
  await async2()
  console.log(2);
}
async1()
function async2() {
  console.log(3);
}
setTimeout(() => {
  console.log(4);
}, 0)
new Promise((resolve) => {
  console.log(5);
  resolve()
})
  .then(() => {
  console.log(6);
  })
  .then(() => {
    console.log(7);
  })
console.log(8);

// 1 3 5 8 2 6 7 4

3. React hooks
4. useCallback、useMemo、useContext
5. 讲讲微前端
6. 有没有接触过 Electron
7. 介绍项目
8. 埋点是怎么做的

---

阿里飞猪

2023.06.29 11:00~11:20 –> 答案传送门

一面（项目）

1. 数据收集的方式，哪些 API
2. window.addEventListener 参数，注册在哪里
3. 怎么封装 SDK
4. 行为数据通过哪些 API 收集到的
5. PV、UV 怎么统计，点击怎么统计
6. 怎么监听点击事件
7. 五个按钮要监控，五个不用监控，还有其他点击事件，要怎么封装
8. 如果节点外层有层层嵌套，怎么知道最深层的节点有指定属性
9. 上报的信息是什么
10. 怎么定位源代码
11. 性能分析用什么 API
12. 微前端的实现原理是什么

---

小红书

2023.07.17 15:00~15:30 –> 答案传送门

一面

1. 项目中遇到的问题
2. 用户行为怎么做的
3. 复杂度在哪里
4. 元素居中的方法
5. hooks
6. Promise 方法
7. Promise.all 使用场景
8. 性能指标
9. 编程题：解析url

二面

2023.07.20 14:00~14:30 –> 答案传送门

1. 怎么捕获 js 错误
2. 其他错误捕获
3. 状态码
4. 强缓存和协商缓存
5. 事件循环
6. 宏任务和微任务
7. localStorage、sessionstorage、indexedDB 的区别
8. 前端性能优化的常见手段

   「2021」高频前端面试题汇总之前端性能优化篇

9. CDN 优化要在网络层做什么配置才能优化请求速度
10. qiankun 解析过程
11. qiankun 的沙箱是怎么实现的
12. webpack 怎么提升加载性能
13. Tree-shaking 注意事项

实践、性能优化方案（网络、构建、语法）、网络、工程化

---

对 websocket 的理解

websocket 是 HTML5 提供的一种浏览器与服务器间进行全双工通讯的网络技术，依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。

它最大的特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。

还有其他的特点：可以与任意服务器进行通信。

• 可以发送文本，也可以发送二进制数据。
• 建立在 TCP 协议之上，服务器端的实现比较容易。
• 没有同源限制，客户端

宏任务和微任务都有哪些？

宏任务	浏览器	Node
I/O	✅	✅
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

微任务	浏览器	Node
process.nextTick	❌	✅
MutationObserver	✅	❌
Promise.then catch finally	✅	✅

require 和 import的区别

• CommonJS 使用 require 导入、exports/module.exports 导出，通常适用范围如 Node.js；
• ES6 使用 import 导入、export 导出，通常适用范围如 React；
• CommonJS 输出的是一个值的拷贝，而 ES6 输出的是值的引用；
• require 是赋值过程并且是运行时才执行，也就是同步加载；
• import 是解构过程并且是编译时执行，理解为异步加载；
• require 可以理解为一个全局方法，因为它是一个方法所以意味着可以在任何地方执行。
• import 会提升到整个模块的头部，具有置顶性，但是建议写在文件的顶部。

require中 exports 和 module.exports 的区别

• module.exports 初始值为一个空对象 {}
• exports 是指向的 module.exports 的引用
• require() 返回的是 module.exports 而不是 exports
  即 module.exports 指向新的对象时，exports 断开了与 module.exports 的引用，那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。

什么是进程和线程

启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行数据和一个执行任务的主线程，这样的一个运行环境就叫进程。

线程是进程中的更小单位，描述了执行一段指令所需的时间。

进程和线程的区别

• 进程可以看做独立应用，线程不行；
• 资源：
• 通信方面：
• 调度：
• 系统开销：

进程间的通信方式

事件循环

dns缓存的更新过程

tcp协议

tcp和udp的差别，各举出一个例子

UDP丢包的优化方案

http报文

HTTP 常见的请求头：

• Accept：浏览器能够处理的内容类型
• Accept-Charset：浏览器能够显示的字符集
• Accept-Encoding：浏览器能够处理的压缩编码
• Accept-Language：浏览器当前设置的语言
• Connection：浏览器与服务器之间连接的类型
• Cookie：当前页面设置的任何 Cookie
• Host：发出请求的页面所在的域
• Referer：发出请求的页面的 url
• User-Agent：浏览器的用户代理字符串

HTTP 常见的响应头：

• Content-Type：表示后面的文档属于什么 MIME 类型，属性值有以下四种：
  • application/x-www-form-urlencoded：
  • multipart/form-data：
  • application/json：服务器消息主题是序列化后的 JSON 字符串
  • text/xml：主要用来提交 XML 格式的数据
• ``：
• ``：
• ``：
• ``：

强缓存字段和协商缓存字段

http正向代理和反向代理

GET 和 POST 说一下

• 参数类型：POST 的参数传递支持更多的数据类型。
• 请求长度：浏览器由于对 url 长度的限制，所以会影响 GET 请求发送数据时的长度。
• 发送的报文格式：GET 请求的报文中实体部分为空，POST 请求的报文中实体部分一般为向服务器发送的数据。
• 是否缓存：浏览器一般会对 GET 请求缓存，但很少对 POST 请求缓存。
• 应用场景：
• 安全性：GET 请求可以将请求的参数放入 url 中向服务器发送，而 POST 请求时将请求的参数放入请求体中的，POST 请求会比 GET 请求相对安全一些。

浏览器是cookie和localstorage有什么区别

position干什么，属性值，left是负数是什么意思

display有什么作用

行内块和块有什么不一样

说一下react的生命周期函数

shouldComponentUpdate的应用场景

pureconponent呢

render属于构造函数吗

构造函数属于生命周期函数吗

map与object的差别

场景题：往map里面存100000数据，怎么依次取出前十条数据

跟上题一样，怎么取出map中以a开头的前十条数据

了解node的什么

说一下href和src的区别

说一下transform的原理

说一下js的执行上下文

函数和对象及其上下文存储在哪里

说一下V8的垃圾回收机制

手写虚拟dom转换成真实dom（写代码）

http状态码，304、499

HTTP的状态码分成5类，分别是：

• 1xx: 信息响应
• 2xx: 响应成功
• 3xx: 重定向
• 4xx: 客户端问题
• 5xx: 服务端问题

499 是指客户端发起请求后，一段时间内没有收到代理服务器的应答，导致连接失败。
有两种可能：

1. 代理服务器认为客户端发起的请求过于危险，所以主动断开
2. 代理服务器连接不到其他服务，导致连接超时

304是命中协商缓存时返回的标识

HTTP 状态码 304 是多好还是少好

产生较多 304 状态码的原因：

• 页面更新周期长或不更新
• 纯静态页面或强制生成静态 HTML

出现过多 304 状态码会造成以下问题：

• 网站快照停止
• 收录减少
• 权重下降

js引擎如何执行js代码的

介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

Set

1. 成员唯一、无序；
2. 只有键值，没有键名；
3. 可以遍历，方法有 add、delete、has。

weakSet

1. 成员都是对象；
2. 成员都是弱引用，可以被垃圾回收机制回收；
3. 不能遍历，方法有 add、delete、has。

Map

1. 本质上是键值对的集合；
2. 可以遍历。

weakMap

1. 只接收对象作为键名（null 除外）；
2. 键名是弱引用，键值可以是任意的；
3. 不能遍历。