这份P8大牛的前端面试题本中不仅涵盖了HTML5、CSS3、JavaScript等前端基础知识的深度挖掘，还涉及了Vue.js、React等现代前端框架的实战应用，以及前端安全、性能优化等高级议题。

这份面试题本，不仅可以应对面试的挑战，更可以通过深入学习，提升自己的专业技能。

总览：

因为篇幅原因，下面就只能截图部分内容展示了，有想要完整版的小伙伴：点赞+转发后，私信我【前端】即可

CSS (61题)

1. css 中的 animation、transition、transform 有什么区别?
2. 怎么做移动端的样式适配?
3. 相邻的两个inline-block节点为什么会出现间隔，该如何解决?
4. grid网格布局是什么?
5. SS3新增了哪些特性?
6. 怎么使用 CSS3 实现动画?
7. 怎么理解回流跟重绘?什么场景下会触发?
8. 什么是响应式设计?响应式设计的基本原理是什么?如何进行实现?
9. 如何使用CSS提高页面性能?
10. 如何实现单行/多行文本溢出的省略样式?
11. 如何使用css完成视差滚动效果?
12. 怎么使用 CSS 如何画一个三角形
13. 说说对 CSS 工程化的理解
14. 怎么触发BFC，BFC有什么应用场景?
15. 单行文本怎么实现两端对齐?

················

React (83题)

1. React Portals 有什么用?
2. react 和 react-dom 是什么关系?
3. React 中为什么不直接使用 requestIdleCallback?
4. 为什么 react 需要 fiber 架构，而 Vue 却不需要?
5. 子组件是一个 Portal，发生点击事件能冒泡到父组件吗?
6. 说说React render方法的原理?在什么时候会被触发?
7. 说说React事件和原生事件的执行顺序
8. 说说对受控组件和非受控组件的理解，以及应用场景?
9. 你在React项目中是如何使用Redux的?项目结构是如何划分的?
10. 说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
11. 说说你对Redux的理解?其工作原理?
12. 说说你对immutable的理解?如何应用在react项目中?
13. 说说React ]sx转换成真实DOM过程?
14. 说说你在React项目是如何捕获错误的?
15. 说说React服务端渲染怎么做?原理是什么?

················

Vue (80题)

1. Vue 有了数据响应式，为何还要 diff ?
2. vue3 为什么不需要时间分片?
3. vue3 为什么要引入 Composition API ?
4. 谈谈 Vue 事件机制，并手写$on、$off、$emit、$once
5. computed 计算值为什么还可以依赖另外-个 computed 计算值?
6. 说一下 vm.$set 原理
7. 怎么在 vue 中定义全局方法?
8. Vue 中父组件怎么监听到子组件的生命周期?
9. vue组件里写的原生addEventListeners监听事件，要手动去销毁吗?
10. 说说 vue3 中的响应式设计原理
11. Vue中，created和mounted两个钩子之间调用时间差值受什么影响?
12. vue中，推荐在哪个生命周期发起请求?
13. 为什么 react 需要 fiber 架构，而 Vue 却不需要?
14. SPA(单页应用)首屏加载速度慢怎么解决?
15. 说下Vite的原理
16. Vue2.0为什么不能检查数组的变化，该怎么解决?
17. 说说Vue 页面渲染流程
18. vue中computed和watch区别
19. vuex中的辅助函数怎么使用?
20. 如果使用Vue3.0实现一个 Modal，你会怎么进行设计?
21. Vue 3.0中Treeshaking特性是什么，并举例进行说明?

················

计算机网络 (71题)

1. 简单描述从输入网址到页面显示的过程
2. 说说WebSocket和HTTP的区别
3. 说说 https 的握手过程
4. HTTP2中，多路复用的原理是什么?
5. 说说你对"三次握手"、“四次挥手”的理解
6. 为什么推荐将静态资源放到cdn上?
7. 什么是DNS劫持?
8. TLS 1.3 做了哪些改进?
9. TLS1.2 握手的过程是怎样的?
10. .HTTP 报文结构是怎样的?
11. HTTPS 为什么是安全的?
12. Axios的原理是什么?
13. 说说对 HTTP3 的了解
14. 跨域时怎么处理 cookie?
15. POST请求的 Content-Type 常见的有哪几种?
16. Blob，ArrayBuffer，Base64 分别有哪些使用场景?
17. Blob，ArrayBuffer，Base64 有什么区别?
18. TCP 和 UDP的区别是什么?
19. Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?

················

Node.js (27题)

1. common.js和es6中模块引入的区别?
2. 为什么Node在使用es module时必须加上文件扩展名?
3. 浏览器和 Node 中的事件循环有什么区别?
4. Node性能如何进行监控以及优化?
5. 如果让你来设计一个分页功能，你会怎么设计?前后端如何交互?
6. 如何实现文件上传?说说你的思路
7. 如何实现iwt鉴权机制?说说你的思路
8. 说说对中间件概念的理解，如何封装 node 中间件?
9. 说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?
10. 说说对Nodejs中的事件循环机制理解?
11. 说说Node中的EventEmitter?如何实现-个EventEmitter?
12. 说说对 Node 中的 Stream 的理解?应用场景?
13. 说说对 Node 中的 Buffer 的理解?应用场景?
14. 说说对 Node 中的 fs模块的理解? 有哪些常用方法
15. 说说对 Node 中的 process 的理解?有哪些常用方法?
16. Node.js 有哪些全局对象?
17. 说说你对Node.js 的理解?优缺点?应用场景?
18. body-parser 这个中间件是做什么用的?
19. 在没有async await 的时候，koa是怎么实现的洋葱模型?
20. koa 框架中，该怎么处理中间件的异常?
21. Node.js 如何调试?

················

TypeScript (46题)

1. 说说对 Typescript 中命名空间与模块的理解?区别?
2. 说说你对 typescript 的理解?与 javascript 的区别?
3. Typescript中泛型是什么?
4. Typescript中有哪些声明变量的方式?
5. 什么是Typescript的方法重载?
6. 请实现下面的 sleep 方法
7. ypescript 中的 is 关键字有什么用?
8. [ypeScript支持的访问修饰符有哪些?
9. 请实现下面的 myMap 方法
10. 请实现下面的 treePath 方法
11. 请实现下面的 produat 方法
12. 请实现下面的 myAI 方法
13. 请实现下面的 sum 方法
14. 请实现下面的 mergeArray 方法
15. 实现下面的 firstsinglechar 方法
16. 实现下面的 reverseword 方法
17. 如何定义一个数组，它的元素可能是字符串类型，也可能是数值
18. 请补充 objToArray 函数
19. 使用TS实现一个判断传入参数是否是数组类型的方法
20. TypeScript 的内置数据类型有哪些?
21. ts中any和unknown有什么区别?
22. 如何将 unknown 类型指定为一个更具体的类型?

················

性能优化 (25题)

1. script标签放在header里和放在body底部里有什么区别?
2. 前端性能优化指标有哪些?怎么进行性能检测?
3. SPA(单页应用)首屏加载速度慢怎么解决?
4. 如果使用CSS提高页面性能?
5. 怎么进行站点内的图片性能优化?
6. 壶拟DOM一定更快吗?
7. 有些框架不用虚拟dom，但是他们的性能也不错是为什么?
8. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
9. 讲-下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
10. React.memo()和 useMemo()的用法是什么，有哪些区别?
11. 导致页面加载白屏时间长的原因有哪些，怎么进行优化?
12. 如果一个列表有 100000 个数据，这个该怎么进行展示?
13. DNS 预解析是什么?怎么实现?
14. 在 React 中可以做哪些性能优化?
15. 浏览器为什么要请求并发数限制?
16. 如何确定页面的可用性时间，什么是Performance API?
17. 谈谈对 window.requestAnimationFrame 的理解
18. css加载会造成阻塞吗?
19. 什么是内存泄漏?什么原因会导致呢?
20. 如何用webpack来优化前端性能
21. 说说常规的前端性能优化手段
22. 什么是CSS Sprites?

················

ES6 (32题)

1. common.js和es6中模块引入的区别?
2. Map 和 Set 的用法以及区别
3. es5 中的类和es6中的class有什么区别?
4. 你是怎么理解ES6中 Decorator 的?使用场景有哪些?
5. 你是怎么理解ES6中Modue的?使用场景有哪些?
6. 你是怎么理解ES6中Proxy的?使用场景有哪些?
7. 怎么理解ES6中 Generator的?使用场景有哪些?
8. 你是怎么理解ES6中 Promise的?使用场景有哪些?
9. S6中新增的Set、Map两种数据结构怎么理解?
10. ES6中函数新增了哪些扩展?
11. ES6中对象新增了哪些扩展?
12. ES6中数组新增了哪些扩展?
13. JavaScript中的简单数据类型有哪些?
14. var、let、const之间有什么区别?
15. ES6有哪些新特性?
16. 如何把一个对象变成可选代对象?
17. 说说你对 Iterator, Generator 和 Async/Await 的理解
18. Map 和 WeakMap 有什么区别?
19. 说说你对 new.target 的理解
20. async/await 怎么进行错误处理?
21. 说说对 ES6 中rest参数的理解
22. 箭头函数的 this 指向哪里?

················

编程题 (50题）

1. 使用Promise实现红绿灯交替重复亮
2. bind、call、apply 有什么区别?如何实现一个bind?
3. 说说new操作符具体干了什么?
4. 如何实现上拉加载，下拉刷新?
5. 大文件怎么实现断点续传?
6. 什么是防抖和节流，以及如何编码实现?
7. 说说ajax的原理，以及如何实现?
8. 深拷贝浅拷贝有什么区别?怎么实现深拷贝?
9. 用js实现二又树的定义和基本操作
10. 如何实现一个轮播图组件?
11. 将下面的数组转成树状结构
12. 实现lodash的set和get方法
13. 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
14. 实现一个批量请求函数，要求能够限制并发量
15. 树转数组
16. 数组转树
17. 删除链表的一个节点

················

工程化(34题)

1. webpack5 的主要升级点有哪些?
2. 说下vite的原理
3. 与webpack类似的工具还有哪些?区别?
4. 说说如何借助webpack来优化前端性能?
5. 说说webpack proxy工作原理?为什么能解决跨域?
6. 说说webpack的热更新是如何做到的?原理是什么?
7. 面试官:说说Loader和Plugin的区别?编写Loader，Plugin的思路?
8. 说说webpack中常见的Plugin?解决了什么问题?
9. 说说webpack中常见的Loader?解决了什么问题?
10. 说说webpack的构建流程?
11. 说说你对webpack的理解?解决了什么问题?
12. webpack loader 和 plugin 实现原理
13. 如何提高webpack的构建速度?
14. 说说 webpack-dev-server 的原理
15. 你对 babel 了解吗，能不能说说,几个 stage 代表什么意思?
16. webpack的module、bundle、chunk分别指的是什么?
17. 什么是 CI/CD?
18. 说说你对前端工程化的理解
19. 说说你对 SSG 的理解
20. 聊聊 vite 和 webpack 的区别
21. webpack treeShaking机制的原理是什么?

················

有想要完整版的小伙伴：点赞+转发后，私信我【前端】即可