作者 | 木易扬

责编 | 伍杏玲

本人是去年 7-8月开始准备面试，过五关斩六将，最终在年末抱得网易归，深深感受到高级前端面试的套路。以下是自己整理的面试题汇总，不敢藏私，统统贡献出来。

面试的公司分别是：阿里、网易、滴滴、今日头条、有赞、挖财、沪江、饿了么、携程、喜马拉雅、兑吧、微医、寺库、宝宝树、海康威视、蘑菇街、酷家乐、百分点和海风教育。

以下是面试题汇总，后续阶段会持续深入更新面试题解，共勉！

阿里

使用过的Koa2中间件Koa-body原理介绍自己写过的中间件有没有涉及到Cluster介绍Pm2Master挂了的话Pm2怎么处理如何和MySQL进行通信React声明周期及自己的理解如何配置React-Router路由的动态加载模块服务端渲染SSR介绍路由的History介绍Redux数据流的流程Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理多个组件之间如何拆分各自的State，每块小的组件有自己的状态，它们之间还有一些公共的状态需要维护，如何思考这块使用过的Redux中间件如何解决跨域的问题常见Http请求头移动端适配1px的问题介绍Flex布局其他CSS方式设置垂直居中居中为什么要使用Transform（为什么不使用MarginLeft/Top）使用过Webpack里面哪些Plugin和LoaderWebpack里面的插件是怎么实现的Dev-Server是怎么跑起来项目优化抽取公共文件是怎么配置的项目中如何处理安全问题怎么实现this对象的深拷贝

网易

介绍Redux，主要解决什么问题文件上传如何做断点续传表单可以跨域吗Promise、Async有什么区别搜索请求如何处理（防抖）搜索请求中文如何请求介绍观察者模式介绍中介者模式观察者和订阅-发布的区别，各自用在哪里介绍React优化介绍Http2.0通过什么做到并发请求Hhttp1.1时如何复用Tcp连接介绍Service Worker介绍CSS3中Position:stickyRedux请求中间件如何处理并发介绍Promise，异常捕获介绍position属性包括CSS3新增浏览器事件流向介绍事件代理以及优缺点React组件中怎么做事件代理React组件事件代理的原理介绍This各种情况前端怎么控制管理路由使用路由时出现问题如何解决React怎么做数据的检查和变化

滴滴

React-Router怎么实现路由切换React-Router里的<Link>标签和<a>标签有什么区别<a>标签默认事件禁掉之后做了什么才实现了跳转React层面的性能优化整个前端性能提升大致分几类import { Button } from 'antd'，打包的时候只打包button，分模块加载，是怎么做到的使用import时，Webpack对node_modules里的依赖会做什么JS异步解决方案的发展历程以及优缺点Http报文的请求会有几个部分Cookie放哪里，Cookie能做的事情和存在的价值Cookie和Token都存放在Header里面，为什么只劫持前者Cookie和Session有哪些方面的区别React中Dom结构发生变化后内部经历了哪些变化React挂载的时候有3个组件，TextComponent、ComposeComponent、DomComponent，区别和关系，Dom结构发生变化时怎么区分Data的变化，怎么更新，更新怎么调度，如果更新的时候还有其他任务存在怎么处理Key主要是解决哪一类的问题，为什么不建议用索引index（重绘）Redux中异步的请求怎么处理Redux中间件是什么东西，接受几个参数（两端的柯里化函数）柯里化函数两端的参数具体是什么东西中间件是怎么拿到Store和Action，然后怎么处理State是怎么注入到组件的，从Reducer到组件经历了什么样的过程Koa中response.send、Response.rounded、Response.json发生了什么事，浏览器为什么能识别到它是一个json结构或是htmlKoa-bodyparser怎么来解析RequestWebpack整个生命周期，Loader和Plugin有什么区别介绍AST（Abstract Syntax Tree）抽象语法树安卓Activity之间数据是怎么传递的安卓4.0到6.0过程中WebView对JS兼容性的变化WebView和原生是如何通信跨域怎么解决，有没有使用过Apache等方案

今日头条

对Async、Await的理解，内部原理介绍下Promise，内部实现清除浮动 定位问题（绝对定位、相对定位等）从输入URL到页面加载全过程TCP3次握手TCP属于哪一层（1 物理层 -> 2 数据链路层 -> 3 网络层(IP)-> 4 传输层(TCP) -> 5 应用层(Http)）Redux的设计思想接入Redux的过程绑定Cconnect的过程Cconnect原理Webpack介绍== 和 ===的区别，什么情况下用相等==Bind、Call、Apply的区别动画的了解介绍下原型链（解决的是继承问题吗）对跨域的了解

有赞

Linux 754 介绍介绍冒泡排序，选择排序，冒泡排序如何优化Transform动画和直接使用Left、Top改变位置有什么优缺点如何判断链表是否有环介绍二叉搜索树的特点介绍暂时性死区ES6中的Map和原生的对象有什么区别观察者和发布-订阅的区别React异步渲染的概念，介绍Time Slicing 和 Suspense16.X声明周期的改变16.X中Props改变后在哪个生命周期中处理介绍纯函数前端性能优化PureComponent和FunctionComponent区别介绍JSX如何做RN在安卓和iOS端的适配RN为什么能在原生中绘制成原生组件（bundle.js）介绍虚拟DOM如何设计一个localStorage，保证数据的实效性如何设计Promise.all()介绍高阶组件sum(2, 3)实现sum(2)(3)的效果react性能优化两个对象如何比较

挖财

JS的原型变量作用域链call、apply、bind的区别防抖和节流的区别介绍各种异步方案React生命周期介绍Fiber前端性能优化介绍DOM树对比React中的key的作用如何设计状态树介绍CSS，XsrfHttp缓存控制项目中如何应用数据结构Native提供了什么能力给RN如何做工程上的优化shouldComponentUpdate是为了解决什么问题如何解决Props层级过深的问题前端怎么做单元测试Webpack生命周期Webpack打包的整个过程常用的PluginsPm2怎么做进程管理，进程挂掉怎么处理不用Pm2怎么做进程管理

沪江

介绍下浏览器跨域怎么去解决跨域问题Jsonp方案需要服务端怎么配合Ajax发生跨域要设置什么（前端）加上CORS之后从发起到请求正式成功的过程Xsrf跨域攻击的安全性问题怎么防范使用Async会注意哪些东西Async里面有多个await请求，可以怎么优化（请求是否有依赖）Promise和Async处理失败的时候有什么区别Redux在状态管理方面解决了React本身不能解决的问题Redux有没有做过封装React生命周期，常用的生命周期对应的生命周期做什么事遇到性能问题一般在哪个生命周期里解决怎么做性能优化（异步加载组件）写React有哪些细节可以优化React的事件机制（绑定一个事件到一个组件上）介绍下事件代理，主要解决什么问题前端开发中用到哪些设计模式React/Redux中哪些功能用到了哪些设计模式JS变量类型分为几种，区别是什么JS里垃圾回收机制是什么，常用的是哪种，怎么处理的一般怎么组织CSS（Webpack）

饿了么

小程序里面开页面最多是多少React子父组件之间如何传值Emit事件怎么发，需要引入什么介绍下React高阶组件，和普通组件有什么区别一个对象数组，每个子对象包含一个ID和Name，React如何渲染出全部的Name在哪个生命周期里写其中有几个Name不存在，通过异步接口获取，如何做渲染的时候Key给什么值，可以使用Index吗？用ID好还是Index好Webpack如何配Sass，需要配哪些Loader配CSS需要哪些Loader如何配置把JS、CSS、Html单独打包成一个文件Div垂直水平居中（Flex、绝对定位）两个元素块，一左一右，中间相距10像素上下固定，中间滚动布局如何实现[1, 2, 3, 4, 5]变成[1, 2, 3, a, b, 5]取数组的最大值（ES5、ES6）apply和call的区别ES5和ES6有什么区别some、every、find、filter、map、forEach有什么区别上述数组随机取数，每次返回的值都不一样如何找0-5的随机数，95-99呢页面上有1万个Button如何绑定事件如何判断是Button页面上生成一万个Button，并且绑定事件，如何做（JS原生操作DOM）循环绑定时的Index是多少，为什么，怎么解决页面上有一个input，还有一个p标签，改变input后p标签就跟着变化，如何处理监听input的哪个事件，在什么时候触发

携程

对React看法，有没有遇到一些坑对闭包的看法，为什么要用闭包手写数组去重函数手写数组扁平化函数介绍下Promise的用途和性质Promise和Callback有什么区别React生命周期两道手写算法题

喜马拉雅

ES6新的特性介绍PromisePromise有几个状态说一下闭包React的生命周期ComponentWillReceiveProps的触发条件是什么React16.3对生命周期的改变介绍下React的Filber架构画Filber渲染树介绍React高阶组件父子组件之间如何通信Redux怎么实现属性传递，介绍下原理React-Router版本号网站SEO怎么处理介绍下HTTP状态码403、301、302是什么缓存相关的HTTP请求头介绍HTTPSHTTPS怎么建立安全通道前端性能优化（JS原生和React）用户体验做过什么优化对PWA有什么了解对安全有什么了解介绍下数字签名的原理前后端通信使用什么方案RESTful常用的Method介绍下跨域Access-Control-Allow-Origin在服务端哪里配置csrf跨站攻击怎么解决前端和后端怎么联调

兑吧

LocalStorage和Cookie有什么区别CSS选择器有哪些盒子模型，以及标准情况和IE下的区别如何实现高度自适应Prototype和Proto区别_construct是什么new是怎么实现的promise的精髓，以及优缺点如何实现H5手机端的适配Rrem、Flex的区别（Root em）em和px的区别React声明周期如何去除url中的#号Redux状态管理器和变量挂载到Window中有什么区别Webpack和Gulp的优缺点如何实现异步加载如何实现分模块打包（多入口）前端性能优化（1JS、CSS；2 图片；3 缓存预加载； 4 SSR； 5 多域名加载；6 负载均衡）并发请求资源数上限（6个）base64为什么能提升性能，缺点介绍Webp这个图片文件格式介绍Koa2Promise如何实现的异步请求，低版本Fetch如何低版本适配Ajax如何处理跨域CORS如何设置Jsonp为什么不支持Post方法介绍同源策略React使用过的一些组件介绍Immuable介绍下Redux整个流程原理介绍原型链如何继承

微医

介绍JS数据类型，基本数据类型和引用数据类型的区别Array是Object类型吗数据类型分别存在哪里var a = {name: "前端开发"}; var b = a; a = null那么b输出什么var a = {b: 1}存放在哪里var a = {b: {c: 1}}存放在哪里栈和堆的区别垃圾回收时栈和堆的区别数组里面有10万个数据，取第一个元素和第10万个元素的时间相差多少栈和堆具体怎么存储介绍闭包以及闭包为什么没清除闭包的使用场景JS怎么实现异步异步整个执行周期Promise的三种状态Async/Await怎么实现Promise和setTimeout执行先后的区别JS为什么要区分微任务和宏任务Promise构造函数是同步还是异步执行，then呢发布-订阅和观察者模式的区别JS执行过程中分为哪些阶段词法作用域和this的区别平常是怎么做继承深拷贝和浅拷贝loadsh深拷贝实现原理ES6中let块作用域是怎么实现的React中setState后发生了什么setState为什么默认是异步setState什么时候是同步的为什么3大框架出现以后就出现很多Native（RN）框架（虚拟DOM）虚拟DOM主要做了什么虚拟DOM本身是什么（JS对象）304是什么打包时Hash码是怎么生成的随机值存在一样的情况，如何避免使用Webpack构建时有无做一些自定义操作Webpack做了什么a，b两个按钮，点击aba，返回顺序可能是baa，如何保证是aba（Promise.then）Node接口转发有无做什么优化Node起服务如何保证稳定性，平缓降级，重启等RN有没有做热加载RN遇到的兼容性问题RN如何实现一个原生的组件RN混原生和原生混RN有什么不同什么是单页项目遇到的复杂业务场景Promise.all实现原理

寺库

介绍Promise的特性，优缺点介绍ReduxRN的原理，为什么可以同时在安卓和IOS端运行RN如何调用原生的一些功能介绍RN的缺点介绍排序算法和快排原理堆和栈的区别介绍闭包闭包的核心是什么网络的五层模型HTTP和HTTPS的区别HTTPS的加密过程介绍SSL和TLS介绍DNS解析JS的继承方法介绍垃圾回收Cookie的引用为了解决什么问题Cookie和localStorage的区别如何解决跨域问题前端性能优化

宝宝树

使用Canvas绘图时如何组织成通用组件formData和原生的Ajax有什么区别介绍下表单提交，和FormData有什么关系介绍Redux接入流程Rudux和全局管理有什么区别（数据可控、数据响应）RN和原生通信介绍MVP怎么组织介绍异步方案Promise如何实现Then处理Koa2中间件原理常用的中间件服务端怎么做统一的状态处理如何对相对路径引用进行优化Node文件查找优先级Npm2和Npm3+有什么区别

海康威视

Knex连接数据库响应回调介绍异步方案如何处理异常捕获项目如何管理模块前端性能优化JS继承方案如何判断一个变量是不是数组变量a和b，如何交换事件委托多个<li>标签生成的Dom结构是一个类数组类数组和数组的区别dom的类数组如何转成数组介绍单页面应用和多页面应用Redux状态树的管理介绍Localstorage的API

蘑菇街

Html语义化的理解<b>和<strong>的区别对闭包的理解工程中闭包使用场景介绍this和原型使用原型最大的好处React设计思路为什么虚拟DOM比真实DOM性能好React常见的通信方式Redux整体的工作流程Redux和全局对象之间的区别Redux数据回溯设计思路单例、工厂、观察者项目中实际场景项目中树的使用场景以及了解工作收获

酷家乐

React生命周期React性能优化添加原生事件不移除为什么会内存泄露还有哪些地方会内存泄露setInterval需要注意的点定时器为什么是不精确的setTimeout(1)和setTimeout(2)之间的区别介绍宏任务和微任务Promise里面和then里面执行有什么区别介绍pureComponet介绍Function ComponentReact数据流props和state的区别介绍React context介绍class和ES5的类以及区别介绍箭头函数和普通函数的区别介绍defineProperty方法，什么时候需要用到for..in 和 object.keys的区别介绍闭包，使用场景使用闭包特权函数的使用场景Get和Post有什么区别

百分点

React15/16.x的区别重新渲染Render会做些什么哪些方法会触发React重新渲染state和props触发更新的生命周期分别有什么区别setState是同步还是异步对无状态组件的理解介绍Redux工作流程介绍ES6的功能let、const以及var的区别浅拷贝和深拷贝的区别介绍箭头函数的this介绍Promise和then介绍快速排序算法：前K个最大的元素

海风教育

对React看法，它的优缺点使用过程中遇到的问题，如何解决的React的理念是什么（拿函数式编程来做页面渲染）JS是什么范式语言(面向对象还是函数式编程)Koa原理，为什么要用Koa(Express和Koa对比)使用的Koa中间件ES6使用的语法Promise 和 async/await 和 Callback的区别Promise有没有解决异步的问题（Promise链是真正强大的地方）Promise和setTimeout的区别（Event Loop）进程和线程的区别（一个Node实例就是一个进程，Node是单线程，通过事件循环来实现异步）介绍下DFS深度优先介绍下观察者模式观察者模式里面使用的数据结构(不具备顺序 ，是一个List)

作者简介：木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。让我带你走进高级前端的世界，在进阶的路上，共勉！

声明：本文系作者投稿，版权归作者所有。