2024年Web前端最全前端最全面试题_前端三年经验面试题，前端资料大全

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

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

答案：
块级元素总是独占一行。width，height，padding，margin都可以控制。
行内元素和相邻的行内元素在同一行，width，height与padding-top,padding-bottom,还有margin-top,margin-bottom不可控制，其余可控制。
6. 请讲一下px，em的区别。
答案：px和em都是长度单位。但是px是固定的，指定多少就是多少。em是根据父级元素的大小变化的。
拓展：浏览器默认字体大小是16px。所以未经调整的浏览器都符合：1em=16px这个计算规则。
7. SASS和LESS是什么？为什么要使用它们？
答案：CSS预处理器，通过编程的方式来开发CSS，可实现代码简写与复用等。
使用它们是因为：结构清晰，便与拓展、
减少无意义的机械劳动、
可以轻松实现多重继承。
8. 对WEB标准以及W3C的理解与认识。
答案：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、能被更多的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
9. css样式优先级算法如何计算？
答案：!important > id > class > 标签
!important比内联样式优先级高；
优先级就近原则，样式定义最近者为准；
以最后载入的样式为准；
10. 实现： 左侧元素固定宽度， 右侧元素自适应【字节面试题】换个方式可以提左右宽度固定，中间自适应。
答案：
1、flex布局，左侧固定宽度，右侧主体flex: 1
2、左侧固定宽度 + float，右侧主体 margin-left
3、左侧固定宽度 + 绝对定位，右侧主体 margin
4、左侧固定宽度，右侧calc计算
5、左侧固定宽度 + float，右侧 overflow: auto
6、左侧固定宽度 + float，右侧 display: flex

最终效果：

11. css中的z-index的权重问题请讲讲你所了解的一些规则。
    答案：css的z-index权重问题【最简洁，没有废话】

3. 低频：

1. 每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？
   答案：<!DOCTYPE>声明位于文档中最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（重点：告诉浏览器按照何种规范解析页面）
2. 请讲一下圣杯布局和双飞翼布局。
   圣杯布局与双飞翼布局都是双边固定宽度，中间自适应的布局。
3. 如何更改input的样式？
   答案：请访问：更改input复选框、输入框以及上传文件的样式
4. div+css的布局较table布局有什么优点？
   答案： 改版的时候更方便，只要改css文件。页面加载速度更快、结构化清晰、页面显示简介。表现与结构相分离。易于优化（seo）搜索引擎更友好，排名更容易靠前。
5. 知道什么是微格式吗？谈谈理解。
   答案：微格式是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
   优点：将智能数据添加到网页上，让网页内容在搜索引擎结果页面可以显示额外的提示。（应用范例：豆瓣）
6. 超链接被访问过后hover样式就不出现的问题是什么？如何解决？
   答案：被点击访问过的超链接样式不在具有hover和active了，解决办法是改变css属性的排列顺序：L-V-H-A（link,visited,hover,active）。
7. 如何垂直居中一个浮动元素？
   答案：用定位，计算top与left，可以用CSS的函数calc()计算。
8. CSS的link和import的区别是什么？
   答案：百度很多，自己搜吧。
9. 前端页面有哪三层构成？分别是什么？作用是什么？
   答案：结构层(HTML - - 设置页面的基本结构)、样式层(CSS - - 修改页面展示给用户的样式加一些小交互)、行为层(JS - - 使用户与页面完美交互)
10. CSS选择符有哪些？块级元素有哪些？空元素有哪些？
    答案：最全CSS知识整理
11. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS新增伪类有哪些？
    答案链接同上。
12. 请说出position的属性值有哪些。每个值的特点作用。
    答案链接同上。
13. display的属性值有哪些？可以做什么？
    答案链接同上。
14. 哪些CSS属性可以继承？
    答案链接同上。
15. 为什么利用多个域名来存储网站资源会更有效？
    答案：CDN缓存更方便；突破浏览器并发限制；节约cookie带宽；节约主域名的连接数，优化页面相应速度；防止不必要的安全问题；

---

---

---

四、JS基础题：

1. JS的输出输入有哪些？
   答案：JS的输出与输入介绍

2. JS的数据类型有哪些？
   答案：请访问：JS数据类型详解

3. 如何判断JS变量的数据类型？

   1. typeof() 部分类型需要结合一下判断来使用，比如数组，正则，日期，null等等
      判断null：

   typeof xx === 'object' && !xx
   
   

   判断数组：

   typeof xx === 'object' && Boolean(xx.forEach)
   
   

   判断日期：

   typeof xx === 'object' && Boolean(xx.getDate)
   
   

   其他类型类似上方的几个判断。
   2. instanceof
   3. constructor
   4. Object.prototype.toString
   关于最重要的Object.prototype.toString请观看：https://blog.csdn.net/weixin_43606158/article/details/93380867

4. typeof求解的可能值有哪些？

   1. “number”
   2. “string”
   3. “boolean”
   4. “undefined”
   5. “object”
   6. “symbol”
   7. “function”

5. 数据类型的自动转换和隐式转换你知道哪些？

   • 隐式类型转换：
     • 1 == '1'
     • '1' + 1
     • '1' - 1
   • 显示类型转换：
     • parseInt(str,radix)/parseFloat(str,radix)/Number()转变成数字。
     • Boolean(param)转变成布尔值
     • subString()转变成字符串

详细关于JS数据类型转换的内容请观看：一篇文章搞懂JS转换规则
6. “ == ” 和 “ === ” 还有 “ != ” 和 “ !== ”的区别？
答：“ == ” 和 “ != ”会做数据隐式类型转换，转换完数据类型在做比较。而“ === ” 和 “ !== ”会先判断数据类型，如果俩者的数据类型不一致直接返回false就不会再去做值的比较了。
7. 讲一讲“ || ” 和 “ && ”。
答案：请访问：彻底了解"||“和”&&"
8. “ i++ ” 和 “ ++i ”的区别。
答案：i++是先引用i的值而后将i递增1。
++i是先将i的值加1而后引用它的值。
9. break，renturn，continue三者的区别
答案：return、break与continue的区别
10. 请讲一讲递归。
函数自身调用自身。 详细请看：
①递归
②用递归实现遍历迭代
11. 请讲一下JavaScript的闭包。有什么特点？对页面有什么影响？
答案：JS闭包的理解
12. 你知道哪些算法？
答案：请访问：JS算法小总结
13. 你一般如何调试bug？
答案：请访问：前端调试bug的方法
14. 数组的常用API你知道哪些？
答案：请访问：数组的常用API详解
15. 请讲将数组与伪数组的区别。
答案：请访问：伪数组是什么？伪数组与数组的区别
16. 请讲讲你对面向对象编程的理解。
答案：请访问：面向对象编程(OOP)的概念
17. 请讲讲原型链。
答案：JS原型知识整理
18. 请讲讲继承的方法。
答案：JS继承的六种方法
19. 请讲讲JavaScript作用域。
答案：JS作用域与声名提升
20. 请讲讲变量的声明提升
答案：JS作用域与声名提升
21. 创建对象的方法有哪些？
答案：https://blog.csdn.net/weixin_43606158/article/details/94912023
22. 请讲讲ECMAScript的内置对象。
答案：https://blog.csdn.net/weixin_43606158/article/details/94912023
23. Array在ES5新增遍历的API它们每个的用法，返回值，参数。
答案：数组ES5新增遍历迭代的方法及其区别
24. ES5/ES6新增的哪些东西是你平时开发中常用到的？
答案：ES5/6新特性
25. 列举浏览器对象模型BOM里常用的至少四个对象，并列举window对象的常用方法至少五个。
答案：BOM内容的小整理
26. 请讲一下你知道的性能优化的方法。
答案：提高JS性能的12个技巧
27. 性能指标有哪些
28. 如何发现性能瓶颈
29. 性能调优的常见手段
30. 说说你在项目中如何进行性能优化
31. 事件绑定和普通事件有什么区别？
答案：事件绑定和普通事件的区别
32. IE和其他浏览器事件流的区别。
答案：IE浏览器是事件冒泡，其他浏览器是事件捕获（标准DOM事件流）。
33. IE的标准下有哪些兼容性的写法？
答案：javascript之IE兼容篇
34. 请讲一下this的指向问题。
答案：this的指向
35. 更改this指向的方法有哪些？
答案：更改this指向的方法及其区别
36. 请讲一下bind(),call(),apply()三者的区别。
答案链接同上
37. 手写call方法。
38. 事件委派/事件委托是什么？
答案：事件委派的使用及作用
39. 如何阻止事件冒泡和浏览器默认事件？
答案：浏览器事件默认行为介绍与阻止的方法
JS事件流介绍与阻止事件冒泡
40. 添加，删除，替换，插入到某个节点的方法。
DOM知识详细整理
41. document.load和jquery.ready的区别。
答案：加载页面之前的方法介绍
42. 请讲一下JavaScript的同源策略。
答案：JavaScript的同源策略
43. 请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
答案：前端跨域的六种解决方法
44. JavaScript是一门什么样的语言？它有哪些特点？
答案：弱类型语言，类型会做隐式转换，作用域，声名提升。。。
45. 正则表达式构造函数var reg = new RegExp(‘xxx’)与正则表达式字面量var reg = /xxx/有什么不同？
答案：当使用RegExp()构造函数的时候，不仅需要转义引号(即 \’ 表示 ’ )，并且还需要双反斜杠才能表示一个反斜杠。所以我们使用正则表达式字面量的效率更高。
46. JavaScript中callee和caller的作用？
答案：JavaScript中callee和caller的区别
47. 简述JavaScript的DOM里document获取节点的方法，并说出对应作用。
答案：DOM知识详细整理
48. 简述创建函数的几种方式。
答案：JS函数介绍
49. 把script标签放在body结束标签之前和结束标签之后有什么区别？浏览器会怎么解析它们？
答案：如果说放在body的封闭之前，将会阻塞其他资源的加载。如果放在body封闭标签之后，不会影响到body内元素的加载。
50. 请描述iframe的优缺点。
答案：Iframe介绍
51. 请谈谈cookie、localStorage和SessionStorage的区别和特点。
答案：客户端缓存的方法详细介绍
52. JS延迟加载的方式有哪些？
答案：1.script标签的defer和async属性。2.动态创建DOM方式（创建script，插入到DOM中，加载完毕之后callback）。3.按需异步载入js
53. 哪些操作会造成内存泄漏？
答案：内存泄漏指任何对象在您不再拥有或需要它的时候它仍然存在。
会引发内存泄露的情况：1.setTimeout的第一个参数使用字符串而非函数的话，会导致内存泄露。2.闭包。3.控制台日志。4.循环（在俩个对象彼此引用且彼此保留时，就会产生一个循环）。
54. 请说一下JavaScript中的垃圾回收机制。
答案：垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存即可回收。
55. 在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这个变量了。

65. 设计模式你知道哪些？
    答案：前端开发的设计模式

---

---

---

五、React面试题：

由于内容过多，于是笔者单独整理了一篇文章，请点击链接： React一到三年面试题总结以及进阶题

dvajs：

1. reducers与effects的区别：
   答案：reducers是处理同步的操作。effects是处理异步的。effects是generator函数。

---

---

---

六、Vue面试题整理：

由于内容过多，于是笔者单独整理了一篇文章，请点击链接： Vue一到三年面试题总结

---

---

---

七、NodeJS：

1. 请讲讲NodeJS的优点和缺点，并说出你认为他适合什么开发场景？
   答案：因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求。此外，与Node代理服务器交互的客户端代码是由js编写的，客户端和服务端都用一种语言编写，这是非常美妙的事情。缺点：单进程，单线程，只支持单核CPU，不能充分的利用多核CPU服务器。一旦这个进程崩掉，那么整个web服务就崩掉了。
   适用场景：实时应用，如在线聊天，实时通知推送等等。分布式应用，通过高效的并且I/O使用已有的数据。工具类应用，海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序。游戏类应用，游戏领域对实时和并发有很高的要求。利用稳定接口提升web渲染能力。前后端编程语言统一，前端人员可以非常快速的切入到服务端开发。（如著名的纯js全栈式MEAN架构。）
2. 需求：实现一个页面操作不会整夜刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案。
   答案：至少给出思路（url-hash，可以使用已有的history.js之类的）
3. 讲一讲route、middleware、cluster、nodemon、pm2、server-side rendering之类的。
4. 什么是前端路由？什么时候适合使用前端路由？前端路由有哪些优点和缺点。
   答案：前端路由就是在不进行后端请求的情况下进行页面跳转。前端路由一般使用在单页应用。优点：用户体验好，不需要每次都从服务器获取，快速展现给用户。缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
5. 项目用nodejs做中间件的好处：node做中间层的好处是什么？【笔者个人认为在大多数项目的情况下是弊大于利的】

---

---

---

八、Webpack:

1. webpack原理，以及常用插件。
2. webpack打包如何缓存，没更新的包如何让他不重新进行打包

---

---

---

九、版本仓库的使用：

1. 你了解Git么？
   答案：Git版本仓库介绍
2. 你了解SVN么？
   答案：SVN简介及使用方法
3. Git的常用命令你知道哪些？
   答案：Git常用命令介绍
4. Git你是怎么解决代码冲突的？
   答案：git解决代码冲突
5. Git你是怎么回退版本的？
   答案：git回退版本
6. 命令行的命令你知道哪些？
   答案：命令行常用命令

---

---

---

十、电脑相关知识【HTTP的也在这里】：

1. HTTPS与HTTP的区别？
   答案：http和https的区别
2. TCP/IP三次握手与四次挥手你了解过么？它的存在意义是什么？
   答案：一篇文章搞懂TCP/IP三次握手与四次挥手，用过手机的都能看懂
   意义：为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。
3. 常见请求头与响应头你了解哪些？
   答案： 常见的请求头与响应头介绍
4. 常见状态码及其代表的意义你知道哪些？
   答案：开发过程中常见状态码
5. 实际开发移动端项目的过程中，你如何使用真机调试呢？
   答案：开发移动端项目在真机上面的调试方法
6. 请讲讲长连接与短连接。
   答案：https://www.cnblogs.com/gotodsp/p/6366163.html
7. 如何给网站做seo优化。
   答案：https://baike.baidu.com/item/搜索引擎算法
   除了上述描述的那些，其实最重要的是砸钱。。。
8. 请讲讲浏览器渲染原理。
   答案：https://blog.fundebug.com/2019/01/03/understand-browser-rendering/
9. HTTP协议中，GET和POST有什么区别？分别适用什么场景？
   答案：get传送的数据长度有限制，因为是放在url中传递参数，如果传递中文参数，需要自己进行编码操作，安全性较低。post是放在报文中，没有限制。【如果服务器做了限制另说，可更改】。
   适用场景：post一般用于数据提交。get一般用于简单的数据查询，严格要求不是那么高的场景。
10. 一个页面从输入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绘制，合成图层，将内容显示在屏幕上了。

11. 为什么利用多个域名来存储网站资源会更有效？
    答案：确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。
12. 线程与进程的区别。
    答案：一个程序最少有一个进程，一个进程最少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大的提高了程序的运行效率。
    线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
13. 讲一讲强缓存和协议缓存？
14. HTTP/2.0 都有哪些特性？头部压缩的原理？
15. nginx了解么？你都用来做什么？
16. 有了【Last-Modified，If-Modified-Since】为何还要有【ETag、If-None-Match】?
17. CDN加速原理
    答案：CDN供应商会针对TCP等协议进行优化和调整，使正常的TCP三次握手减少到1次，从而减少计算机与计算机、路由之间的信息传递环节，从而达到加速目的

---

---

---

十一、安全方面相关：

1. 服务端通信安全攻防
   a. HTTPS 原理剖析
   b. HTTPS 降级攻击
2. 防范常见的web攻击：https://wudi98.blog.csdn.net/article/details/121410712

---

---

---

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

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