Web 中高级前端面试题集合（200+）

在现阶段找到一份满意的工作比较困难，在这里分享这些天刷的一些比较典型的面试题，我面试的岗位是中高级前端，所以面试题会以下面几种类型的面试题为主：

1. 比较有难度的面试题；
2. 难度一般，频率高；
3. 比较冷门，能掌握最好；

我面试时问到的一些技术问题大多数都包含在这些题目中，对我个人求职帮助还是很大的。

原文地址

首先这些面试题大部分都是在各处搜集来的，所以先贴出原文地址，原文的讲解和题型都是最全面的，我在这里只是做一个整理提炼而已，有充裕时间的话，强烈建议刷原文。

如果原作者【大佬】看到不允许转载的内容，请私聊我一下，我这边删除相关内容，非常抱歉。

• 挑战一轮大厂后的面试总结 (含六个方向) - 浏览器 篇
• 一年半经验如何准备阿里巴巴 P6 前端面试
• 大揭秘！“恐怖”的阿里一面，我究竟想问什么
• 如何通过饿了么 Node.js 面试
• 面试完50个人后我写下这篇总结
• 【1 月最新】前端 100 问：能搞懂 80% 的请把简历给我
• 中高级前端面试题（万字长文）
• 前端面试常见的知识点（四处搜刮）
• 诚意满满的前端面试总结
• 年底面试-vue总结
• NodeJS有难度的面试题，你能答对几个？
• (建议收藏)TCP协议灵魂之问，巩固你的网路底层基础
• 二月前端实战面试

导读

推荐阅读顺序（也是本文排版顺序）：

• HTML 篇
• CSS 篇
• Javascript 篇
• 函数执行结果（考察知识点掌握）
• 源码相关
• 网络相关
• 设计模式
• 算法相关
• Nodejs 篇
• 未解答问题（无答案）
• 大厂面试题

HTML 篇

• 页面导入样式时，使用 link 和 @import 有什么区别。
• 常见浏览器内核
• 简述浏览器的渲染原理
• HTML5 的 form 的自动完成功能是什么？
• 如何实现浏览器内多个标签页之间的通信？
• 简述前端性能优化
• 什么是 webp

CSS 篇

• 介绍下 BFC 及其应用
• 怎么让一个 div 水平垂直居中
• 介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
• 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
• 简述 CSS 盒模型
• 简述 Rem 及其转换原理
• 移动端视口配置
• 简述伪类和伪元素
• 行内元素的 margin 和 padding
• CSS 中哪些属性可以继承？
• CSS3 新增伪类有那些？（例如 nth-child）
• 用纯 CSS 创建一个三角形
• min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

Javascript 篇

• Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
• （滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
• [['1', '2', '3'].map(parseInt) what & why ?](https://github.com/a102956322...
• （挖财）什么是防抖和节流？有什么区别？如何实现？
• 介绍下 Set、Map、WeakSet 和 WeakMap 的区别？
• ES5/ES6 的继承除了写法以外还有什么区别？
• setTimeout、Promise、Async/Await 的区别
• （头条、微医）Async/Await 如何通过同步的方式（形式）实现异步
• 简述一下 Generator 函数
• （滴滴、挖财、微医、海康）JS 异步解决方案的发展历程以及优缺点。
• 简述浏览器缓存读取规则
• 为什么 Vuex 的 mutation 和 Redux 的 reducer 中不能做异步操作？
• （京东）下面代码中 a 在什么情况下会打印 1？
• 在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的。
• 实现一个 sleep 函数
• 双向绑定和 vuex 是否冲突
• call 和 apply 的区别是什么，哪个性能更好一些
• 为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
• （百度）实现 (5).add(3).minus(2) 功能
• 操作题（考察数组基础）
• 操作题（考察消息队列）
• 箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？
• redux 为什么要把 reducer 设计成纯函数
• ES6 代码转成 ES5 代码的实现思路是什么？
• Vue 的父组件和子组件生命周期钩子执行顺序是什么
• react-router 里的 Link 标签和 a 标签有什么区别
• vue 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？
• 谈谈对 MVC、MVP、MVVM 模式的理解
• 简单说说 js 中有哪几种内存泄露的情况
• 跨域问题如何解决
• instanceof 的实现原理
• react 组件的生命周期
• 简述 Flux 思想
• 简述执行上下文和执行栈
• 简述浏览器与 Node 的事件循环
• 什么是 CSP？
• 什么是 CSRF 攻击？如何防范 CSRF 攻击？
• 谈一谈你理解的函数式编程？
• 什么是尾调用，使用尾调用有什么好处？
• Vue 组件间如何通信？
• Vue 中 computed 和 watch 的差异？
• 简述一下 PWA
• 介绍下 CacheStorage
• Vue 双向数据绑定原理
• 页面的可用性时间的计算
• 简述一下 WebAssembly
• 谈谈移动端点击
• 谈谈 Git-Rebase
• 简述懒加载
• webpack 中 loader 和 plugin 的区别是什么？

函数执行结果

• 第一题（考察 This 指针）
• 第二题（考察对象应用）
• 第三题（考察事件循环/异步）
• 第四题（考察 React 的使用）
• 第五题（考察作用域）
• 第六题（考察作用域）
• 第七题（考察数组）
• 第八题（考察赋值表达式）
• 第九题（考察赋值表达式）

源码相关

• 如何实现函数的柯里化？
• 手写 bind、call、apply
• 模拟 new 的实现
• 请使用 Proxy + Fetch 实现类似于 axios 的基础 API
• 手写 Promise
• 聊聊 Redux 的源码实现
• 聊聊 redux-thunk 是如何实现异步 action 的？
• 简单聊聊 new Vue 以后发生的事情
• 介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面的
• 简述一下 React 的源码实现

网络相关

• HTTP1.0 和 HTTP1.1 有什么区别？
• （网易）简单讲解一下 http2 的多路复用
• 介绍 HTTPS 握手过程
• HTTPS 握手过程中，客户端如何验证证书的合法性
• 介绍下如何实现 token 加密
• 介绍下 HTTPS 中间人攻击
• 说出几个你知道的 HTTP 状态码及其功能
• 从输入URL到页面加载的全过程
• 简述 HTTP2.0 与 HTTP1.1 相较于之前版本的改进
• SSL 连接断开后如何恢复？
• 什么是 CDN 服务？

设计模式

• 什么是设计模式？设计模式如何解决复杂问题？
• 什么是白箱复用和黑箱复用？
• 介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景
• 简述面向对象的设计原则
• 简述你了解的设计模式及应用场景

算法相关

• 使用迭代的方式实现 flatten 函数
• 介绍下深度优先遍历和广度优先遍历，如何实现？
• （携程）编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
• 给定两个数组，写一个方法来计算它们的交集
• 数组编程题
• 如何把一个字符串的大小写取反（大写变小写小写变大写），例如 ’AbC' 变成 'aBc' 。
• 实现一个字符串匹配算法，从长度为 n 的字符串 S 中，查找是否存在字符串 T，T 的长度是 m，若存在返回所在位置。
• 算法题「旋转数组」
• （京东、快手）周一算法题之「两数之和」
• （bilibili）编程算法题
• （阿里巴巴）如何实现数组的随机排序？

Nodejs 篇

• 介绍一下 Node 里的模块是什么?
• 请介绍一下 require 的模块加载机制
• 请介绍一下 Node 中的内存泄露问题和解决方案
• 在 Node 中两个模块互相引用会发生什么？
• Node 如何实现热更新？
• 为什么 Node.js 不给每一个.js文件以独立的上下文来避免作用域被污染?
• Node 更适合处理 I/O 密集型任务还是 CPU 密集型任务？为什么？
• 聊一聊 Node 的垃圾回收机制
• 简单聊聊 Node 的异步 I/O
• Node 如何创建子进程？
• 进程当前的工作目录是什么？有什么作用？
• console.log 是同步还是异步? 如何实现一个 console.log？
• 父进程或子进程的死亡是否会影响对方? 什么是孤儿进程?
• 简单介绍一下 IPC
• 什么是守护进程？Node 如何实现守护进程？
• 简单介绍一下 Buffer
• 简单介绍一下 Stream
• 什么是粘包问题，如何解决？
• cookie 与 session 的区别? 服务端如何清除 cookie?
• hosts 文件是什么？

未解答问题

• 请分别用深度优先思想和广度优先思想实现一个拷贝函数？
• 实现 React Hooks 中的 useState 和 useEffect
• （阿里巴巴）快速排序
• （阿里巴巴）反转链表

大厂面试题

• （bilibili）编程算法题
• （携程）编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
• （阿里巴巴）介绍下深度优先遍历和广度优先遍历，如何实现？
• （网易）简单讲解一下 http2 的多路复用
• （挖财）什么是防抖和节流？有什么区别？如何实现？
• （头条、微医）Async/Await 如何通过同步的方式实现异步
• （滴滴、挖财、微医、海康）JS 异步解决方案的发展历程以及优缺点。
• （兑吧）情人节福利题，如何实现一个 new
• （京东）下面代码中 a 在什么情况下会打印 1？
• （百度）实现 (5).add(3).minus(2) 功能
• （滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
• （阿里巴巴）简述执行上下文和执行栈
• （阿里巴巴）Vue 组件间如何通信？
• （阿里巴巴）简述前端性能优化
• （阿里巴巴）如何实现数组的随机排序？
• （阿里巴巴）介绍下 CacheStorage
• （阿里巴巴）Vue 双向数据绑定原理
• （阿里巴巴）页面的可用性时间的计算
• （阿里巴巴）简述一下 WebAssembly
• （阿里巴巴）谈谈移动端点击
• （阿里巴巴）谈谈 Git-Rebase
• （阿里巴巴）简述懒加载
• （腾讯）webpack 中 loader 和 plugin 的区别是什么？
• （阿里巴巴）谈谈对 MVC、MVP、MVVM 模式的理解