最后
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！
- Array在ES5新增遍历的API它们每个的用法，返回值，参数。
答案：数组ES5新增遍历迭代的方法及其区别 - ES5/ES6新增的哪些东西是你平时开发中常用到的？
答案：ES5/6新特性 - 列举浏览器对象模型BOM里常用的至少四个对象，并列举window对象的常用方法至少五个。
答案：BOM内容的小整理 - 请讲一下你知道的性能优化的方法。
答案：提高JS性能的12个技巧 - 性能指标有哪些
- 如何发现性能瓶颈
- 性能调优的常见手段
- 说说你在项目中如何进行性能优化
- 事件绑定和普通事件有什么区别？
答案：事件绑定和普通事件的区别 - IE和其他浏览器事件流的区别。
答案：IE浏览器是事件冒泡，其他浏览器是事件捕获（标准DOM事件流）。 - IE的标准下有哪些兼容性的写法？
答案：javascript之IE兼容篇 - 请讲一下this的指向问题。
答案：this的指向 - 更改this指向的方法有哪些？
答案：更改this指向的方法及其区别 - 请讲一下bind(),call(),apply()三者的区别。
答案链接同上 - 手写call方法。
- 事件委派/事件委托是什么？
答案：事件委派的使用及作用 - 如何阻止事件冒泡和浏览器默认事件？
答案：浏览器事件默认行为介绍与阻止的方法
JS事件流介绍与阻止事件冒泡 - 添加，删除，替换，插入到某个节点的方法。
DOM知识详细整理 - document.load和jquery.ready的区别。
答案：加载页面之前的方法介绍 - 请讲一下JavaScript的同源策略。
答案：JavaScript的同源策略 - 请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
答案：前端跨域的六种解决方法 - JavaScript是一门什么样的语言？它有哪些特点？
答案：弱类型语言，类型会做隐式转换，作用域，声名提升。。。 - 正则表达式构造函数var reg = new RegExp(‘xxx’)与正则表达式字面量var reg = /xxx/有什么不同？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号(即 \’ 表示 ’ )，并且还需要双反斜杠才能表示一个反斜杠。所以我们使用正则表达式字面量的效率更高。 - JavaScript中callee和caller的作用？
答案：JavaScript中callee和caller的区别 - 简述JavaScript的DOM里document获取节点的方法，并说出对应作用。
答案：DOM知识详细整理 - 简述创建函数的几种方式。
答案：JS函数介绍 - 把script标签放在body结束标签之前和结束标签之后有什么区别？浏览器会怎么解析它们？
答案：如果说放在body的封闭之前，将会阻塞其他资源的加载。如果放在body封闭标签之后，不会影响到body内元素的加载。 - 请描述iframe的优缺点。
答案：Iframe介绍 - 请谈谈cookie、localStorage和SessionStorage的区别和特点。
答案：客户端缓存的方法详细介绍 - JS延迟加载的方式有哪些？
答案：1.script标签的defer和async属性。2.动态创建DOM方式（创建script，插入到DOM中，加载完毕之后callback）。3.按需异步载入js - 哪些操作会造成内存泄漏？
答案：内存泄漏指任何对象在您不再拥有或需要它的时候它仍然存在。
会引发内存泄露的情况：1.setTimeout的第一个参数使用字符串而非函数的话，会导致内存泄露。2.闭包。3.控制台日志。4.循环（在俩个对象彼此引用且彼此保留时，就会产生一个循环）。 - 请说一下JavaScript中的垃圾回收机制。
答案：垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收。 - 在js中0.1+0.2等于多少？如何让它得到正确答案？
答案：等于0.30000000000000004。原因是因为浮点数运算中产生的误差。
最完善的解决方法：
不管是加减乘除都有这个问题，所以我们可以在传递一个额外的参数然后里面加一个switch判断使用什么计算，这样就是一个通用的计算器了。
function add(param1, param2) {
return parseFloat((param1 + param2).toFixed(10));
}
add(0.1, 0.2); // 0.3
关于浮点数加减乘除的问题解决方法请看：https://wudi98.blog.csdn.net/article/details/105530637
56. 你用过axios么？
答案：axios的使用
57. async，promise，settimeout的执行顺序
答案：一篇文章彻底搞懂异步，同步，setTimeout，Promise，async
58. 前端开发这么久了你知道哪些常用的网站？
答案：前端开发应知网站
59. 你写过哪些前端工具（功能）函数？
答案：前端开发常用功能函数总结
60. async/await 和 promise 的区别。
答案：
async/await 是建立在 Promise上的，不能被使用在普通回调以及节点回调
async/await 和 Promises 很像，不阻塞
async/await 代码看起来像同步代码。
Promise代码完全都是Promise的API（then、catch等等），操作本身的语义反而不容易看出来
61. 节流和防抖
答案：JS的节流和防抖实际应用
62. Event Loop，事件循环是什么？
答案:一篇文章彻底搞懂异步，同步，setTimeout，Promise，async【文章末尾做了event loop总结】
nodejs与普通js的Event Loop：https://juejin.im/post/5b8f76675188255c7c653811
63. 如何中断一个请求？
64. for(var i = 0; i <= 5; i++) {console.log(i)}的执行结果，for(var i = 0; i <= 5; i++) {setTimeout(() => {console.log(i)}, 1000)}的执行结果
答案：
普通的循环里面的输出0,1,2,3,4,5
在计时器里面的输出：6,6,6,6,6,6
因为计时器会把每一次执行的函数放到异步队列里面，等到时间到的时候去输出i的时候i已经执行到了6（退出循环时的值）的时候，所以在执行这些function的时候每次都是输出6了。
补充：如果想在计时器当中输出0~5的话，那就用let声明
因为for循环头部的let不仅将i绑定到for循环中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过var定义的变量是无法传入到这个函数执行域中的，通过使用let来声明块变量能作用于这个块，所以function就能使用i这个变量了。
- 设计模式你知道哪些？
答案：前端开发的设计模式
五、React面试题：
由于内容过多，于是笔者单独整理了一篇文章，请点击链接： React一到三年面试题总结以及进阶题
dvajs：
- reducers与effects的区别：
答案：reducers是处理同步的操作。effects是处理异步的。effects是generator函数。
六、Vue面试题整理：
由于内容过多，于是笔者单独整理了一篇文章，请点击链接： Vue一到三年面试题总结
七、NodeJS：
- 请讲讲NodeJS的优点和缺点，并说出你认为他适合什么开发场景？
答案：因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求。此外，与Node代理服务器交互的客户端代码是由js编写的，客户端和服务端都用一种语言编写，这是非常美妙的事情。缺点：单进程，单线程，只支持单核CPU，不能充分的利用多核CPU服务器。一旦这个进程崩掉，那么整个web服务就崩掉了。
适用场景：实时应用，如在线聊天，实时通知推送等等。分布式应用，通过高效的并且I/O使用已有的数据。工具类应用，海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序。游戏类应用，游戏领域对实时和并发有很高的要求。利用稳定接口提升web渲染能力。前后端编程语言统一，前端人员可以非常快速的切入到服务端开发。（如著名的纯js全栈式MEAN架构。） - 需求：实现一个页面操作不会整夜刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案。
答案：至少给出思路（url-hash，可以使用已有的history.js之类的） - 讲一讲route、middleware、cluster、nodemon、pm2、server-side rendering之类的。
- 什么是前端路由？什么时候适合使用前端路由？前端路由有哪些优点和缺点。
答案：前端路由就是在不进行后端请求的情况下进行页面跳转。前端路由一般使用在单页应用。优点：用户体验好，不需要每次都从服务器获取，快速展现给用户。缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 - 项目用nodejs做中间件的好处：node做中间层的好处是什么？【笔者个人认为在大多数项目的情况下是弊大于利的】
八、Webpack:
- webpack原理，以及常用插件。
- webpack打包如何缓存，没更新的包如何让他不重新进行打包
九、版本仓库的使用：
- 你了解Git么？
答案：Git版本仓库介绍 - 你了解SVN么？
答案：SVN简介及使用方法 - Git的常用命令你知道哪些？
答案：Git常用命令介绍 - Git你是怎么解决代码冲突的？
答案：git解决代码冲突 - Git你是怎么回退版本的？
答案：git回退版本 - 命令行的命令你知道哪些？
答案：命令行常用命令
十、电脑相关知识【HTTP的也在这里】：
- HTTPS与HTTP的区别？
答案：http和https的区别 - TCP/IP三次握手与四次挥手你了解过么？它的存在意义是什么？
答案：一篇文章搞懂TCP/IP三次握手与四次挥手，用过手机的都能看懂
意义：为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。 - 常见请求头与响应头你了解哪些？
答案： 常见的请求头与响应头介绍 - 常见状态码及其代表的意义你知道哪些？
答案：开发过程中常见状态码 - 实际开发移动端项目的过程中，你如何使用真机调试呢？
答案：开发移动端项目在真机上面的调试方法 - 请讲讲长连接与短连接。
答案：https://www.cnblogs.com/gotodsp/p/6366163.html - 如何给网站做seo优化。
答案：https://baike.baidu.com/item/搜索引擎算法
除了上述描述的那些，其实最重要的是砸钱。。。 - 请讲讲浏览器渲染原理。
答案：https://blog.fundebug.com/2019/01/03/understand-browser-rendering/ - HTTP协议中，GET和POST有什么区别？分别适用什么场景？
答案：get传送的数据长度有限制，因为是放在url中传递参数，如果传递中文参数，需要自己进行编码操作，安全性较低。post是放在报文中，没有限制。【如果服务器做了限制另说，可更改】。
适用场景：post一般用于数据提交。get一般用于简单的数据查询，严格要求不是那么高的场景。 - 一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？
答案：
1.用户输入
当用户输入关键字并按下回车之后，这意味着当前页面即将要被替换成新的页面，不过在这个流程继续之前，浏览器还给了当前页面一次执行beforeunload事件的机会，beforeunload事件允许页面在退出之前执行一些数据清理操作，还可以询问用户是否要离开当前页面。
2.url请求过程
首先会查找本地hosts文件看是否有缓存，如果没有那么浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
浏览器与Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
此时，Web服务器提供资源服务，客户端开始下载资源。
3.准备渲染阶段
默认情况下，chrome会为每个页面分配一个渲染进程，也就是说，每打开一个新页面就会配套创建一个新的渲染进程。
4.渲染阶段
文件解码成功后会开始渲染流程，先会根据HTML创建DOM树，有CSS的话会去构建CSSOM树。如果遇到script标签的话，会判断是否存在async或者defer，前者会并行进行下载并执行js，后者会先下载文件，然后等待HTML解析完成后顺序执行。
如果以上都没有，就会阻塞住流程直到js执行完毕。
CSSOM树和DOM树构建完成后会开始生产Render树，这一步就是确定页面元素的布局、样式等等诸多方面的东西。
在生成Render树的过程中，浏览器就开始调用GPU绘制，合成图层，将内容显示在屏幕上了。
- 为什么利用多个域名来存储网站资源会更有效？
答案：确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。 - 线程与进程的区别。
答案：一个程序最少有一个进程，一个进程最少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大的提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 - 讲一讲强缓存和协议缓存？
- HTTP/2.0 都有哪些特性？头部压缩的原理？
- nginx了解么？你都用来做什么？
- 有了【Last-Modified，If-Modified-Since】为何还要有【ETag、If-None-Match】?
- CDN加速原理
答案：CDN供应商会针对TCP等协议进行优化和调整，使正常的TCP三次握手减少到1次，从而减少计算机与计算机、路由之间的信息传递环节，从而达到加速目的
十一、安全方面相关：
- 服务端通信安全攻防
a. HTTPS 原理剖析
b. HTTPS 降级攻击 - 防范常见的web攻击：https://wudi98.blog.csdn.net/article/details/121410712
十二、拓展题：
- 前端开发规范了解过么？
答案：前端开发规范 - web前端整体的性能考虑，你的优化思路是什么？
答案举例：
【参考雅虎优化规则】
- 减少http请求【精灵图，合理缓存，资源合并、压缩】，图片懒加载
- 将外部js文件置底
- 将css放在页面最上面
- 避免在CSS中使用Expressions
- 减少关键资源的个数和大小（webpack拆/合包，懒加载等）
- 减少关键资源RTT【往返时延】的时间（Gzip压缩，边缘节点CDN）
- JS代码不可占用主线程太久，与首屏无关的脚本加上延后处理（async/defer）属性，与无关的交给Web Worker。
- CSS用对选择器（尽可能绑定Class或Id），否则会遍历多次。
- 移动端的点击事件有延迟，时间是多久？为什么会有这个延迟？
答案：有300ms的延迟，为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。 - 平时如何管理你的项目，如何设计大规模并发架构？
答案：先期团队必须确定好全局样式(global.css)，编码模式(utf-8)等等，编写习惯必须一致【确定好团队开发代码规范文档】。每个人负责的模块写好注释【模块功能，参数说明，编写时间，编写人】。文件做好分类处理。 - 谈谈你认为怎样做才能使项目做的更好。
答案：考虑问题的深入，在开发时不能仅仅停留在完成任务上，要认真思考及时发现问题。要精益求精，对自己写的代码负责。 - 项目中遇到的难点，以及解决思路。
- 埋点数据上报的方案做过么？【统计用户的页面浏览时间，退出率，使用人数等等】
- 前端架构思考，你是如何考量部门的技术栈的？
- 前端重构思考，老项目在新业务紧急与重构技术债务间如何衡量轻重？
十三、TS面试题
- js项目如何升级为ts？有何影响？
- tslint都能配置哪些功能？对开发流程有何影响？
- ts 基础类型都哪些，他们跟js的区别
- ts为什么会流行？与ECMA新规范的关系？
- 如何理解接口，泛型?
- ts中type和interface的区别
答案：ts中type和interface的区别
十四、工程相关
1. 需求分析
- 你如何对需求原型进行理解和拆分
- 说说你对功能性需求的理解
- 说说你对非功能性需求的理解
- 你针对产品提出哪些交互和改进意见
- 你如何理解用户痛点
2.设计能力
- 说说你在项目中使用过的UML 图
- 你如何考虑组件化
- 你如何考虑服务化
- 你如何进行领域建模
- 你如何划分领域边界
- 说说你项目中的领域建模
- 说说概要设计
3. 设计模式
- 你使用过哪些设计模式，请介绍一下分别使用场景以及它们自身
- 说说常用开源框架中设计模式使用分析
- 说说你对设计原则的理解23种设计模式的设计理念
- 设计模式之间的异同，例如策略模式与状态模式的区别
- 设计模式之间的结合，例如策略模式 + 简单工厂模式的实践
- 设计模式的性能，例如单例模式哪种性能更好。
4. 业务工程
- 你系统中的前后端分离是如何做的
- 说说你的开发流程
- 你和团队是如何沟通的
- 你如何进行代码评审
- 说说你对技术与业务的理解
- 说说你在项目中经常遇到的 Exception
- 说说你在项目中遇到感觉最难 Bug，怎么解决的
- 说说你在项目中遇到印象最深，最困难的地方，是怎么解决的
- 你觉得你们项目还有哪些不足的地方
- 你是否遇到过 CPU 100%，如何排查与解决
- 你是否遇到过 内存 OOM，如何排查与解决
- 说说你对敏捷开发的实践
- 说说你对开发运维的实践
- 介绍下工作中的一个对自己最有价值的项目，以及在这个过程中的角色
十五、软实力
- 说说你的亮点
- 说说你最近在看什么书
- 说说你觉得最有意义的技术书籍
- 工作之余做什么事情
- 说说个人发展方向方面的思考
- 说说你认为的服务端/前端开发工程师应该具备哪些能力
- 说说你认为的架构师是什么样的，架构师主要做什么
- 说说你所理解的技术专家
总结
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
