前端核心面试八股文整理
一、JavaScript（323 题）
- 不会冒泡的事件有哪些？
- mouseEnter 和 mouseOver 有什么区别？
- MessageChannel 是什么，有什么使用场景？
- async、await 实现原理
- Proxy 能够监听到对象中的对象的引用吗？
- 如何让 var [a, b] = {a: 1,b:2}解构赋值成功？
- 下面代码会输出什么？
- 描述下列代码的执行结果
- 什么是作用域链？
- bind、call、apply 有什么区别？如何实现一个 bind？
二、CSS（61 题）
- css 中的 animation、transition、transform 有什么区别？
- 怎么做移动端的样式适配？
- 相邻的两个 inline-block 节点为什么会出现间隔，该如何解决？
- grid 网格布局是什么？
- CSS3 新增了哪些特性？
- 怎么使用 CSS3 实现动画？
- 怎么理解回流跟重绘？什么场景下会触发？
- 什么是响应式设计？响应式设计的吗？基本原理是什么？如何进行实现？
- 如果使用 CSS 提高页面性能？
- 如何实现单行/多行文本溢出的省略样式？
三、HTML（57 题）
- 什么是 DOM 和 BOM？
- 简单描述从输入网址到页面显示的过程
- 一台设备的 dpr，是否是可变的？
- 前端该如何选择图片的格式？
- 前端跨页面通信，你知道哪些方法？
- 说说你对 Dom 树的理解
- 行内元素有哪些？块级元素有哪些？空 (void) 元素有那些？
- html 和 css 中的图片加载与渲染规则是什么样的？
- title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
- script 标签为什么建议放在 body 标签的底部 (defer、async)
四、React（83 题）
- 下面代码中，点击'+3"按钮后，age 的值是什么？
- React Portals 有什么用？
- react 和 react-dom 是什么关系？
- React 中为什么不直接使用 requestIdleCallback？
- 为什么 react 需要 fiber 架构，而 Vue 却不需要？
- 子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
- 说说 React render 方法的原理？在什么时候会被触发？
- 说说 React 事件和原生事件的执行顺序
- 说说对受控组件和非受控组件的理解，以及应用场景？
五、Vue（80 题）
- Vue 有了数据响应式，为何还要 diff？
- vue3 为什么不需要时间分片？
- vue3 为什么要引入 Composition API？
- 谈谈 Vue 事件机制，并手写$on、$off、$emit、$once
- computed 计算值为什么还可以依赖另外一个 computed 计算值？
- 说一下 vm.$set 原理
- 怎么在 Vue 中定义全局方法？
- Vue 中父组件怎么监听到子组件的生命周期？
- 说说 vue3 中的响应式设计原理
六、算法（19 题）
- 最大的钻石
- 举例说明你对尾递归的理解，以及有哪些应用场景
- 去除字符串中出现次数最少的字符，不改变原字符串的顺序。
- 请手写'快速排序'
- 洗牌算法
- 什么是尾调用优化和尾递归？
- 合并 K 个升序链表
- 什么是时间复杂度？
- 请手写'基数排序'
- 请手写'桶排序'
七、计算机网络（71 题）
- 简单描述从输入网址到页面显示的过程
- 说说 WebSocket 和 HTTP 的区别
- 说说 https 的握手过程
- HTTP2 中，多路复用的原理是什么？
- 说说你对'三次握手'、'四次挥手'的理解
- 为什么推荐将静态资源放到 cdn 上？
- 什么是 DNS 劫持？
- TLS 1.3 做了哪些改进？
- TLS1.2 握手的过程是怎样的？
- HTTP 报文结构是怎样的？
八、Node.js（27 题）
- common.js 和 es6 中模块引入的区别？
- 为什么 Node 在使用 es module 时必须加上文件扩展名？
- 浏览器和 Node 中的事件循环有什么区别？
- Node 性能如何进行监控以及优化？
- 如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
- 如何实现文件上传？说说你的思路
- 如何实现 JWT 鉴权机制？说说你的思路
- 说说对中间件概念的理解，如何封装 node 中间件？
- 说说 Node 文件查找的优先级以及 Require 方法的文件查找策略？
- 说说对 Nodejs 中的事件循环机制理解？
九、TypeScript（46 题）
- 说说对 TypeScript 中命名空间与模块的理解？区别？
- 说说你对 typescript 的理解？与 javascript 的区别？
- Typescript 中泛型是什么？
- TypeScript 中有哪些声明变量的方式？
- 什么是 Typescript 的方法重载？
- 请实现下面的 sleep 方法
- typescript 中的 is 关键字有什么用？
- TypeScript 支持的访问修饰符有哪些？
- 请实现下面的 myMap 方法
- 请实现下面的 treePath 方法
十、性能优化（25 题）
- script 标签放在 header 里和放在 body 底部里有什么区别？
- 前端性能优化指标有哪些？怎么进行性能检测？
- SPA(单页应用) 首屏加载速度慢怎么解决？
- 如果使用 CSS 提高页面性能？
- 怎么进行站点内的图片性能优化？
- 虚拟 DOM 一定更快吗？
- 有些框架不用虚拟 dom，但是他们的性能也不错是为什么？
- 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
- 讲一下 png8、png16、png32 的区别，并简单讲讲 png 的压缩原理
- React.memo() 和 useMemo() 的用法是什么，有哪些区别？
十一、前端安全（21 题）
- 说说你对 XSS 的了解
- web 常见的攻击方式有哪些，以及如何进行防御？
- 说说你对前端鉴权的理解
- 如何禁止别人调试自己的前端代码？
- CSP(Content Security Policy) 可以解决什么问题？
- 前端怎么实现跨域请求？
- HTTPS 有哪些优点？
- webSocket 有哪些安全问题，应该如何应对？
- 什么是点击劫持？如何防范点击劫持？
- 什么是 Samesite Cookie 属性？
十二、小程序（9 题）
- 说说微信小程序的架构？
- 为什么小程序里拿不到 dom 相关的 api？
- 小程序的双线程分别做的什么事情？
- 简述微信小程序原理？
- 微信小程序的优劣势？
- 小程序页面间有哪些传递数据的方法？
- 微信小程序 bindtap 和 catchtap 区别？
- 小程序 WXSS 与 CSS 的区别？
- 简述一下微信小程序的主要文件有哪些？
十三、ES6（32 题）
- common.js 和 es6 中模块引入的区别？
- Map 和 Set 的用法以及区别
- es5 中的类和 es6 中的 class 有什么区别？
- 你是怎么理解 ES6 中 Decorator 的？使用场景有哪些？
- 你是怎么理解 ES6 中 Module 的？使用场景有哪些？
- 你是怎么理解 ES6 中 Proxy 的？使用场景有哪些？
- 怎么理解 ES6 中 Generator 的？使用场景有哪些？
- 你是怎么理解 ES6 中 Promise 的？使用场景有哪些？
- ES6 中新增的 Set、Map 两种数据结构怎么理解？
- ES6 中函数新增了哪些扩展？
十四、编程题（50 题）
- 使用 Promise 实现红绿灯交替重复亮
- bind、call、apply 有什么区别？如何实现一个 bind？
- 说说 new 操作符具体干了什么？
- 如何实现上拉加载，下拉刷新？
- 大文件怎么实现断点续传？
- 什么是防抖和节流，以及如何编码实现？
- 说说 ajax 的原理，以及如何实现？
- 深拷贝浅拷贝有什么区别？怎么实现深拷贝？
- 用 js 实现二叉树的定义和基本操作
十五、设计模式（7 题）
- 观察者模式和发布订阅模式分别是什么？有什么区别？
- 开发的过程中你用到过哪些设计模式？
- 设计模式分类
- 什么是 MVVM？比之 MVC 有什么区别？什么又是 MVP？
- 单例模式
- 设计模式的六大原则
- 工厂模式
十六、前端工程化（34 题）
- package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？
- webpack 5 的主要升级点有哪些？
- 说下 vite 的原理
- 与 webpack 类似的工具还有哪些？区别？
- 说说如何借助 webpack 来优化前端性能？
- 说说 webpack proxy 工作原理？为什么能解决跨域？
- 说说 webpack 的热更新是如何做到的？原理是什么？
- 面试官：说说 Loader 和 Plugin 的区别？编写 Loader，Plugin 的思路？
- 说说 webpack 中常见的 Plugin？解决了什么问题？
- 说说 webpack 中常见的 Loader？解决了什么问题？
