最近从网上收集了一些大厂的面试题，下面分享给大伙，希望能给哪些在找工作以及准备找工作的朋友一些帮助。

面试准备:

虽然说作为软件开发工程师，需要靠持之以恒的锻炼、积累和沉淀提升个人技术水平；但在平常业务开发中很少有机会面面俱到地覆盖到技术的每一方面，所以面试前期做好充足准备是必不可少的。

• 算法：完整地精读《剑指Offer》，对里面的60+道题尝试复现，笔记记录技巧并尝试举一反三；9-10月集中刷 leetcode 140+道，按照力扣网站上的“探索”模块刷题效率更高；
• 专业技术：从 CSS、 JS 语法、HTTP 基础、三大框架、浏览器原理和前端安全等几个大方向去列复习提纲or脑图，系统地、有时间规划地复习记忆性的知识点，同时尝试将知识点与工作中的实际业务联系起来，在这个过程里你会发现除了巩固自己的知识点，还能建立个人的知识图谱，对自己的整体水平有更加清晰的了解，从而更有针对性地查漏补缺；
• 思考总结：除了基础技术知识的掌握，候选人的综合能力也是面试考察的重点。在“大前端”思维下，我们需要考虑：前端性能优化、Node.js 工具链、异常监控和部署打包等问题；在综合软技能上，我们需要提前总结以下几点：对业务系统的理解、研发流程的推进、开发难题的攻关和团队协作的实践等。

这里推荐一下一些准备过程中收获很大的博客/文章：

• 冴羽的博客，包括 JS 深入系列、JS 专题系列等
• 前端工程师手册
• The Book of Shaders
• 浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角

题目记录

拼多多【电话一面】

1. 如何在 React 项目中使用 Echarts，在哪个生命周期实例化图表（componentDidMount），什么场景下使用了 Echarts 的高级特性
2. 项目 i18n 的方案，在可视化图表中如何引入 i18n
3. React Hooks 解决了什么问题，如何用 Hooks 的方法去模拟 Class Components 的功能
4. Function Component 多次执行，useRef() 会不会每次都执行生成新对象
5. React16 对比 15 有什么更新（Fiber 历史背景和原理）
6. 什么是受控组件和非受控组件
7. React项目的技术栈是怎样的？讲一下 redux-saga 的概念、API 和用法
8. Redux 的三大特点单一数据源、State 是只读的、使用纯函数来修改状态
9. 项目中是否使用了 TypeScript，TS 中的枚举是怎样写的，如果用原生 JS 怎样实现
10. webpack 配置可以怎样优化，有哪些策略，如果项目要使用 TS 在 webpack 中需要配置什么
11. 项目使用了 ES6 吗，是如何使用 ES6 的（Babel 使用 @babel/preset-env）
12. 举例子 window 对象下的一些属性
13. 讲一下对闭包的理解
14. 如何用原生 JS 实现 Promise 的 polyfill，需要注意哪些点
15. HTML 的字符实体是什么，都有哪些（❌一开始没反应过来字符实体是什么）
16. 前端模块化是为了解决什么问题，简单介绍目前有哪些模块化规范，CommonJS 和 ES6 的区别
17. 常见的前端涉及到的安全问题，以及如何防范
18. 是否用 LESS/SASS，LESS 中如何写函数
19. 编程题：有一个长度为 32 的数组，如何将它转换为长度为4*8的二维数组

拼多多【电话二面+coding】

1. 详细讲讲最近一个负责的项目的技术架构，为什么要迁移 UI 组件库
2. Web Worker 是什么，Echarts 和 Web Worker 结合使用场景
3. React 和 Vue 的优缺点对比，MVVM 双向绑定流程
4. React/Vue 的 Hooks 是需要解决什么问题，React Hooks 有哪些 API，介绍一下 useEffect 的调用时机
5. 什么是高阶组件 HOC 和 Render Props，他们的的区别是什么
6. 讲一下博客系统中 Vue SSR 的大致流程
7. 页面换肤方案<link> 标签请求新主题的样式文件、React Context API、CSS 变量，这里最后还提到了 localStorage 的使用，保存用户上次的选择
8. 编程题：数组去重

拼多多【视频三面】

1. React 和 Vue 的分别的优点，你觉得现在这些 MV* 框架以后会往哪个方向/趋势发展
2. 有没有做过项目的性能优化，从业务和工具链两个方面讲
3. 最近遇到的技术难题
4. 有没有参加过开源社区给开源项目贡献代码；介绍一下自己业余时间做的开发工作
5. 在团队内是否有维护公共组件或工具，你觉得维护公共逻辑跟个人开发上有什么区别，如何去协调不同开发者的需求
6. 团队的组成情况，在团队协作上遇见什么困难，是如何解决的；
7. 将来的职业规划是怎样的，带领团队/下属最重要的是什么
8. 最近读了什么书有什么感想，有没有写技术文章

字节跳动【视频一面】

1. WebGL 了解到什么程度，都有哪些基本功能；项目中是如何使用 WebGL 的
2. 讲一下 GLSL Shader 实现亮度(Brightness)、对比度(Contrast) 和边缘检测(Edge Detection) 是如何实现的回答的时候忘记了对比度的算法实现没答上来，讲了下明度 Luminance 的调节；亮度Brightness是RGB+亮度系数；边缘检测和图像锐化是使用 Convolution Kernel 卷积核加深中心像素与周围像素的色彩差值梯度，使边缘更加突出
3. 亮度、对比度与原像素的 RGB 通道分别是什么关系这题其实我没理解题意，其实现在想想应该答案是 亮度是在原RGB上直接添加亮度系数(color+brightness)，而对比度是 在原色彩与中间值的差 上与对比度系数相乘 (color-0.5)*contrast+0.5
4. 是否有进行过 node 开发；简单介绍一下你开发的这一个 webpack 插件的功能和原理
5. Vue 响应式原理；响应式原理中的 Deps 数组订阅发布中心是在什么时机去收集依赖的？
6. 介绍这三个步骤的流程 Vue Template -> VDOM -> 真实 DOM；
7. Vue Template 生成的 render 函数里面都有什么内容（主要要提到 createElement 函数的递归调用）
8. 编程题：Promise 调度相关，JS 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个

字节跳动【视频二面】

1. 如何预防/减少 Node.js 程序的崩溃，有没有实际操作的案例
2. 如何判断一个点在正多边形内部
3. Web Worker 的局限性；如何使用动态的 JS 代码生成动态的 Web Worker 实例（ArrayBuffer + URL.createObjectURL）
4. iframe 中脚本的执行是否会阻塞主页面的渲染线程和 JS 线程，从不同浏览器内核去分析
5. websocket 和 TCP Socket的区别，websocket 的握手过程，为什么要基于 HTTP 请求来握手
6. CSS 选择器的权重，使用什么机制来计算的
7. CSS 后处理器和预处理器分别是什么，有什么区别
8. 什么情况下会发生 Ajax 的跨域请求，浏览器是如何处理 Ajax 跨域的
9. ES6 箭头函数与 ES5 普通函数的区别
10. Promise 的 then 方法可以 chaining 调用，它是如何保存这个过程中的值的；then 中回调函数如果返回 Promise/带有 then 属性的对象（then属性值是function 或者非 function 的情况下）/非上述两种 这些情况下，then() 方法是如何处理的
11. Vue 中为何不使用 Object.defineProperty 去转换数组为响应式数据，对数组是如何处理的

字节跳动【视频三面】

1. 介绍觉得最有挑战的项目，做了什么工作
2. Vue 虚拟化列表的思路和实现原理
3. 优化树形图表渲染的其他方法
4. 简述思路：在不使用 Promise 或 async/await 等其他 JS 异步控制的情况下，设计一个网络请求 Scheduler 类，确保每个 ajax 请求的回调函数按发起请求的顺序执行
5. 项目开发流程，异地协作流程保证
6. 有没有特别想做的业务方向；以后的工作和技术规划

快手【视频一面】

1. 六道笔试题和几道简单的编程题
2. 手写 bind 和 apply
3. 水平垂直居中的几种方法
4. 扩展 flex:1
5. 请用 React Hooks 实现无状态组件的 componentDidMount、componentDidUpdate 生命周期效果
6. setState 的第二个参数的作用
7. useCallback 的使用
8. React 受控和非受控组件的区别
9. HTTPS 和 HTTP 的区别
10. CSRF 如何防御
11. Promise all/race/finally 的原理
12. 节流和防抖的区别和应用场景
13. 解释 0.3-0.2=0.99999999...
14. 原生 DOM API 相关：创建节点、插入/移除节点、选择节点
15. element.style 和 getComputedStyle() 的区别
16. 下面代码的输出结果是// counter.jslet counter = 10;export default counter;// index.jsimport myCounter from "./counter";myCounter += 1;console.log(myCounter);
17. 请用JavaScript实现一个函数求解整数N，N满足 %2==1，%3==2，%5==4，%6==5，%7==0

快手【视频二面】

1. 输出代码结果：函数提升问题、JS 异步事件循环问题
2. React Hooks 优点、解决什么问题、useEffect 的调用时机
3. webpack 优化的方法和配置
4. webpack 开发插件的原理，简单介绍你的插件
5. webpack watch 本身的 cache 机制
6. 讲觉得最有挑战的项目，做了什么工作，做了什么优化
7. 如何判断模块的循环引用（DFS 拓扑排序）

快手【现场技术终面】

1. 项目技术选型，为什么又有 Vue 又有 React
2. 项目的研发管理流程
3. 前端项目自动化发布方式
4. 团队情况，团队沟通中遇到最大的困难，个人在团队中的角色

滴滴-两轮车业务

1. webpack 打包的整个流程，简述 webpack 插件的开发和功能
2. Commonjs 原理
3. Koa/Express 中的中间件是什么
4. 如何提高Node.js 程序的稳健性
5. 如何理解 HTTP 协议
6. RESTful API
7. HR面：项目异地协作是如何保证流程，对流程推进做了什么工作；从0开始带项目的思路是什么

平安人寿【电话一面挂】

1. 数据看板开发流程，数据看板是静态数据的还是实时渲染的？
2. 静态数据数据量多大，数据量大的时候是如何优化性能的
3. 可视化看板实时渲染的技术方案
4. Echarts 除了普通的柱状图折线图，还用过什么高级功能
5. Canvas 与 SVG 的区别，和它们在 Echarts 中使用的区别

1. 项目中的权限系统是怎样实现的
2. Vue 虚拟化列表的实现原理
3. webpack 优化打包的策略、内部的机制和插件开发的原理
4. 假设现在有一个微信公众号文章的页面，可以展示文章、图片、视频和读者留言，从安全和交互性能的角度去讲一下如何优化安全：用户输入的时候编辑页面防止 XSS 攻击、敏感字符过滤、外链资源白名单过滤、图片资源脱敏处理转换为本地资源；优化：关键请求路径优化、事件监听节流、非首屏资源懒加载、代码压缩、服务端渲染、利用好缓存策略、开启 HTTP2
5. HTTP2 相对于 HTTP1.1 有哪些优点，解决了什么问题首部压缩、数据分帧、多路复用，服务端推送
6. Webpack 实现热更新的流程（webpack-dev-server 和 HotModuleReplacementPlugin 的实现）
7. Vue 生成 VDOM 的流程和 Vue 响应式原理
8. 看过哪些项目的源代码，为什么要去看源代码
9. 有没有开发过小程序，是否有 TypeScript 开发经验
10. 介绍一下现在团队的基本情况，在团队内部的贡献（技术分享、维护工具）

总结

前端经过15年的发展已经进入了一个比较平稳的状态：初级人员饱和、高级人才稀缺。初级新人找到突破口的唯一办法就是在专业技能熟练的基础上，往不同方向横向挖掘亮点，如可视化产品开发、Node.js 工具链开发等，以实际业务为基石，踏踏实实提升自我水平才是最重要的事

閱讀更多 滬漂程序員的生活史 的文章

關鍵字: 软件 CSS 专业技能