2024年最新前端最全面试题_前端三年经验面试题(1)，2024历年字节跳动前端面试真题解析

最新推荐文章于 2024-09-18 23:16:25 发布

2401_84435942

最新推荐文章于 2024-09-18 23:16:25 发布

阅读量381

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84435942/article/details/138903235

版权

程序员专栏收录该内容

161 篇文章 1 订阅

订阅专栏

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

列举浏览器对象模型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)等等，编写习惯必须一致【确定好团队开发代码规范文档】。每个人负责的模块写好注释【模块功能，参数说明，编写时间，编写人】。文件做好分类处理。
谈谈你认为怎样做才能使项目做的更好。
答案：考虑问题的深入，在开发时不能仅仅停留在完成任务上，要认真思考及时发现问题。要精益求精，对自己写的代码负责。
项目中遇到的难点，以及解决思路。
埋点数据上报的方案做过么？【统计用户的页面浏览时间，退出率，使用人数等等】
前端架构思考，你是如何考量部门的技术栈的？
前端重构思考，老项目在新业务紧急与重构技术债务间如何衡量轻重？